/* ==========================================================================
   Groomly — feuille de style unique du site
   --------------------------------------------------------------------------
   Toutes les pages chargent ce fichier. Aucune couleur, aucun arrondi et
   aucune ombre ne doit etre ecrit en dur ailleurs : on utilise les jetons
   ci-dessous. C'est ce qui garantit qu'une page ecrite dans six mois
   ressemblera aux autres.

   Deux roses, et c'est volontaire :
     --rose        #f43f5e  surfaces, aplats, accents. Contraste 3,67:1 sur
                            blanc : conforme pour une surface (seuil 3,0),
                            PAS pour du texte.
     --rose-texte  #e11d48  des qu'il s'agit d'un TEXTE rose sur blanc, ou
                            d'un texte blanc sur fond rose. Contraste 4,91:1,
                            conforme WCAG AA texte normal (seuil 4,5).
   Se tromper de jeton, c'est passer sous le seuil d'accessibilite.
   ========================================================================== */

:root {
    /* Marque */
    --rose:            #f43f5e;
    --rose-texte:      #e11d48;
    --rose-fonce:      #be123c;
    --rose-clair:      #fff1f2;
    --rose-bordure:    #fecdd3;

    /* Encre et gris */
    --encre:           #18181b;
    --encre-douce:     #3f3f46;
    /* #71717a ne donne que 4,40 sur --surface-douce et sur --rose-clair :
       sous le seuil. Deux crans plus fonce, le gris passe partout (4,80 au
       pire) sans qu'on voie la difference. */
    --gris:            #6b6b74;
    --gris-clair:      #a1a1aa;
    --trait:           #e4e4e7;
    --trait-fort:      #d4d4d8;
    /* La bordure d'un champ de saisie est la SEULE chose qui signale ou il
       faut cliquer : le WCAG 1.4.11 lui impose 3:1, ce que --trait-fort
       (1,48 sur blanc) n'atteint pas. Cette teinte donne 3,38 sur blanc et
       3,24 sur --fond. Reservee aux controles, jamais aux cartes. */
    --bord-champ:      #8b8b94;
    --fond:            #fafafa;
    --surface:         #ffffff;
    --surface-douce:   #f4f4f5;

    /* Etats */
    --succes:          #047857;
    --succes-clair:    #ecfdf5;
    --alerte:          #b45309;
    --alerte-clair:    #fffbeb;
    --erreur:          #b91c1c;
    --erreur-clair:    #fef2f2;

    /* Typographie */
    --police: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              Helvetica, Arial, sans-serif;

    /* Arrondis : trois valeurs, pas six */
    --r-petit:  8px;
    --r-moyen:  14px;
    --r-grand:  20px;
    --r-rond:   999px;

    /* Ombres : deux valeurs */
    --ombre:      0 1px 2px rgba(24, 24, 27, .04), 0 4px 12px rgba(24, 24, 27, .06);
    --ombre-forte:0 2px 4px rgba(24, 24, 27, .05), 0 12px 32px rgba(24, 24, 27, .10);

    /* Rythme vertical */
    --pas: 8px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.6;
    color: var(--encre-douce);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    color: var(--encre);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 calc(var(--pas) * 2);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 calc(var(--pas) * 2); }

a { color: var(--rose-texte); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Un seul anneau de focus pour tout le site : visible, jamais supprime.
   Sans lui, un utilisateur au clavier ne sait pas ou il se trouve. */
:focus-visible {
    outline: 3px solid var(--rose);
    outline-offset: 2px;
    border-radius: var(--r-petit);
}

.g-invisible {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */

.g-large { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.g-etroit { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

.g-section { padding: calc(var(--pas) * 10) 0; }

/* Les seules grilles dont le site a besoin. Elles remplacent les classes
   Tailwind « grid grid-cols-1 md:grid-cols-3 gap-4 » : plus aucune page ne
   depend d'un CDN pour se mettre en page. */
.g-grille { display: grid; grid-template-columns: 1fr; gap: calc(var(--pas) * 2); }
.g-grille-large { gap: calc(var(--pas) * 4); }
@media (min-width: 760px) {
    .g-grille-2 { grid-template-columns: repeat(2, 1fr); }
    .g-grille-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   En-tete commun a toutes les pages publiques
   -------------------------------------------------------------------------- */

.g-entete {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--trait);
}
.g-entete-inner {
    display: flex; align-items: center; gap: calc(var(--pas) * 3);
    height: 68px;
}
.g-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em;
    color: var(--encre); text-decoration: none;
}
.g-logo:hover { text-decoration: none; }
.g-logo img { width: 28px; height: 28px; border-radius: var(--r-petit); }
.g-nav { display: flex; align-items: center; gap: calc(var(--pas) * 3); margin-left: auto; }

/* :not(.g-btn) est indispensable. Sans lui, « .g-nav a » (specificite 0,1,1)
   l'emporte sur « .g-btn-primaire » (0,1,0) et le libelle du bouton devient
   gris sur fond rose : illisible, et sous le seuil AA. */
.g-nav a:not(.g-btn) { color: var(--gris); font-weight: 600; font-size: .9375rem; }
.g-nav a:not(.g-btn):hover { color: var(--encre); text-decoration: none; }
.g-nav a.g-actif:not(.g-btn) { color: var(--encre); }

/* Le menu mobile est un <details> et non un bouton + JavaScript. Le
   navigateur fournit deja l'ouverture au clic, au clavier (Entree et Espace),
   l'etat aria-expanded et le repli au rechargement. Consequence directe :
   la navigation fonctionne meme JavaScript desactive, ce qui n'etait pas le
   cas avec un menu scripte. */
.g-menu { display: none; position: relative; margin-left: auto; }
.g-menu > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--trait-fort); border-radius: var(--r-moyen);
    background: var(--surface);
}
.g-menu > summary::-webkit-details-marker { display: none; }
.g-menu > summary::marker { content: ''; }
.g-burger { display: block; width: 18px; height: 12px; position: relative; }
.g-burger span {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: var(--encre); border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}
.g-burger span:nth-child(1) { top: 0; }
.g-burger span:nth-child(2) { top: 5px; }
.g-burger span:nth-child(3) { top: 10px; }
.g-menu[open] .g-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.g-menu[open] .g-burger span:nth-child(2) { opacity: 0; }
.g-menu[open] .g-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.g-menu-panneau {
    position: absolute; right: 0; top: calc(100% + 10px);
    width: min(280px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-grand);
    box-shadow: var(--ombre-forte);
    padding: 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.g-menu-panneau a:not(.g-btn) {
    display: block; padding: 12px 14px;
    border-radius: var(--r-moyen);
    color: var(--encre); font-weight: 600; font-size: .9375rem;
}
.g-menu-panneau a:not(.g-btn):hover { background: var(--surface-douce); text-decoration: none; }
.g-menu-panneau a.g-actif:not(.g-btn) { color: var(--rose-texte); background: var(--rose-clair); }
.g-menu-separateur { height: 1px; background: var(--trait); margin: 8px 6px; }
.g-menu-panneau .g-btn { margin: 4px 6px 6px; }
.g-menu-titre {
    padding: 10px 14px 4px;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gris-clair);
}

@media (max-width: 900px) {
    .g-nav { display: none; }
    .g-menu { display: block; }
    .g-entete-inner { height: 62px; }
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 24px;
    font-family: inherit; font-size: 1rem; font-weight: 700;
    border: 1px solid transparent; border-radius: var(--r-moyen);
    cursor: pointer; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.g-btn:hover { text-decoration: none; }
.g-btn:active { transform: translateY(1px); }
.g-btn[disabled], .g-btn.g-charge { opacity: .55; cursor: not-allowed; }

/* Principal : fond --rose-texte et non --rose, pour que le libelle blanc
   passe le seuil AA. C'est la seule raison de ce choix. */
.g-btn-primaire { background: var(--rose-texte); color: #fff; }
.g-btn-primaire:hover { background: var(--rose-fonce); color: #fff; }

/* Le contour EST le bouton : sans lui rien ne distingue le libelle d'un
   paragraphe. Il lui faut donc les 3:1 du WCAG 1.4.11, pas --trait-fort. */
.g-btn-secondaire {
    background: var(--surface); color: var(--encre);
    border-color: var(--bord-champ);
}
.g-btn-secondaire:hover { background: var(--surface-douce); }

.g-btn-fantome { background: transparent; color: var(--gris); }
.g-btn-fantome:hover { background: var(--surface-douce); color: var(--encre); }

.g-btn-bloc { width: 100%; }

/* Taille reduite, pour la barre de navigation. */
.g-btn-petit { min-height: 42px; padding: 0 18px; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.g-carte {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-grand);
    padding: calc(var(--pas) * 3);
}
.g-carte-relief { box-shadow: var(--ombre); border-color: transparent; }
.g-carte-cliquable { display: block; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.g-carte-cliquable:hover {
    border-color: var(--rose); box-shadow: var(--ombre); text-decoration: none;
}

.g-etiquette {
    display: inline-block;
    padding: 5px 12px;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--r-rond);
    /* --rose-texte sur --rose-clair ne donne que 4,28 : sous le seuil AA pour
       ce corps de 12 px. --rose-fonce remonte a 5,72. */
    background: var(--rose-clair); color: var(--rose-fonce);
}
.g-etiquette-neutre { background: var(--surface-douce); color: var(--encre-douce); }
.g-etiquette-succes { background: var(--succes-clair); color: var(--succes); }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.g-champ { margin-bottom: calc(var(--pas) * 2.5); }

.g-label {
    display: block; margin-bottom: 6px;
    font-size: .9375rem; font-weight: 600; color: var(--encre);
}
.g-aide { margin: 6px 0 0; font-size: .875rem; color: var(--gris); }

.g-saisie {
    width: 100%; min-height: 48px;
    padding: 12px 14px;
    font-family: inherit; font-size: 1rem; color: var(--encre);
    background: var(--surface);
    border: 1px solid var(--bord-champ);
    border-radius: var(--r-moyen);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.g-saisie::placeholder { color: var(--gris); }
.g-saisie:hover { border-color: var(--encre-douce); }
.g-saisie:focus {
    outline: none;
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, .18);
}
/* Le chevron du select est une image SVG encodee dans la feuille : aucun
   fichier a servir, aucun appel reseau, et il reste identique partout. */
select.g-saisie {
    appearance: none; -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
textarea.g-saisie { min-height: 120px; resize: vertical; }

/* Depot de fichier : le controle natif est masque, le label sert de bouton.
   On garde l'input dans le flux pour que le clavier et les lecteurs d'ecran
   le trouvent normalement. */
.g-fichier { position: relative; }
.g-fichier input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.g-fichier-zone {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px dashed var(--bord-champ);
    border-radius: var(--r-moyen);
    background: var(--surface-douce);
    font-size: .9375rem; font-weight: 600; color: var(--encre-douce);
}
.g-fichier input[type="file"]:focus-visible + .g-fichier-zone,
.g-fichier:hover .g-fichier-zone {
    border-color: var(--rose); background: var(--rose-clair); color: var(--rose-texte);
}

/* Cases et boutons radio : la cible de clic est toute la ligne, et le
   libelle a la meme taille que la question. */
.g-choix {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--trait);
    border-radius: var(--r-moyen);
    background: var(--surface);
    cursor: pointer;
    font-size: 1rem; color: var(--encre-douce);
    transition: border-color .15s ease, background-color .15s ease;
}
.g-choix + .g-choix { margin-top: 10px; }
.g-choix:hover { border-color: var(--rose); background: var(--rose-clair); }
.g-choix input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rose-texte); flex: none; }
.g-choix:has(input:checked) { border-color: var(--rose); background: var(--rose-clair); }

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.g-message {
    padding: 12px 16px;
    border-radius: var(--r-moyen);
    border-left: 4px solid;
    font-size: .9375rem; font-weight: 500;
    margin-bottom: calc(var(--pas) * 2);
}
.g-message:empty { display: none; }         /* pas de bandeau vide a l'ecran */
.g-message-erreur { background: var(--erreur-clair); border-color: var(--erreur); color: var(--erreur); }
.g-message-succes { background: var(--succes-clair); border-color: var(--succes); color: var(--succes); }
.g-message-info   { background: var(--alerte-clair); border-color: var(--alerte); color: var(--alerte); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.g-pied {
    border-top: 1px solid var(--trait);
    background: var(--surface);
    padding: calc(var(--pas) * 7) 0 calc(var(--pas) * 4);
    font-size: .875rem; color: var(--gris);
}
.g-pied strong { color: var(--encre-douce); font-weight: 600; }
/* Les mentions legales sont du texte obligatoire : elles se lisent, donc
   --gris (4,83) et non --gris-clair (2,56). */
.g-pied-mentions { font-size: .8125rem; color: var(--gris); margin-top: 4px; }
.g-pied-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.g-pied-liens a { color: var(--gris); }

/* La colonne de marque est deux fois plus large que les colonnes de liens :
   elle porte le logo, la phrase de presentation et l'identification legale,
   les autres ne portent que des libelles courts. */
.g-pied-grille {
    display: grid; grid-template-columns: 1fr; gap: calc(var(--pas) * 4);
}
@media (min-width: 640px) { .g-pied-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .g-pied-grille { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: calc(var(--pas) * 5); } }

.g-pied-marque p { max-width: 30ch; margin: 14px 0 0; }
.g-pied-colonne h3 {
    font-size: .75rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--encre);
    margin: 0 0 calc(var(--pas) * 1.5);
}
.g-pied-colonne ul { list-style: none; margin: 0; padding: 0; }
.g-pied-colonne li + li { margin-top: 10px; }
.g-pied-colonne a { color: var(--gris); font-weight: 500; }
.g-pied-colonne a:hover { color: var(--encre); }

.g-pied-bas {
    margin-top: calc(var(--pas) * 5);
    padding-top: calc(var(--pas) * 3);
    border-top: 1px solid var(--trait);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px 24px;
    font-size: .8125rem;
}
.g-pied-bas p { margin: 0; }
.g-pied-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.g-pied-legal a { color: var(--gris); }

/* --------------------------------------------------------------------------
   Le panneau lateral des pages de compte (connexion, inscription,
   verification). Plus d'image distante : un degrade rose, servi localement,
   qui s'affiche meme sans reseau.
   -------------------------------------------------------------------------- */

.g-panneau {
    /* Le degrade s'arrete a --rose-texte et non a --rose : sur #f43f5e le
       blanc ne donne que 3,67, alors qu'il faut 4,5 pour du texte. Sur
       #e11d48 il donne 4,70, donc TOUT le panneau est lisible, y compris son
       coin le plus clair. */
    background: linear-gradient(150deg, #881337 0%, var(--rose-fonce) 55%, var(--rose-texte) 100%);
    color: #fff;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 48px;
}
.g-panneau h1, .g-panneau h2 { color: #fff; }
/* Blanc plein, sans transparence : a 88 % le texte compose retombe a 3,86. */
.g-panneau p { color: #fff; max-width: 30rem; }
.g-panneau-logo {
    width: 76px; height: 76px; border-radius: var(--r-grand);
    margin-bottom: 20px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
}
.g-panneau-retour {
    position: absolute; top: 26px; left: 26px;
    color: #fff; font-weight: 600; font-size: .875rem;
    display: inline-flex; align-items: center; gap: 8px;
    opacity: .85;
}
.g-panneau-retour:hover { opacity: 1; color: #fff; text-decoration: none; }
/* Voile sombre et non pas voile blanc : un blanc a 18 % eclaircit le fond
   rose et le libelle tombe a 3,88. Le noir a 22 % le fonce et remonte a 7,01. */
.g-panneau .g-etiquette {
    background: rgba(0, 0, 0, .22);
    color: #fff;
    margin-top: 22px;
}

/* Le gabarit deux colonnes lui-meme. Une seule definition pour connexion,
   inscription et verification : c'est ce qui garantit qu'elles restent
   identiques quand l'une des trois evolue. */
.g-compte { display: flex; min-height: 100vh; }
.g-compte-visuel { flex: 1; position: relative; }
.g-compte-form {
    width: 560px; flex: none;
    background: var(--surface);
    display: flex; flex-direction: column; justify-content: center;
    padding: 56px 60px;
}
.g-compte-form > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
.g-compte-titre { margin-bottom: calc(var(--pas) * 3); }
.g-compte-titre h1 { font-size: 1.875rem; margin-bottom: 8px; }
.g-compte-pied {
    margin-top: calc(var(--pas) * 3);
    text-align: center;
    font-size: .9375rem; color: var(--gris);
}
.g-compte-pied a { font-weight: 600; }

/* En dessous de 1000px le panneau devient un bandeau court : on garde le
   repere de marque sans manger la moitie d'un ecran de telephone. */
@media (max-width: 1000px) {
    .g-compte { display: block; }
    .g-compte-visuel { min-height: 0; }
    .g-compte-visuel .g-panneau { padding: 30px 24px 34px; border-radius: 0 0 24px 24px; }
    .g-compte-visuel .g-panneau h1 { font-size: 1.75rem; }
    .g-compte-visuel .g-panneau p { font-size: .9375rem; }
    .g-compte-visuel .g-panneau-logo { width: 56px; height: 56px; margin-bottom: 14px; }
    .g-compte-visuel .g-panneau-retour { position: static; align-self: flex-start; margin-bottom: 16px; }
    .g-compte-form {
        width: 100%; max-width: 520px;
        margin: -18px auto 0;
        padding: 30px 24px 48px;
        border-radius: var(--r-grand);
        position: relative; z-index: 2;
        box-shadow: var(--ombre);
    }
}

/* --------------------------------------------------------------------------
   Le hero, et lui seul. Aucune autre page n'a le droit d'utiliser ces
   classes : c'est ce qui evite que chaque page se mette a inventer sa
   propre grande image d'ouverture.
   -------------------------------------------------------------------------- */

.g-hero {
    position: relative; overflow: hidden;
    padding: calc(var(--pas) * 8) 0 calc(var(--pas) * 9);
    background: var(--surface);
    border-bottom: 1px solid var(--trait);
}
/* Deux halos roses tres dilues, pas une image : aucun fichier a servir,
   rien a charger, et la page reste nette sur un ecran a forte densite. */
.g-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(48rem 26rem at 78% -12%, rgba(244, 63, 94, .13), transparent 62%),
        radial-gradient(34rem 22rem at -8% 108%, rgba(244, 63, 94, .08), transparent 60%);
}
.g-hero > * { position: relative; }

.g-hero-grille {
    display: grid; grid-template-columns: 1fr; gap: calc(var(--pas) * 6);
    align-items: center;
}
@media (min-width: 980px) {
    .g-hero-grille { grid-template-columns: 1.05fr .95fr; gap: calc(var(--pas) * 7); }
}

.g-hero h1 { max-width: 15ch; margin-bottom: calc(var(--pas) * 2.5); }
.g-hero-sous {
    font-size: 1.125rem; color: var(--gris);
    max-width: 46ch; margin-bottom: calc(var(--pas) * 4);
}
.g-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* La ligne de preuves : trois faits verifiables, pas trois adjectifs. */
.g-preuves {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    margin-top: calc(var(--pas) * 4);
    padding-top: calc(var(--pas) * 3);
    border-top: 1px solid var(--trait);
    font-size: .875rem; font-weight: 600; color: var(--encre-douce);
}
.g-preuves { list-style: none; padding-left: 0; }
.g-preuves > span,
.g-preuves > li { display: inline-flex; align-items: center; gap: 8px; }
.g-preuves svg { width: 17px; height: 17px; color: var(--succes); flex: none; }

/* --------------------------------------------------------------------------
   La maquette de telephone du hero. Entierement en CSS : pas de capture
   d'ecran a remplacer a chaque evolution de l'application, et rien qui
   puisse laisser filtrer une donnee reelle d'un compte.
   -------------------------------------------------------------------------- */

.g-tel-cadre { display: flex; justify-content: center; }
.g-tel {
    width: 290px; flex: none;
    background: var(--encre);
    border-radius: 44px;
    padding: 11px;
    box-shadow: var(--ombre-forte);
}
.g-tel-ecran {
    background: var(--fond);
    border-radius: 34px; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 520px;
}
.g-tel-haut {
    background: linear-gradient(150deg, #881337 0%, var(--rose-fonce) 60%, var(--rose-texte) 100%);
    color: #fff; padding: 26px 20px 22px;
}
.g-tel-encoche {
    width: 92px; height: 5px; border-radius: var(--r-rond);
    background: rgba(255, 255, 255, .5); margin: 0 auto 16px;
}
.g-tel-haut .g-tel-salut { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.g-tel-haut .g-tel-role { font-size: .75rem; font-weight: 600; opacity: .88; margin: 2px 0 0; }
.g-tel-corps { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.g-tel-titre {
    font-size: .625rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--gris); margin: 0;
}
.g-tel-carte {
    background: var(--surface); border: 1px solid var(--trait);
    border-radius: var(--r-moyen); padding: 13px 14px;
}
.g-tel-carte h4 { font-size: .875rem; margin: 0 0 3px; color: var(--encre); }
.g-tel-carte p { font-size: .75rem; color: var(--gris); margin: 0; }
.g-tel-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.g-tel-prix { font-size: .9375rem; font-weight: 800; color: var(--rose-texte); white-space: nowrap; }
.g-tel-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-tel-tuile {
    background: var(--surface); border: 1px solid var(--trait);
    border-radius: var(--r-petit); padding: 10px 8px; text-align: center;
}
.g-tel-tuile b,
.g-tel-tuile strong { display: block; font-size: .9375rem; color: var(--encre); letter-spacing: -.02em; }
.g-tel-tuile span { font-size: .5625rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.g-tel-onglets {
    margin-top: auto; display: flex; justify-content: space-around;
    padding: 10px 6px 14px;
    background: var(--surface); border-top: 1px solid var(--trait);
}
.g-tel-onglet { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .5625rem; font-weight: 700; color: var(--gris-clair); }
.g-tel-onglet i { width: 16px; height: 16px; border-radius: 5px; background: currentColor; display: block; opacity: .55; }
.g-tel-onglet.g-actif { color: var(--rose-texte); }
.g-tel-onglet.g-actif i { opacity: 1; }

@media (max-width: 400px) { .g-tel { width: 100%; max-width: 290px; } }

/* --------------------------------------------------------------------------
   Sections de contenu
   -------------------------------------------------------------------------- */

/* L'intitule d'une section : surtitre, titre, phrase. Toujours dans cet
   ordre, toujours avec la meme respiration. */
.g-titre-section { max-width: 46rem; margin: 0 0 calc(var(--pas) * 5); }
.g-titre-section.g-centre { margin-left: auto; margin-right: auto; text-align: center; }
.g-titre-section h2 { margin: calc(var(--pas) * 1.5) 0 calc(var(--pas) * 1.5); }
.g-titre-section p { color: var(--gris); font-size: 1.0625rem; margin: 0; }

/* Les trois etapes. Le trait qui les relie n'apparait qu'a partir du moment
   ou elles sont cote a cote : en colonne il ne relierait rien. */
.g-etapes { display: grid; grid-template-columns: 1fr; gap: calc(var(--pas) * 4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 860px) {
    .g-etapes { grid-template-columns: repeat(3, 1fr); gap: calc(var(--pas) * 5); }
    .g-etape { position: relative; }
    .g-etape:not(:last-child)::after {
        content: ''; position: absolute;
        top: 21px; left: calc(44px + var(--pas) * 1);
        right: calc(var(--pas) * -5 + 8px);
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--trait-fort) 0 6px, transparent 6px 12px);
    }
}
.g-etape-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-rond);
    font-size: 1.0625rem; font-weight: 800; color: #fff;
    background: var(--encre);
    margin-bottom: calc(var(--pas) * 2);
}
.g-etape:first-child .g-etape-numero { background: var(--rose-texte); }
.g-etape:last-child .g-etape-numero { background: var(--succes); }
.g-etape h3 { margin-bottom: 6px; }
.g-etape p { color: var(--gris); margin: 0; }

/* La pastille d'icone des cartes d'argument. */
.g-pastille {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--r-moyen);
    background: var(--rose-clair); color: var(--rose-texte);
    margin-bottom: calc(var(--pas) * 1.5);
}
.g-pastille svg { width: 21px; height: 21px; }
.g-pastille-neutre { background: var(--surface-douce); color: var(--encre-douce); }
.g-pastille-succes { background: var(--succes-clair); color: var(--succes); }

/* Les lignes de la grille tarifaire. Une ligne = une surface = un prix ;
   rien d'autre ne doit s'y glisser. */
.g-tarif-ligne {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 8px 20px;
    padding: 16px 0; border-bottom: 1px solid var(--trait);
}
.g-tarif-ligne:last-child { border-bottom: 0; }
.g-tarif-ligne span { color: var(--encre-douce); }
.g-tarif-ligne strong { color: var(--rose-texte); font-weight: 800; white-space: nowrap; font-size: 1.0625rem; }

/* Le bandeau d'appel a l'action de bas de page. */
.g-bandeau {
    background: linear-gradient(140deg, #881337 0%, var(--rose-fonce) 58%, var(--rose-texte) 100%);
    color: #fff;
    border-radius: var(--r-grand);
    padding: calc(var(--pas) * 6);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: calc(var(--pas) * 3);
}
.g-bandeau h2 { color: #fff; margin: 0 0 8px; }
/* Blanc plein et non transparent : a 85 % le texte compose retombe sous le
   seuil sur le coin clair du degrade. */
.g-bandeau p { color: #fff; margin: 0; max-width: 46ch; }
.g-bandeau .g-btn-primaire { background: #fff; color: var(--rose-fonce); }
.g-bandeau .g-btn-primaire:hover { background: var(--rose-clair); color: var(--rose-fonce); }
.g-bandeau .g-btn-secondaire { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.g-bandeau .g-btn-secondaire:hover { background: rgba(0, 0, 0, .18); color: #fff; }
.g-bandeau-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Foire aux questions : <details> natif, donc depliable au clavier et
   consultable sans JavaScript. Un moteur de recherche lit le contenu meme
   replie.
   -------------------------------------------------------------------------- */

.g-faq { border-top: 1px solid var(--trait); }
.g-faq details { border-bottom: 1px solid var(--trait); }
.g-faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 4px;
    font-size: 1.0625rem; font-weight: 700; color: var(--encre);
    letter-spacing: -.01em;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::marker { content: ''; }
.g-faq summary:hover { color: var(--rose-texte); }
.g-faq summary::after {
    content: ''; flex: none;
    width: 11px; height: 11px;
    border-right: 2.5px solid var(--gris); border-bottom: 2.5px solid var(--gris);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.g-faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.g-faq details[open] summary { color: var(--rose-texte); }
.g-faq-reponse { padding: 0 4px 22px; max-width: 68ch; }
.g-faq-reponse p { color: var(--gris); margin: 0; }
.g-faq-reponse p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Pages de texte long : mentions legales, confidentialite, suppression de
   compte. Une seule classe, pour que les trois se ressemblent.
   -------------------------------------------------------------------------- */

.g-prose { max-width: 72ch; }
.g-prose h2 {
    font-size: 1.375rem;
    margin-top: calc(var(--pas) * 5); margin-bottom: calc(var(--pas) * 1.5);
    padding-top: calc(var(--pas) * 3);
    border-top: 1px solid var(--trait);
}
.g-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.g-prose h3 { margin-top: calc(var(--pas) * 3); margin-bottom: 6px; }
.g-prose p, .g-prose li { color: var(--encre-douce); }
.g-prose ul, .g-prose ol { padding-left: 1.25rem; margin: 0 0 calc(var(--pas) * 2); }
.g-prose li + li { margin-top: 6px; }
.g-prose table { width: 100%; border-collapse: collapse; margin: 0 0 calc(var(--pas) * 2); font-size: .9375rem; }
.g-prose th, .g-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.g-prose th { color: var(--encre); font-weight: 700; background: var(--surface-douce); }
.g-prose dt { font-weight: 700; color: var(--encre); margin-top: calc(var(--pas) * 2); }
.g-prose dd { margin: 4px 0 0; color: var(--encre-douce); }
/* Au-dela de 600px la liste de definitions se lit mieux en deux colonnes :
   le libelle a gauche, la valeur a droite, alignes sur la meme ligne. */
@media (min-width: 600px) {
    .g-prose dl { display: grid; grid-template-columns: 15rem 1fr; }
    .g-prose dt, .g-prose dd {
        margin: 0; padding: 10px 0; border-top: 1px solid var(--trait);
    }
    .g-prose dt { padding-right: 16px; font-weight: 600; color: var(--gris); }
    .g-prose dl > dt:first-of-type, .g-prose dl > dt:first-of-type + dd { border-top: 0; }
}

/* Le fil d'Ariane des pages de texte : ou je suis, comment je remonte. */
.g-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; color: var(--gris); margin-bottom: calc(var(--pas) * 2); }
.g-fil a { color: var(--gris); font-weight: 600; }
.g-fil a:hover { color: var(--encre); }

/* --------------------------------------------------------------------------
   Sans JavaScript
   -------------------------------------------------------------------------- */

.g-noscript {
    background: var(--alerte-clair);
    border-bottom: 1px solid var(--alerte);
    color: var(--alerte);
    padding: 12px 24px;
    text-align: center;
    font-size: .9375rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */

@media print {
    .g-entete, .g-nav, .g-btn { display: none !important; }
    body { background: #fff; color: #000; }
}