@import url('../outils/color.css');

/* ⚠️ Le footer doit toucher le BAS DE L'ECRAN quand le texte est court.
   Sans ca, la page mesure 1268px de haut : sur un ecran 4K il restait presque
   900px de creme vide sous la bande legale, et le footer flottait au milieu.
   Le body devient une colonne flex d'au moins une hauteur d'ecran, et c'est le
   bloc de texte qui absorbe le surplus.
   Les enfants en position fixe (overlay de transition, navbar, bouton remonter
   en haut) ne sont pas des elements flex : ils ne sont pas affectes.
   `:has()` est deja utilise ailleurs sur le site (contact.css), donc sans
   risque de compatibilite ici. */
body:has(.legalpage) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

body:has(.legalpage) .legalpage {
    flex: 1 0 auto;
}

/* ====== Pages legales (mentions, confidentialite, CGV) ====== */
.legalpage {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    box-sizing: border-box;
    /* padding lateral FIXE volontairement : --espacecote vaut 17.5% au-dessus de
       2000px, ce qui ecraserait completement ce bloc a max-width 860px (4K).
       Le centrage est deja assure par max-width + margin auto. */
    /* le haut repart de la hauteur reelle de la navbar fixe (74px) plus une
       respiration, au lieu d'un 160px qui laissait 86px de vide sous elle */
    padding: calc(74px + 3rem) 24px 90px;
    background-color: var(--backgroundaccueil);
}

.legalpage-retour {
    display: inline-block;
    margin-bottom: 2rem;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b6b73;
}

.legalpage-retour:hover {
    color: #000;
}

.legalpage h1 {
    font-size: 2.5rem;
    padding: 0;
    margin: 0 0 0.4rem;
    line-height: 1.1;
}

.legalpage-maj {
    margin: 0 0 3rem;
    font-size: 0.85rem;
    color: #8a8a92;
    text-align: left;
}

.legalpage-bloc {
    margin-bottom: 2.4rem;
}

.legalpage-bloc h2 {
    font-size: 1.1rem;
    margin: 0 0 0.6rem;
    padding: 0;
    color: #000;
    font-family: var(--police);
    letter-spacing: 0.02em;
}

/* couleur forcee : une regle de navbar.css passe le texte en blanc sur ces pages */
.legalpage-bloc p,
.legalpage-bloc p strong {
    color: #1a1a1a;
}

.legalpage-bloc p strong {
    font-weight: 700;
}

.legalpage-bloc p {
    margin: 0;
    text-align: left;
    line-height: 1.8;
    hyphens: none;
    -webkit-hyphens: none;
}

@media (max-width: 768px) {
    .legalpage {
        /* la navbar tombe a 64px sous 768px */
        padding: calc(64px + 2rem) 20px 60px;
    }

    .legalpage h1 {
        font-size: 1.8rem;
    }
}

/* ============================================================
   PAGE DE REMERCIEMENT (merci.html)
   Elle reprend .legalpage : meme colonne centree, meme retrait
   lateral FIXE. Ne pas y remettre --espacecote, c'est le piege
   4K deja documente en haut de ce fichier.

   Typo Inter partout et palette neutre : pas d'IBM Plex Mono sur
   des libelles de lecture. Le mono reste reserve aux etiquettes de
   reperage du site.
   ⚠️ UNE exception au « pas de vert en aplat » : le premier mot du
   titre est surligne, demande de Tibo. Elle s'arrete la, le reste
   de la page garde sa palette neutre.
   ============================================================ */

/* Contenu centre verticalement quand l'ecran est assez haut.
   Le body est deja une colonne flex d'au moins 100dvh et .legalpage y est en
   flex: 1 0 auto : c'est donc lui qui recoit toute la hauteur restante, et sur
   un grand ecran le texte se tassait en haut avec un vide jusqu'au footer.
   On repartit ce vide au lieu de le laisser s'accumuler dessous.

   ⚠️ `safe center` n'est pas une coquetterie : un centrage simple deborde des
   DEUX cotes quand le contenu est plus haut que la boite, et le haut devient
   alors inatteignable au defilement (typiquement sur telephone, ou en zoom
   texte). Avec `safe`, le navigateur retombe tout seul sur un alignement en
   haut des que ca ne rentre plus. La declaration est doublee pour les moteurs
   qui ignorent le mot-cle : ils gardent le centrage simple, et c'est la
   deuxieme ligne qui gagne partout ailleurs.

   Padding vertical rendu SYMETRIQUE ici : celui de .legalpage est plus grand
   en haut (degagement de la navbar fixe) qu'en bas, ce qui decalait le bloc
   centre d'une quinzaine de pixels vers le bas. La valeur haute est conservee
   des deux cotes, donc le degagement de la navbar reste garanti le jour ou le
   contenu depasse la hauteur de l'ecran. */
body:has(.mercipage) .mercipage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    padding-block: calc(74px + 3rem);
}

/* ⚠️ La pastille est en inline-block. Devenue element flex elle est
   « blockifiee », et l'etirement par defaut la ferait courir sur toute la
   largeur de la colonne : la petite gelule arrondie devenait une barre. */
body:has(.mercipage) .mercipage .merci-pastille {
    align-self: flex-start;
}

/* ⚠️ Un conteneur flex SUPPRIME la fusion des marges verticales : deux marges
   voisines qui se recouvraient s'additionnent desormais. Deux ecarts se
   creusaient sans qu'on ait rien demande, on les ramene a leur valeur d'avant.
   - titre (0.4rem dessous) + accroche (0.8rem dessus) : 0.8rem avant, 1.2 apres
   - dernier bloc (2.4rem dessous) + liens (3rem dessus) : 3rem avant, 5.4 apres
   On neutralise la marge en trop de chaque paire plutot que de retoucher les
   deux valeurs, pour que le rendu hors flex reste identique. */
body:has(.mercipage) .mercipage h1 {
    margin-bottom: 0;
}

body:has(.mercipage) .mercipage .legalpage-bloc:last-of-type {
    margin-bottom: 0;
}

/* Surlignage du premier mot du titre (« Merci » / « Thanks »).
   Le mot est balise dans fr.json / en.json, pas dans le gabarit :
   c'est du CONTENU, il change avec la langue, et c'est deja comme
   ca que l'accueil traite son <em>.
   --soulignage est le meme vert que la selection de texte du site,
   c'est exactement le rendu demande. Pas de padding : le surlignage
   epouse le mot, comme une selection. */
.mercipage h1 .merci-surlignage {
    background-color: var(--soulignage);
    color: inherit;
}
.mercipage .merci-pastille {
    display: inline-block;
    margin: 0 0 1.4rem;
    padding: 6px 14px;
    border: 1px solid #d5d5cd;
    border-radius: 100px;
    color: #6b6b73;
    font-family: var(--police);
    font-size: 0.82rem;
    font-weight: 500;
}

.mercipage .merci-lead {
    margin: 0.8rem 0 2.4rem;
    color: #1a1a1a;
    font-size: 1.15rem;
    line-height: 1.6;
}

.mercipage .merci-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 3rem;
}

.mercipage .merci-lien {
    padding: 12px 22px;
    border: 1px solid #d5d5cd;
    border-radius: var(--anglebouton);
    color: #1a1a1a;
    font-family: var(--police);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* base.css passe tous les <a> en #d8f4ff au survol : illisible ici. */
.mercipage .merci-lien:hover,
.mercipage .merci-lien:focus-visible {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: var(--backgroundaccueil);
}

.mercipage .merci-lien--fort {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: var(--backgroundaccueil);
}

.mercipage .merci-lien--fort:hover,
.mercipage .merci-lien--fort:focus-visible {
    background: transparent;
    color: #1a1a1a;
}

/* ⚠️ Tailles en px sous 768px : base.css met html a 13px, les rem y valent
   19 % de moins qu'attendu et les boutons passaient sous la taille du texte
   courant. */
@media (max-width: 768px) {
    .mercipage .merci-lead {
        font-size: 15px;
    }

    .mercipage .merci-pastille {
        font-size: 12px;
    }

    .mercipage .merci-liens {
        flex-direction: column;
    }

    .mercipage .merci-lien {
        font-size: 15px;
        text-align: center;
    }
}