/* charte-pages.css — commun aux pages intérieures
   ------------------------------------------------------------------
   Ce que les pages de formule, de contact, de mentions légales et la page 404
   partagent entre elles mais pas avec la page d'accueil : en-tête de page, carte de prix,
   options, liens entre formules. La page d'accueil ne charge PAS ce fichier. */

main{display:block}

/* Un titre lu par les lecteurs d'écran et les moteurs, mais pas affiché.
     La section « Le détail » n'avait aucun titre : la page passait du h1 de
     l'en-tête directement à la carte de prix. Le texte est exactement celui
     du contenu qu'il annonce — il n'y a rien de caché ici qui ne soit pas
     visible juste en dessous. */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.theme-toggle{position:fixed;top:18px;left:18px;z-index:60;font:inherit;font-size:13px;font-weight:700;background:var(--bg-white);color:var(--text-main);border:1px solid var(--border);border-radius:100px;padding:9px 16px;cursor:pointer;transition:background-color .5s ease,color .5s ease,border-color .5s ease;box-shadow:0 2px 10px rgba(0,0,0,.08)}

section{padding:90px 24px;position:relative;transition:background-color .5s ease,background-image .5s ease,color .5s ease}

/* Le retour vers l'accueil est la seule sortie en haut de page : il porte
     donc une taille à lui, plus grande que les autres surtitres, et un
     interlettrage moins serré pour rester lisible à cette taille. */
  a.eyebrow-link{text-decoration:none;display:inline-flex;align-items:center;gap:11px;
    font-size:14.5px;letter-spacing:.13em;margin-bottom:22px;opacity:.94;
    transition:opacity .25s ease}

a.eyebrow-link:hover .arrow{transform:translateX(-5px)}

.page-hero{padding-top:120px;padding-bottom:70px;color:#fff}

.page-hero .eyebrow{color:rgba(255,255,255,.85)}

.page-hero h1{font-size:clamp(32px,5vw,48px);line-height:1.1;color:#fff;max-width:640px}

.page-hero p{font-size:15.5px;color:rgba(255,255,255,.92);max-width:480px;margin-top:16px;line-height:1.6}

/* Pas de petites écritures : cette mention est du texte courant, à la même
     taille que le reste — elle informe, elle ne se cache pas. */
  .note-example{font-size:14.5px;color:var(--note-text);background:var(--note-bg);border-radius:8px;padding:13px 18px;display:inline-block;margin-top:18px;transition:background-color .5s ease,color .5s ease;line-height:1.6}

.price-card{background:var(--bg-white);border:1px solid var(--border);border-top:4px solid var(--amber);border-radius:14px;padding:28px 26px;margin-top:28px}

.price-card .amount{font-family:Fraunces,serif;font-size:38px;color:var(--text-main)}

.price-card .amount small{font-size:15px;font-weight:600;color:var(--text-secondary)}

.price-card ul{margin:16px 0 0;padding-left:20px;font-size:14px;color:var(--text-main);line-height:1.7}

.price-card li{margin-bottom:4px}

/* L'hébergement au nom du client est un argument de vente, pas une clause
     de bas de page : traité en blocs lisibles, à taille de texte courante. */
  .meta-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px}

.meta-row .m{flex:1 1 300px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:12px;
    padding:20px 22px;font-size:14.5px;color:var(--text-main);line-height:1.65;
    transition:background-color .5s ease,border-color .5s ease}

.meta-row .m b{display:block;font-size:17px;color:var(--text-main);font-family:Fraunces,serif;font-weight:500;margin-bottom:7px}

/* --- Le bloc « Convenir d'un rendez-vous » ------------------------------
     C'était un paragraphe suivi d'un bouton : la seule action attendue du
     visiteur avait le même poids visuel qu'une ligne de description. Il est
     devenu une carte en deux colonnes — le texte à gauche, le bouton dans sa
     propre colonne à droite. La forme dit « une action à faire » avant même
     qu'on ait lu, et elle n'ajoute aucune couleur : le trait ambré suffit. */
  .invite{margin-top:28px;background:var(--bg-white);border:1px solid var(--border);
    border-radius:14px;padding:26px 30px;display:flex;gap:34px;align-items:center;flex-wrap:wrap;
    box-shadow:0 4px 18px -8px rgba(42,36,32,.22);
    transition:background-color .5s ease,border-color .5s ease}

body.dark .invite{box-shadow:0 4px 18px -8px rgba(0,0,0,.6)}

.invite .gauche{flex:1 1 340px;min-width:0;position:relative;padding-left:20px}

.invite .gauche::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;
    border-radius:3px;background:var(--amber)}

.invite .sur{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);margin-bottom:7px}

.invite h3{font-family:Fraunces,serif;font-weight:500;font-size:21px;line-height:1.25;
    margin:0 0 8px;color:var(--text-main)}

.invite p{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.6}

.invite .droite{flex:0 0 auto}

.invite .btn{margin-top:0}

@media (max-width:700px){ .invite{gap:20px;padding:22px 24px} }

/* --- La section de contact qui ferme les pages de formule --------------
     Une page de formule se terminait sur les liens vers les deux autres
     formules : le dernier geste proposé au visiteur était de repartir
     comparer. Cette section referme la page sur la seule action qui compte.
     Elle reprend le prune de la page de contact et de la section Contact de
     l'accueil : c'est devenu la couleur de ce moment du parcours, et
     l'identifiant « contact » suffit au menu pour passer en clair au-dessus,
     puisqu'il figure déjà dans sa liste des sections foncées. */
  .fin-contact{background:linear-gradient(165deg,#4b3653 0%,#3a2a43 55%,#2e2335 100%);color:#fff}

body.dark .fin-contact{background:linear-gradient(165deg,#2b2131 0%,#221a28 55%,#1a141e 100%)}

.fin-contact .grid-layer{--grid-line:rgba(246,239,230,.14)}

.fin-contact .eyebrow{color:rgba(246,239,230,.72)}

.fin-contact h2{font-size:28px;color:#f6efe6;max-width:520px}

.fin-contact p{font-size:15px;color:rgba(246,239,230,.86);line-height:1.65;
    max-width:520px;margin:12px 0 0}

.fin-contact .btn{display:inline-block;margin-top:24px;background:var(--amber);
    color:#2e2008;padding:13px 28px;border-radius:100px;font-weight:700;font-size:14.5px;
    text-decoration:none;transition:filter .2s ease}

body.dark .fin-contact .btn{background:#e3b45f;color:#241a0e}

.fin-contact .btn:hover{filter:brightness(1.06)}

.demos{margin-top:28px;padding:22px 24px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:12px;
    transition:background-color .5s ease,border-color .5s ease}

.demos b{display:block;font-size:17px;font-family:Fraunces,serif;font-weight:500;color:var(--text-main);margin-bottom:6px}

.demos p{margin:0;font-size:14.5px;color:var(--text-secondary);line-height:1.6}

.demo-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

.demo-links a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14.5px;font-weight:700;
    color:var(--accent2);background:var(--bg-white);border:1px solid var(--border);border-radius:100px;padding:10px 18px;
    transition:border-color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}

.demo-links a:hover{border-color:var(--accent2);transform:translateY(-2px)}

.demo-links a span{font-size:13px;opacity:.7}

.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}

.opt{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:12px;padding:16px 18px;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease,background-color .5s ease}

.opt:hover{transform:translateY(-4px);border-color:var(--accent3);box-shadow:0 10px 24px rgba(0,0,0,.09)}

.opt .n{font-family:inherit;font-weight:700;font-size:14px;color:var(--text-main);transition:color .25s ease}

.opt:hover .n{color:var(--accent3)}

.opt .p{font-size:13px;color:var(--accent3);font-weight:700;margin:4px 0}

.opt .d{font-size:13.5px;color:var(--text-secondary);line-height:1.5}

@media (prefers-reduced-motion:reduce){ .opt{transition:none} .opt:hover{transform:none} }

/* --- Bloc maintenance : volontairement traité à part des options à la carte,
     pour qu'il se lise comme LE choix principal après la formule, pas comme
     un accessoire parmi sept. --- */
  /* --- Une couleur par section (direction B, retenue le 2026-09-06) -------
     Les quatre fonds allaient de #f5efe4 à #fdf7ec : huit points d'écart sur
     255, autant dire aucun. Chaque section prend maintenant une teinte de la
     charte, dans l'ordre des cartes « Par métier » de l'accueil : ambre,
     terre, crème, mauve.
     En mode sombre les valeurs sont écrites à la main : la palette sombre
     écrase --accent, --accent2 et --accent3 sur une seule couleur, le mauve
     n'y existe plus comme variable. On y alterne donc aussi la clarté, sans
     quoi deux teintes chaudes voisines deviennent indistinguables. */
  :root{--sec-detail:#faeed8; --sec-ensuite:#f7e3d6; --sec-autres:#ebe1ec}

body.dark{--sec-detail:#2b2116; --sec-ensuite:#2e1c15; --sec-autres:#262034}

#detail{background:var(--sec-detail)}

#ensuite{background:var(--sec-ensuite)}

#options{background:var(--bg-white)}

#autres{background:var(--sec-autres)}

.maint-section{transition:background-color .5s ease}

/* Deux options exclusives, présentées côte à côte pour qu'on les compare
     d'un coup d'œil plutôt que de les découvrir l'une après l'autre. */
  .maint-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;align-items:start}

@media (max-width:760px){ .maint-duo{grid-template-columns:1fr} }

/* Le bloc « à l'acte » du 2026-09-12 : une carte .maint hors de la grille,
     donc pleine largeur, posée avant les deux abonnements. Elle hérite du
     fond, de la bordure et du survol de .maint ; son texte garde une mesure
     lisible parce qu'elle, elle est large. C'est la voie sans abonnement :
     elle est au même poids visuel que les cartes, jamais en note de bas de
     bloc. */
  .maint.acte{margin-top:16px}

.maint.acte .lead{max-width:62ch}

.maint{position:relative;background:var(--bg-white);border:1px solid var(--border);border-radius:14px;
    padding:26px 26px 22px;height:100%;
    transition:background-color .5s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}

/* Survol : les deux encadrés sont un choix à faire, le survol doit donc les
     désigner comme tels. Même geste que les cartes de formule de l'accueil —
     léger soulèvement et liseré coloré — sans aller jusqu'à la lueur, qui est
     réservée aux cartes cliquables. */
  .maint:hover{transform:translateY(-4px);border-color:var(--accent3);
    box-shadow:0 14px 34px rgba(42,36,32,.10)}

body.dark .maint:hover{box-shadow:0 14px 34px rgba(0,0,0,.55)}

@media (prefers-reduced-motion:reduce){ .maint{transition:none} .maint:hover{transform:none} }

.maint .qui{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    color:var(--accent3);margin-bottom:10px}

.duo-note{font-size:14.5px;color:var(--text-secondary);line-height:1.65;margin-top:20px;max-width:640px}

.maint h3{font-family:Fraunces,serif;font-weight:500;font-size:21px;color:var(--text-main);margin:0}

.maint .amount{font-family:Fraunces,serif;font-size:30px;color:var(--text-main);margin:8px 0 2px}

.maint .amount small{font-size:15px;font-weight:600;color:var(--text-secondary);font-family:Manrope,sans-serif}

.maint .lead{font-size:14.5px;color:var(--text-secondary);line-height:1.65;margin:12px 0 0}

.maint ul{list-style:none;padding:0;margin:18px 0 0}

.maint li{position:relative;padding-left:26px;font-size:14.5px;color:var(--text-main);line-height:1.65;margin-bottom:9px}

.maint li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent3);font-weight:800}

.maint .free{font-size:14px;color:var(--text-secondary);margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}

.cross-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}

.cross-links a{text-decoration:none;font-size:13.5px;font-weight:700;color:var(--accent2);border:1px solid var(--border);border-radius:100px;padding:8px 16px;transition:background-color .3s ease,color .3s ease}

.cross-links a:hover{background:var(--bg-card)}

.cross-links a.current{background:var(--accent2);color:#fff;border-color:var(--accent2)}

/* --- L'appel à l'action ------------------------------------------------
     Le bouton héritait de --btn-bg, une variable pensée pour un bouton posé
     SUR le dégradé du hero : blanc. Descendu sur une section crème, l'écart
     tombait à 3 % ; et en mode sombre --btn-bg valait #12100d, c'est-à-dire
     exactement la couleur de la page — le bouton n'avait plus aucun fond.
     L'ambre est désormais la seule couleur du site qui veut dire « cliquez
     ici », et elle ne sert à rien d'autre. */
  .btn{display:inline-block;margin-top:28px;background:var(--amber);color:#2e2008;padding:13px 28px;border-radius:100px;font-weight:700;font-size:14px;text-decoration:none;transition:background-color .5s ease,color .5s ease,filter .2s ease}

body.dark .btn{background:#e3b45f;color:#241a0e}

.btn:hover{filter:brightness(1.06)}

/* --- Même langage visuel que la page d'accueil ------------------------- */
  /* Un seul dégradé fixé derrière toute la page ; l'en-tête est une fenêtre
     ouverte dessus, et chaque section suivante est un intercalaire opaque qui
     glisse par-dessus. Les sections sont déjà en position:relative, donc
     l'ordre du document suffit à les empiler : aucun z-index n'est nécessaire. */
  html{background:var(--bg-page);transition:background-color .5s ease}

/* La classe de thème vit sur <body>. La variable que « body.dark » redéfinit
     ne remonte donc jamais jusqu'à <html>, et le fond de la toile restait
     crème en mode sombre. On ne le voit pas tant que quelque chose le
     recouvre — mais Safari le peint dans le rebond élastique, au-dessus et
     au-dessous du document : un éclair clair sur une page noire.
     Corrigé ici plutôt qu'en déplaçant la classe sur <html>, que des dizaines
     de sélecteurs lisent sur <body>. Un navigateur sans « :has » retombe sur
     le comportement d'avant, donc sans régression. */
  html:has(body.dark){background:#12100d}

body.dark::before{background:linear-gradient(160deg,#4a3416 0%,#452414 35%,#3a201a 65%,#2b2233 100%)}

/* le fond par défaut d'une section est écrit à faible poids, pour que le
     fond teinté de la section maintenance et celui, en ligne, de la section
     options continuent de passer devant. */
  section{background:var(--bg-page)}

.page-hero{background:transparent;padding-bottom:110px}

section:not(.page-hero),footer{
    border-radius:40px 40px 0 0;
    margin-top:-40px;
    box-shadow:0 -18px 44px -20px rgba(42,36,32,.42);
  }

section:not(.page-hero){padding-top:128px}

/* --- La page ne peut pas être plus courte que l'écran ------------------
     Sur un grand écran, une page courte (contact, mentions légales) laissait
     réapparaître le dégradé fixe sous le pied de page : le fond de la page
     s'arrêtait avec le contenu. La dernière section s'étire donc jusqu'en bas,
     et le pied de page reste collé au bas de la fenêtre. */
  body{min-height:100vh;display:flex;flex-direction:column}

/* <main> a été posé entre <body> et les sections pour le repère sémantique.
     Il a du même coup cassé cette règle : la dernière section n'était plus un
     enfant direct du corps, donc plus l'élément qui s'étire, et sur un écran
     de 2560 px le dégradé fixe réapparaissait sous le pied de page. C'est
     désormais <main> qui grandit, et qui transmet à sa dernière section. */
  main{display:flex;flex-direction:column;flex:1 0 auto}

section:last-of-type{flex:1 0 auto}

footer{flex:0 0 auto}

/* Le socle. Sur iPhone, arrivé en bas de page, Safari rétracte sa barre
     d'adresse : la fenêtre visible grandit alors que le document, lui, ne peut
     plus défiler. Il reste une bande de fenêtre sous le dernier pixel du
     document, et le dégradé — qui est FIXE — continue d'y peindre.
     Le socle est fixe lui aussi : c'est la condition pour être peint dans
     cette zone, une ombre portée ou un bloc du flux normal n'y apparaissent
     pas. Son bas est collé au bas de la FENÊTRE, son haut au bas du PIED DE
     PAGE — c'est le script qui pose ce haut, à chaque défilement. Il n'a donc
     aucune hauteur propre : quand la barre du navigateur se rétracte, la
     fenêtre grandit et le socle grandit avec elle, sans que rien n'ait à être
     recalculé. C'est ce qui supprime le décalage qu'une hauteur mesurée
     laissait voir. Tant que le pied de page touche le bas de la fenêtre, le
     haut passe sous le bas et la hauteur tombe à zéro d'elle-même.
     Il est derrière tout le contenu : au-dessus de la ligne où il commence,
     c'est le pied de page opaque qui le recouvre. */
  .socle{position:fixed;left:0;right:0;bottom:0;
    background:var(--bg-page);z-index:-1;pointer-events:none;
    transition:background-color .5s ease}

footer{padding-top:44px;position:relative}

body.dark section:not(.page-hero),body.dark footer{
    box-shadow:0 -18px 44px -20px rgba(0,0,0,.75);
    border-top:1px solid rgba(255,255,255,.06);
  }

@media (max-width:700px){
    section:not(.page-hero),footer{border-radius:26px 26px 0 0;margin-top:-26px}
  }

/* --- Le quadrillage révélé au survol ----------------------------------- */
  :root{ --grid-line:rgba(42,36,32,.16) }

.grid-layer{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
    background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                     linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,30%),black 0%,transparent 75%);
    mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,30%),black 0%,transparent 75%)}

/* sur l'en-tête, qui est une fenêtre sur le dégradé, des lignes claires */
  .page-hero .grid-layer{--grid-line:rgba(255,255,255,.18)}

/* --- Bascule clair / sombre : une courte fondue ------------------------ */
  body.theme-anim,body.theme-anim *{
    transition:background-color .35s ease, background-image .35s ease,
               color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
  }

@media (prefers-reduced-motion:reduce){
    body.theme-anim,body.theme-anim *{transition:none !important}
  }