/* ==========================================================================
   Pages légales — mentions légales, politique de confidentialité
   --------------------------------------------------------------------------
   Ce sont des pages qu'on LIT EN ENTIER quand on les ouvre, pas qu'on
   survole : mesure de ligne bornée, titres bien détachés, tableau lisible.
   ========================================================================== */

.page-legale {
    max-inline-size: 72ch;
    margin-block-start: var(--sp-18);
}

.page-legale h1 {
    margin: 0;
}

.page-legale__maj {
    margin: var(--sp-9) 0 var(--sp-24);
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

/* `margin-top` généreux : dans un texte long, c'est l'espace AVANT le titre
   qui signale la rupture, pas sa taille. */
.page-legale h2 {
    margin: var(--sp-34) 0 var(--sp-11);
    padding-block-start: var(--sp-15);
    border-block-start: 1px solid var(--c-border);
}

.page-legale__texte {
    margin: 0 0 var(--sp-13);
    color: var(--c-body);
    line-height: 1.6;
}

.page-legale .liste-tirets {
    margin: 0 0 var(--sp-13);
}

.page-legale a {
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-legale a:hover {
    color: var(--c-orange);
}

/* ---- Fiche d'identité (dt/dd) -------------------------------------------- */
.fiche {
    display: grid;
    gap: var(--sp-9);
    margin: 0;
}

.fiche > div {
    display: grid;
    gap: 2px;
    padding-block-end: var(--sp-9);
    border-block-end: 1px solid var(--c-border);
}

.fiche dt {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-label);
}

.fiche dd {
    margin: 0;
    color: var(--c-body);
}

/* ---- Tableau des traitements --------------------------------------------- *
 * Cinq colonnes n'entrent pas dans 390 px. Le conteneur défile
 * horizontalement, et il est FOCUSABLE : sans `tabindex`, une zone
 * défilante est inatteignable au clavier.                                    */
.tableau-scroll {
    overflow-x: auto;
    margin-block-end: var(--sp-13);
    -webkit-overflow-scrolling: touch;
}

.tableau-scroll:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.tableau-donnees {
    inline-size: 100%;
    min-inline-size: 620px;
    border-collapse: collapse;
    font-size: var(--fs-meta);
}

.tableau-donnees th,
.tableau-donnees td {
    padding: var(--sp-11);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--c-border);
}

.tableau-donnees thead th {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-label);
    white-space: nowrap;
}

.tableau-donnees tbody th {
    color: var(--c-heading);
    font-weight: 700;
}

.tableau-donnees td {
    color: var(--c-body);
}

/* ---- Encart de manque ----------------------------------------------------- *
 * Repris de `.alerte--avertissement` : ces blocs signalent une mention
 * légalement due mais pas encore fournie. Ils DOIVENT se voir.               */
.page-legale .alerte {
    display: block;
    margin: 0 0 var(--sp-13);
}

@media (min-width: 768px) {
    .page-legale {
        margin-block-start: var(--sp-24);
    }

    .fiche {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-13) var(--sp-24);
    }
}

/* ==========================================================================
   Page tarifs
   ========================================================================== */
.tarifs-liste {
    display: grid;
    gap: var(--sp-11);
    margin: 0 0 var(--sp-20);
    padding: 0;
    list-style: none;
}

.tarifs-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-6) var(--sp-15);
    padding: var(--sp-15);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-10);
}

.tarifs-ligne > div {
    flex: 1 1 260px;
    min-inline-size: 0;
}

.tarifs-ligne__nom {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--c-heading);
}

.tarifs-ligne__note {
    margin: var(--sp-6) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
    line-height: 1.5;
}

.tarifs-ligne__prix {
    flex: none;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--c-blue);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tarif pas encore communiqué : affiché en attente, jamais inventé. */
.tarifs-ligne__prix--attente {
    font-size: var(--fs-body);
    color: var(--c-meta);
}

/* ==========================================================================
   Page contact
   ========================================================================== */
.contact-grille {
    display: grid;
    gap: var(--sp-13);
    margin-block: var(--sp-18) var(--sp-24);
}

.contact-carte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
}

.contact-carte .ec__note {
    flex: 1;
    margin: 0;
}

.contact-carte__tel {
    font-size: var(--fs-phone-banner);
    color: var(--c-blue);
}

.contact-carte__mail {
    margin: 0;
    font-size: var(--fs-body);
    word-break: break-word;
}

.contact-carte__mail a {
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-adresse {
    margin: 0 0 var(--sp-13);
    font-style: normal;
    color: var(--c-body);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .contact-grille {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
}

/* ---- Liens SEULS dans leur bloc : vraies cibles tactiles ------------------ *
 * Un lien pris dans une phrase relève de l'exception « inline » de la WCAG et
 * reste tel quel. Mais un e-mail ou un numéro seul dans sa définition est une
 * cible qu'on vise du doigt : il lui faut ses 44 px.                          */
.fiche dd a,
.contact-carte__mail a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
}

/* ---- Respiration avant les titres de section ----------------------------- *
 * Les pages Tarifs, À propos et Contact enchaînent titre et paragraphe sans
 * conteneur intermédiaire, là où les pages prestation passent par
 * `.page-seo__bloc`. Sans cette marge, le H2 colle au paragraphe précédent et
 * la rupture de section ne se lit plus.                                       */
.page-seo__contenu > h2 {
    margin-block: var(--sp-34) var(--sp-13);
}

.page-seo__contenu > h2:first-child {
    margin-block-start: 0;
}