/* Pages intérieures : un bandeau lagon en tête (en-tête et titre sur l'eau), le contenu sur
   papier uni, le pied nuit avec la réserve de la bulle. Chargé après assistant.css.
   Décision de Joris du 2 octobre 2026 (brief shape) : l'alternance de l'accueil, coupure nette
   entre le lagon et le papier, bulle en mode rond sur les six pages. */

body.page-mgf { background: var(--papier); color: var(--encre); }

/* ---------- Bandeau lagon ---------- */
.bandeau-mgf {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; align-content: start;
  /* Plein écran, comme chaque section de l'accueil : à l'arrivée, la bulle ronde est posée sur la
     réserve basse du bandeau, jamais sur un champ (mesuré le 2 octobre aux cinq formats : avec un
     bandeau à 54svh, elle couvrait le champ « Adresse électronique » ou une rangée). */
  min-height: 100svh;
  padding-bottom: var(--dock-reserve);
  color: rgb(243 238 229 / .86); background: var(--joint);
  --joint-haut: transparent; --joint-bas: transparent;
}
.bandeau-mgf > .fond-mgf { z-index: -1; }
/* Le même fondu en S que les sections de l'accueil : utile seulement quand un bord du bandeau
   touche un autre fond sombre (la 404, lagon vers nuit) ; transparent sinon, coupure nette. */
.bandeau-mgf > .fond-mgf::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --jh: var(--joint-haut, var(--joint)); --jb: var(--joint-bas, var(--joint));
  --hh: var(--joint-h-haut, var(--joint-h)); --hb: var(--joint-h-bas, var(--joint-h));
  background: linear-gradient(180deg,
    var(--jh) 0,
    color-mix(in oklab, var(--jh) 74%, transparent) calc(var(--hh) * .28),
    color-mix(in oklab, var(--jh) 36%, transparent) calc(var(--hh) * .58),
    color-mix(in oklab, var(--jh) 10%, transparent) calc(var(--hh) * .84),
    transparent var(--hh),
    transparent calc(100% - var(--hb)),
    color-mix(in oklab, var(--jb) 10%, transparent) calc(100% - var(--hb) * .84),
    color-mix(in oklab, var(--jb) 36%, transparent) calc(100% - var(--hb) * .58),
    color-mix(in oklab, var(--jb) 74%, transparent) calc(100% - var(--hb) * .28),
    var(--jb) 100%);
}
.bandeau-mgf :focus-visible { outline-color: var(--turquoise-pale); }

/* L'en-tête sur l'eau : logo blanc tel que fourni, liens en papier, bouton en barre de 48 px. */
.en-tete { min-height: 108px; display: flex; align-items: center; gap: 40px; }
.en-tete .brand { display: flex; align-items: center; min-height: 48px; margin-left: -8px; padding: 8px; border-radius: 8px; flex-shrink: 0; }
.en-tete .brand img { height: 42px; width: auto; }
.en-tete .desktop-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.en-tete .desktop-nav a { display: flex; align-items: center; min-height: 48px; font-size: .9375rem; color: rgb(243 238 229 / .86); text-decoration: none; }
.en-tete .desktop-nav a:hover, .en-tete .desktop-nav a[aria-current=page] { color: var(--papier); text-decoration: underline; text-underline-offset: 7px; }
.bandeau-mgf .button.secondary { color: var(--papier); background: rgb(243 238 229 / .06); border-color: rgb(243 238 229 / .32); }
.bandeau-mgf .button.secondary:hover, .bandeau-mgf .button.secondary:focus-visible { color: var(--encre); background: var(--papier); border-color: var(--papier); }
.bandeau-mgf .button.primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 16px 36px -18px rgb(20 184 166 / .8); }
.bandeau-mgf .button.primary:hover, .bandeau-mgf .button.primary:focus-visible { color: var(--encre); background: var(--papier); border-color: var(--papier); }
.en-tete .menu-toggle { margin-left: auto; }

/* La tête de page : titre en papier, chapô à .86, posés en bas du bandeau. */
.bandeau-tete { align-self: end; display: grid; gap: clamp(10px, 1.6vh, 18px); padding-top: clamp(40px, 7vh, 88px); }
.bandeau-tete h1 { margin: 0; max-width: 16ch; font: 600 clamp(2.25rem, min(4.4vw, 7vh), 3.75rem)/1.05 var(--font-titre); letter-spacing: -.03em; color: var(--papier); text-wrap: balance; }
.bandeau-tete .lead { margin: 0; max-width: 42rem; font-size: clamp(1.0625rem, min(1.4vw, 2.3vh), 1.25rem); line-height: 1.5; color: rgb(243 238 229 / .86); }
.bandeau-tete .hour { color: var(--turquoise-pale); }

/* Le bandeau plein écran de la 404 : l'en-tête (audit F-43), puis l'heure, la phrase, le bouton. */
.bandeau-plein { grid-template-rows: auto 1fr; align-content: stretch; }
.bandeau-plein .bandeau-tete { align-self: center; padding-block: clamp(48px, 10vh, 120px); }
.bandeau-plein h1 { max-width: 14ch; font-size: clamp(2.5rem, min(5.6vw, 9vh), 5.25rem); letter-spacing: -.04em; }
.bandeau-plein .button { justify-self: start; margin-top: clamp(8px, 2vh, 20px); }
/* Lagon vers nuit : la couture prend la teinte de jointure, le pied la reçoit par son bord haut. */
/* Mesuré le 2 octobre à 1440×900 : avec la jointure par défaut, la luminance passait de 56 (bas du
   lagon) à 22 (couture) puis 55 (lueur du pied) : une bande sombre. La couture prend la teinte
   de comptable vers forfaits, et la grande tache basse du lagon remonte pour que le bas du bandeau
   ne soit pas plus clair que sa couture. */
.bandeau-plein { --joint-bas: oklch(25% .054 200); --joint-h-bas: clamp(130px, 22vh, 220px); }
.bandeau-plein > .fond-mgf > i:nth-child(3) { --y: 78%; --o: .6; }
.bandeau-plein > .fond-mgf > i:nth-child(2) { --o: .22; }
.not-found .pied-mgf { --joint-haut: oklch(25% .054 200); --joint-h-haut: clamp(130px, 22vh, 220px); }

/* ---------- Contenu sur papier ---------- */
.page-contenu { padding-block: clamp(48px, 7vh, 88px) var(--dock-reserve); color: rgb(28 25 21 / .8); }
.page-contenu h2 { margin: 0 0 16px; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; color: var(--encre); }
.page-contenu label { color: var(--encre); }
.page-contenu .section { padding-block: clamp(40px, 6vh, 64px); border-top: 1px solid var(--pierre-claire); }
.page-contenu .section:first-child { padding-top: 0; border-top: 0; }
.page-contenu .section:last-child { padding-bottom: 0; }
.page-contenu .button.primary { color: var(--papier); background: var(--turquoise-profond); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 16px 34px -18px rgb(11 110 99 / .9); }
.page-contenu .button.primary:hover, .page-contenu .button.primary:focus-visible { color: var(--papier); background: var(--encre); border-color: var(--encre); }
.page-contenu .button:disabled { color: var(--pierre); background: var(--papier-ombre); border-color: var(--pierre-claire); box-shadow: none; }
.page-contenu .error-summary { border-radius: 10px; }
/* Audit F-32 : le résumé liste chaque champ à corriger, en lien vers lui. */
.page-contenu .error-summary p { margin: 0 0 8px; font-weight: 700; }
.page-contenu .error-summary ul { margin: 0; padding-left: 1.25em; }
.page-contenu .error-summary li + li { margin-top: 4px; }
.page-contenu .error-summary a { color: var(--encre); font-weight: 700; text-decoration: underline; }
.form-intro + .section { padding-top: 0; border-top: 0; }
/* Un message d'erreur reste du texte, en gras, collé à son aide : jamais la couleur seule (PRODUCT.md). */
.page-contenu .field-help { margin-bottom: 0; }
.page-contenu .field-error { margin: 6px 0 0; font-weight: 700; color: var(--encre); }
/* Lien fléché en ligne : la flèche suit le dernier mot, même quand le texte passe à la ligne. */
.page-contenu .text-link { display: inline; min-height: 0; gap: 0; color: var(--turquoise-profond); font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; }
.page-contenu .text-link svg { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; transition: transform 250ms var(--ease-out); }
@media (hover: hover) { .page-contenu .text-link:hover svg { transform: translateX(3px); } }

/* Deux colonnes : la lecture ou le formulaire à gauche, l'aparté en verre clair à droite. */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, var(--mesure)) minmax(17rem, 24rem); justify-content: space-between; gap: clamp(40px, 6vw, 112px); align-items: start; }
.aparte { position: sticky; top: 24px; display: grid; gap: 8px; padding: clamp(22px, 3vh, 32px) clamp(22px, 2vw, 32px); }
.aparte h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.12; }
.aparte > p { margin: 0; max-width: none; font-size: 1rem; }
.aparte .note { margin-top: 12px; padding-top: 16px; border-top: 1px solid rgb(28 25 21 / .12); font-size: .9375rem; line-height: 1.45; }
.aparte .button { width: 100%; margin-top: 10px; }
.aparte .cta-note { margin-top: 10px; max-width: none; font-size: .9375rem; line-height: 1.45; color: rgb(28 25 21 / .66); }
/* Le bloc qui suit l'aparté s'aligne sur le texte de la carte, pas sur son bord. */
.aparte + .aparte, .aparte-suite { margin-top: 28px; }
.aparte-suite { padding-inline: clamp(22px, 2vw, 32px); }
.aparte-suite h2 { font-size: clamp(1.5rem, 2vw, 1.875rem); }
.etapes { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: etape; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 1rem; line-height: 1.5; }
.etapes li::before { content: counter(etape, decimal-leading-zero); font: 600 1.375rem/1 var(--font-titre); color: var(--turquoise-profond); font-variant-numeric: tabular-nums; }

/* Rangées libellé et valeur (mentions, rappel de la demande). */
.rangees { margin: 0; max-width: var(--mesure); }
.rangees > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding-block: 18px; border-top: 1px solid var(--pierre-claire); }
.rangees > div:last-child { border-bottom: 1px solid var(--pierre-claire); }
.rangees dt { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--encre); }
.rangees dd { margin: 0; max-width: none; }

/* Le formulaire : un seul chemin, les notes en pierre, le compteur aligné sur le champ. */
.form-intro { margin-bottom: 24px; }
.form-fin { display: grid; gap: 16px; justify-items: start; margin-top: 8px; }
.form-fin .form-note, .form-fin .demo-note { margin: 0; }

/* ---------- Menu mobile sur le lagon ---------- */
.mobile-menu { isolation: isolate; color: var(--papier); background: var(--joint); }
.mobile-menu > .fond-mgf { z-index: -1; }
.mobile-menu .brand img { height: 42px; width: auto; }
.mobile-menu nav a { color: var(--papier); }
.mobile-menu nav a:hover, .mobile-menu nav a[aria-current=page] { text-decoration: underline; text-underline-offset: 8px; }
.mobile-menu .button.secondary { color: var(--papier); background: rgb(243 238 229 / .06); border-color: rgb(243 238 229 / .32); }
.mobile-menu .button.secondary:hover, .mobile-menu .button.secondary:focus-visible { color: var(--encre); background: var(--papier); border-color: var(--papier); }
.mobile-menu :focus-visible { outline-color: var(--turquoise-pale); }

/* Menu ouvert : la bulle (z-index 60) passerait devant le panneau ; elle s'efface. */
body.menu-open .dock { visibility: hidden; }

/* La bulle naît cachée, puis passe en rond quand assistant.js lit la section : cachée, elle a déjà la
   géométrie du rond, sinon sa largeur s'anime de la barre au rond en apparaissant (décalage de mise
   en page de 0,012 mesuré le 2 octobre 2026 sur demande.html). */
.page-mgf .dock[data-mode="cache"] .bulle { width: 64px; padding-right: 0; padding-left: 64px; border-radius: 50%; }
@media (max-width: 640px) { .page-mgf .dock[data-mode="cache"] .bulle { width: 60px; padding-left: 60px; } }

/* ---------- Le pied retrouve la réserve de la bulle ---------- */
.page-mgf .pied-mgf.pied-page { padding-bottom: var(--dock-reserve); }

/* ---------- Formats ---------- */
@media (max-width: 1000px) {
  .en-tete { min-height: 88px; }
  .en-tete .desktop-nav { display: none; }
  .deux-colonnes { grid-template-columns: minmax(0, var(--mesure)) minmax(16rem, 20rem); gap: clamp(32px, 5vw, 64px); }
}
@media (max-width: 760px) {
  .bandeau-tete { padding-top: clamp(32px, 6vh, 56px); }
  .bandeau-tete h1 { font-size: clamp(2.125rem, 8vw, 3rem); }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .aparte { position: static; }
  .page-contenu { padding-top: clamp(40px, 6vh, 56px); }
  .rangees > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 14px; }
  .form-fin { justify-items: stretch; }
}
@media (max-width: 480px) {
  .en-tete { min-height: 80px; }
  .en-tete .brand img, .mobile-menu .brand img { height: 34px; }
  .bandeau-plein h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .bandeau-plein .button { justify-self: stretch; }
}

/* ---------- Rendez-vous en visio ----------
   L'agenda de rendez-vous Google de Tracy (iframe, apparence Google), dans la colonne « En visio avec
   Tracy » de la page contact depuis le 2 octobre 2026 (décision de Joris : plus de page à part). */
/* L'agenda : le forfait venu d'une carte, le module Google tel quel dans un filet de champ, la ligne
   de secours, la mention sur les données. */
.rdv {
  display: grid; gap: clamp(12px, 2vh, 18px); justify-items: stretch;
  /* Hauteur du module Google : il fait 600 à 700 px ; plus bas, il défile dans son cadre. */
  --rdv-h: clamp(600px, calc(100svh - 240px), 720px);
}
.rdv > p { margin: 0; max-width: none; }
.rdv-forfait { color: var(--turquoise-profond); font-size: .9375rem; line-height: 1.45; font-weight: 700; }
.rdv-module { overflow: hidden; border: 1px solid var(--pierre-claire); border-radius: 10px; background: #fff; }
.rdv-module iframe { display: block; width: 100%; height: var(--rdv-h); border: 0; }
.rdv-secours, .rdv-donnees { font-size: .875rem; line-height: 1.45; }
.rdv-secours { color: rgb(28 25 21 / .8); }
.rdv-donnees { color: var(--pierre); }
.rdv .text-link { font-weight: 700; }

/* Le repli (2 octobre 2026 : la page ne doit plus se lire en panne). Sans adresse, l'emplacement de
   l'agenda garde sa taille et dit ce qui viendra ; avec une adresse mais sans JavaScript, le bouton
   vers l'agenda le remplace. Dessous, une seule ligne pour écrire plutôt que réserver. */
.rdv-repli { display: grid; gap: clamp(12px, 2vh, 18px); justify-items: start; }
.rdv-repli[hidden] { display: none; }
.rdv-repli > p { margin: 0; max-width: 34rem; }
.rdv-emplacement {
  justify-self: stretch; display: grid; place-items: center; min-height: var(--rdv-h);
  padding: 24px; border: 1px dashed var(--pierre-claire); border-radius: 10px; background: rgb(255 255 255 / .45);
  text-align: center;
}
.rdv-emplacement .demo-note { margin: 0; max-width: 28rem; }
.rdv-repli:has(.rdv-page[href^="https://"]) .rdv-emplacement { display: none; }
.rdv-page svg { flex: none; width: 18px; height: 18px; transition: transform 250ms var(--ease-out); }
@media (hover: hover) { .rdv-page:hover svg { transform: translateX(3px); } }
.rdv-page:not([href^="https://"]) { display: none; }
.rdv-repli .demo-note { margin: 0; font-size: .875rem; line-height: 1.45; }

/* La page qui suit la réservation (rendez-vous-confirmation.html) : « rendez-vous » ne se coupe pas au
   trait d'union, et l'engagement se détache de la liste des étapes. */
.confirmation-page .insecable { white-space: nowrap; }
.confirmation-page .etapes + p { margin-top: clamp(20px, 3vh, 28px); }

/* Contact : deux façons de joindre MGF, côte à côte (décision de Joris du 2 octobre 2026). Le bandeau
   se réduit à l'en-tête, au titre et à la ligne vers l'inscription. Sur le papier, deux colonnes de
   même départ, séparées par un filet : l'écrit, court, dans la plus étroite ; la visio et son agenda
   dans la plus large. Sous 1000 px, elles s'empilent, l'écrit d'abord, et deux ancres les annoncent.
   La bulle de Marko se range au-dessus des deux (data-bulle-mode="cache") : ni champ ni agenda dessous. */
.bandeau-court { min-height: 0; padding-bottom: clamp(36px, 6vh, 64px); }
.bandeau-court .bandeau-tete { padding-top: clamp(28px, 6vh, 72px); }
.bandeau-autre { margin: 0; font-size: .9375rem; line-height: 1.45; color: rgb(243 238 229 / .86); }
.bandeau-autre a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--turquoise-pale); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgb(143 239 225 / .5); }
.bandeau-autre svg { flex: none; width: 16px; height: 16px; transition: transform 250ms var(--ease-out); }
@media (hover: hover) { .bandeau-autre a:hover { text-decoration-color: currentColor; } .bandeau-autre a:hover svg { transform: translateX(3px); } }

.contact-voies .canvas { display: grid; gap: clamp(16px, 3vh, 28px); }
.contact-ancres { display: none; }
.contact-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.contact-voie { display: grid; gap: clamp(10px, 1.6vh, 16px); align-content: start; scroll-margin-top: 24px; }
.voie-ecrit { padding-right: clamp(32px, 4.5vw, 72px); }
.voie-visio { padding-left: clamp(32px, 4.5vw, 72px); border-left: 1px solid var(--pierre-claire); }
.contact-voie h2 { margin: 0; font: 600 clamp(1.75rem, min(2.6vw, 4.4vh), 2.375rem)/1.1 var(--font-titre); letter-spacing: -.025em; color: var(--encre); text-wrap: balance; }
.voie-chapeau { margin: 0; max-width: 36rem; font-size: 1.0625rem; line-height: 1.5; color: rgb(28 25 21 / .8); }
.contact-voie form, .contact-voie .rdv { margin-top: clamp(8px, 1.6vh, 16px); }
.voie-ecrit form { max-width: 34rem; }
.voie-ecrit .form-note { margin: 12px 0 0; font-size: .9375rem; line-height: 1.45; color: rgb(28 25 21 / .7); }
.voie-ecrit .form-note .text-link { font-weight: 700; }

@media (max-width: 1000px) {
  .contact-ancres { display: flex; flex-wrap: wrap; gap: 0 28px; }
  .contact-ancres a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--encre); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--turquoise-profond); }
  .contact-grille { grid-template-columns: minmax(0, 1fr); }
  .voie-ecrit { padding-right: 0; }
  .voie-visio { margin-top: clamp(48px, 8vh, 72px); padding: clamp(40px, 6vh, 56px) 0 0; border-left: 0; border-top: 1px solid var(--pierre-claire); }
  .contact-voies .rdv { max-width: 44rem; --rdv-h: clamp(560px, 82svh, 720px); }
}