/* =============================================================================
   tarifs-v7 : page /static/tarifs.html

   La page tient en quatre blocs : un titre d'affichage, une carte de services,
   une FAQ, une banniere de soutien. Elle reprend .carte, .carte-accent,
   .carte-liste, .titre-carte, .badge, .chapeau, .encart et .bouton-primaire des
   feuilles v7 ; ce fichier ne fait qu'ajouter ce qui n'existe nulle part
   ailleurs, le titre de page, le tableau de services et la FAQ.

   Aucune couleur en dur : uniquement des var(--ex-*) de tokens.css, pour que
   le mode sombre suive.
   ============================================================================= */

/* --- Titre de page -----------------------------------------------------------
   Seul endroit du site avec un titre d'affichage centre. Il n'est pas dans une
   carte : la page annonce une position avant de la detailler, et une carte
   l'enfermerait au meme rang que le reste. */

.v7.tarifs .titre-page {
    text-align: center;
    padding: 26px 20px 8px;
}

.v7.tarifs .surtitre {
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ex-amber-700);
}

.v7.tarifs .titre-page h1 {
    margin-top: 14px;
    font-size: 52px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ex-stone-900);
    text-align: center;
}
/* L'esperluette relie deux regimes, elle ne les hierarchise pas : elle
   s'efface pour que les deux mots pesent pareil. */
.v7.tarifs .titre-page .liaison {
    font-weight: 400;
    color: var(--ex-stone-400);
}

.v7.tarifs .titre-page .chapeau {
    margin: 18px auto 0;
    max-width: 46rem;
    text-align: center;
}
/* Les deux mots que la page doit laisser en memoire. <b> et non <strong> :
   c'est une mise en relief de mots-cles, pas une emphase de sens. Le poids est
   pose ici plutot que laisse au gras par defaut du navigateur, qui rendrait
   lourd sur du 16px. */
.v7.tarifs .titre-page .chapeau b {
    font-weight: 700;
    color: var(--ex-stone-900);
}

@media (max-width: 720px) {
    .v7.tarifs .titre-page { padding: 14px 4px 4px; }
    .v7.tarifs .titre-page h1 { font-size: 34px; }
}

/* --- Carte des services ------------------------------------------------------
   .carte-liste fournit deja le bandeau d'en-tete gris et la gouttiere de 18px,
   mais uniquement pour ses enfants attendus sur une fiche : > h2, > ul,
   > .invite. Le tableau est un enfant nouveau, il faut lui rendre la meme
   gouttiere sans quoi il touche les bords de la carte.

   La mention qui suivait le tableau a ete supprimee : elle expliquait que le
   prix libre des annonces part de zero, ce que le chapeau couvre desormais et
   que la pastille verte ne contredit plus. Le tableau est donc le dernier
   enfant de la carte et porte lui-meme la marge basse. */

.v7.tarifs .carte-liste > h2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px 20px;
    flex-wrap: wrap;
}
/* Le denombrement contredit une attente : on cherche un tarif, on trouve un
   compte de services et un zero. Il est donc lisible, mais discret. */
.v7.tarifs .denombrement {
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ex-stone-500);
}

.v7.tarifs .carte-liste > .tableau-services {
    width: calc(100% - 36px);
    margin: 6px 18px 16px;
    border-collapse: collapse;
}

.v7.tarifs .tableau-services tbody th,
.v7.tarifs .tableau-services tbody td {
    padding: 14px 0;
    border-top: 1px solid var(--ex-stone-100);
    vertical-align: baseline;
    text-align: left;
}
.v7.tarifs .tableau-services tbody tr:first-child th,
.v7.tarifs .tableau-services tbody tr:first-child td { border-top: 0; }

/* Colonne 1, la rubrique. Meme traitement que les labels de rangee de la v7 :
   capitales grises, c'est un nom de champ, pas un titre. */
.v7.tarifs .tableau-services tbody th {
    width: 148px;
    padding-right: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
    white-space: nowrap;
}

/* Colonne 2, la phrase. C'est elle qu'on lit, elle porte le corps de texte. */
.v7.tarifs .tableau-services tbody td:not(.statut) {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ex-stone-800);
    padding-right: 24px;
}

/* Colonne 3, le statut, cale a droite pour former une verticale de pastilles
   qui se lit d'un seul coup d'oeil, sans parcourir les libelles. */
.v7.tarifs .tableau-services .statut {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* Ancrage des futures pages produit. La rubrique est l'ancre naturelle : elle
   porte deja le nom du service et se parcourt du regard, contrairement a un
   bouton qu'il faudrait poser quelque part. Le jour ou une page existe, il
   suffit d'entourer le libelle d'un <a href> : la ligne ne bouge pas, seul le
   soulignement pointille apparait. Tant qu'aucune page n'existe, cette regle
   ne s'applique a rien et n'ajoute aucun lien mort. */
.v7.tarifs .tableau-services tbody th a,
.v7.tarifs .tableau-services tbody th a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--ex-stone-300);
    transition: color .15s var(--ex-ease), border-color .15s var(--ex-ease);
}
.v7.tarifs .tableau-services tbody th a:hover {
    color: var(--ex-amber-700);
    border-bottom-color: var(--ex-amber-400);
}

/* Sous 860px la ligne a trois colonnes ne tient plus : la rubrique passe
   au-dessus, la phrase suit, le statut se range a gauche sous elle. Les
   en-tetes restent lus par les lecteurs d'ecran via l'association th/td. */
@media (max-width: 860px) {
    .v7.tarifs .tableau-services,
    .v7.tarifs .tableau-services tbody,
    .v7.tarifs .tableau-services tr,
    .v7.tarifs .tableau-services tbody th,
    .v7.tarifs .tableau-services tbody td { display: block; width: auto; }

    .v7.tarifs .tableau-services tr {
        padding: 14px 0;
        border-top: 1px solid var(--ex-stone-100);
    }
    .v7.tarifs .tableau-services tr:first-child { border-top: 0; }

    .v7.tarifs .tableau-services tbody th,
    .v7.tarifs .tableau-services tbody td {
        padding: 0;
        border-top: 0;
        white-space: normal;
    }
    .v7.tarifs .tableau-services tbody td:not(.statut) { margin-top: 3px; padding-right: 0; }
    .v7.tarifs .tableau-services .statut { margin-top: 8px; text-align: left; }
}

/* --- FAQ ---------------------------------------------------------------------
   Une liste de definitions : la question definit, la reponse est la
   definition. Pas de repliage, les reponses sont courtes et la page gagne a
   etre lue d'une traite plutot que depliee neuf fois. */

.v7.tarifs .faq > h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ex-stone-900);
}
.v7.tarifs .faq .developpe {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ex-stone-500);
}

.v7.tarifs .questions {
    padding: 6px 26px 22px;
}
.v7.tarifs .questions dt {
    margin-top: 22px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ex-stone-900);
}
.v7.tarifs .questions dt:first-of-type { margin-top: 16px; }
/* Le chevron marque la reponse sans ajouter d'element : la puce d'une liste de
   definitions n'existe pas, on la dessine. */
.v7.tarifs .questions dd {
    position: relative;
    margin-top: 6px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ex-stone-700);
}
.v7.tarifs .questions dd::before {
    content: '>';
    position: absolute;
    left: 2px;
    font-family: var(--ex-mono);
    font-weight: 700;
    color: var(--ex-amber-600);
}
/* Une question qui suit une reponse ouvre un nouveau sujet : filet de
   separation, comme entre deux rangees de carte. */
.v7.tarifs .questions dd + dt {
    padding-top: 22px;
    border-top: 1px solid var(--ex-stone-100);
}

@media (max-width: 640px) {
    .v7.tarifs .faq > h2 { font-size: 23px; }
    .v7.tarifs .questions { padding: 4px 18px 18px; }
}

/* --- Banniere de soutien -----------------------------------------------------
   .encart vient de waldec-v7.css. Ici il porte le seul bouton de la page :
   texte a gauche, action a droite, plutot qu'un bouton pleine largeur. */

/* Deux enfants seulement, le titre et le bouton : l'accroche a ete supprimee,
   elle redisait le titre et le libelle du bouton et affirmait un "a partir de
   ce que vous voulez" faux au sens strict, le plancher reel etant de 2 euros.
   Flex plutot que grille : rien a placer, le titre prend la place libre et le
   bouton reste a droite. Si une accroche revient un jour, il faudra lui donner
   flex-basis: 100% pour qu'elle passe a la ligne avant le bouton. */
.v7.tarifs .encart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 24px 28px;
}
.v7.tarifs .encart h2 { flex: 1 1 auto; }
.v7.tarifs .encart .bouton-primaire {
    flex: 0 0 auto;
    padding-inline: 28px;
}

@media (max-width: 640px) {
    .v7.tarifs .encart .bouton-primaire { flex-basis: 100%; }
}