/* =========================================================================
   ARTIS VALORISATION, REFONTE : LA PAGE D'OFFRE SUR DEVIS (offre-sur-devis.css)
   Adresse definitive : /evaluation-sur-mesure. Apres offre.css.
   Installee le 30/09/2026 depuis l'essai g-offre-devis.css, sans changement
   de regle ; les noms de fichiers cites dans les commentaires suivent.
   Reference du systeme : REFONTE-GABARIT.md.
   ------------------------------------------------------------------------- */

/* =========================================================================
   ESSAI G. PAGE D'OFFRE SUR DEVIS (_essai-offre-sur-devis.html)
   Se charge apres socle.css et scene.css (jetons --f-*, --g-*, classes f-, f2-, f3-),
   rapport-vitrine.css (le rapport interactif) et offre.css (en-tete,
   plaque du prix, bulle de la mission, lecteur d'extraits, onglets, barre
   au telephone : communs aux trois pages d'offre). Tout ce qui suit est
   prefixe gd- ; aucune regle d'ici ne sort de cette page.

   Les roles, comme a l'accueil en verre :
   - la scene (verre, texte blanc) : en-tete, mission, deroulement, rapport,
     appel final ;
   - les cartes blanches (navy sur blanc) : ce que comprend la mission, les
     sept situations, les onglets de « Ce qu'il faut savoir » ;
   - le papier d'Artis (clarte du 30/09/2026, socle.css et scene.css) : situations,
     questions ; plus aucune bande sombre sur cette page ;
   - la bande claire (papier #F1F2F6, celle du schema de l'accueil G) :
     « Ce qu'il faut savoir ».
   Mobile d'abord pour les mesures critiques : 16 px de texte au moins
   (etiquettes en capitales exceptees, 12 px), cibles de 44 px.
   ------------------------------------------------------------------------- */

.gd-page{
  --gd-papier: #F1F2F6;
  --gd-encre: #03021B;          /* texte sur le papier : 19,4:1 */
  --gd-encre-2: #474C5E;        /* texte second sur le papier : 7,6:1, sur blanc 8,5:1 */
  --gd-encre-3: #5A5F70;        /* etiquettes sur blanc : 6,2:1 */
  --gd-filet: rgba(3,2,27,.10);
  --gd-teinte: #E6EBF7;         /* fond de la chute, texte navy 15:1 */
  --gd-texte-blanc: #26324a;    /* corps sur carte blanche : 12,4:1 */
  --gd-courbe: cubic-bezier(.23, 1, .32, 1);
  --gd-entre: 96px;             /* d'une section de scene a la suivante */
}
@media (min-width: 761px){ .gd-page{ --gd-entre: 160px; } }
/* Audit telephone du 8 octobre (09/10/2026, lot 2, vides) : 56 px au
   telephone (96 avant) entre les situations, le deroulement, le rapport
   et la bande « Ce qu'il faut savoir ». */
@media (max-width: 760px){ .gd-page{ --gd-entre: 56px; } }

/* =========================================================================
   1. EN-TETE ET MISSION : offre.css (go-tete, go-plaque, go-bulle)
   ------------------------------------------------------------------------- */
#mission, #situations, #deroulement, #rapport, #savoir, #faq{ scroll-margin-top:100px; }

/* =========================================================================
   2. LES SITUATIONS : sept cartes blanches sur la bande opaque
   Telephone : une colonne. Tablette : deux. Ordinateur : trois. Les cartes
   d'une meme rangee ont la meme hauteur, et « Ce qu'il ne fait pas » se
   pose en bas de carte ; la septieme carte tient la largeur, en trois
   colonnes a l'ordinateur.
   ------------------------------------------------------------------------- */
.gd-bande-corps{ padding-top:var(--f-tete-bande); }
.gd-situations{ padding-bottom:var(--f-bande-haut); }
.gd-situations-chapo{ max-width:760px; }
/* L'orientation vers les forfaits, pour un dossier de 3 M€ ou moins. */
.gd-situations-forfaits{
  max-width:760px; margin:16px auto 0; font-size:16px; line-height:1.5; color:var(--f-encre-2); text-wrap:pretty;
}
.gd-situations-forfaits a{ color:var(--g-klein); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
@media (hover:hover){ .gd-situations-forfaits a:hover{ text-decoration-thickness:2px; } }

.gd-cas-grille{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.gd-cas{
  display:flex; flex-direction:column; gap:16px; min-width:0;
  padding:24px 20px; border-radius:16px; background:var(--f-blanc); color:var(--g-encre);
  box-shadow:var(--f-ombre-douce), inset 0 0 0 1px var(--f-filet-encre);
  letter-spacing:-0.01em;
}
.gd-cas-titre{ margin:0; font-size:22px; line-height:1.2; font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); text-wrap:balance; }
.gd-cas-bloc{ display:grid; gap:6px; }
.gd-cas-lib{
  margin:0; font-size:12px; line-height:1.3; font-weight:500; letter-spacing:var(--f-espace-etiquette);
  text-transform:uppercase; color:var(--g-klein);
}
.gd-cas-texte{ margin:0; font-size:16px; line-height:1.5; color:var(--gd-texte-blanc); text-wrap:pretty; }
.gd-cas-bloc--limite{ margin-top:auto; padding-top:16px; border-top:1px solid var(--g-trait); }
.gd-cas-bloc--limite .gd-cas-lib{ color:var(--gd-encre-3); }

@media (min-width: 761px){
  .gd-cas-grille{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
  .gd-cas{ padding:28px; gap:18px; }
  .gd-cas-titre{ font-size:24px; }
  .gd-cas--large{ grid-column:1 / -1; }
}
/* Meme audit, telephone : la bande des situations s'ouvre a 56 px sous
   la bande marine de la mission, et non a 100 + 20, et se ferme a 64 px
   au lieu de 100. Les cartes se resserrent, sans rien perdre. */
@media (max-width: 760px){
  .gd-situations.f-bande{ padding:56px 0 64px; }
  .gd-situations .gd-bande-corps{ padding-top:0; }
  /* les six cartes : 12 px entre elles et entre leurs blocs, 20 px de
     marge interieure (16, 16 et 24 x 20 avant) */
  .gd-cas-grille{ gap:12px; }
  .gd-cas{ gap:12px; padding:20px; }
}
@media (min-width: 1100px){
  .gd-cas-grille{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
  .gd-cas{ padding:32px; }
  .gd-cas--large{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:24px; align-items:start;
  }
  .gd-cas--large .gd-cas-bloc--limite{ margin-top:0; padding-top:0; border-top:0; padding-left:24px; border-left:1px solid var(--g-trait); }
}

/* =========================================================================
   3. LE DEROULEMENT : les cartes f2-etape de l'accueil, en liste ordonnee
   ------------------------------------------------------------------------- */
.gd-deroulement{ margin-top:var(--gd-entre); }

/* =========================================================================
   4. LE RAPPORT : le panneau de verre et le composant g-rapport a six extraits
   ------------------------------------------------------------------------- */
.gd-rapport{ margin-top:var(--gd-entre); padding-bottom:var(--gd-entre); }  /* l'espace avant la bande claire, que laissait la section des retours (retiree le 30/09/2026) */
.gd-rapport-entete{ margin-bottom:0; }
.gd-rapport-entete .f-titre-section{ max-width:600px; }
.gd-rapport-entete .f-boutons .f-bouton{ flex:0 1 auto; }
@media (max-width: 760px){
  .gd-rapport-entete{ gap:20px; }
  .gd-rapport-entete .f-boutons .f-bouton{ flex:1 1 100%; }
}
@media (max-width: 1100px) and (min-width: 761px){
  .gd-rapport-entete{ grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
}
/* Les six numeros d'extraits (audit telephone du 8 octobre, 09/10/2026) :
   a 8 px d'ecart (offre.css 4), six cibles de 44 px demandent 304 px, que
   la rangee n'a qu'a partir de 380 px d'ecran. De 370 a 379 px, l'ecart
   revient a 6 px. Sous 370 px, la rangee ne tenait meme pas sans ecart
   (244 px a 320 pour 264) : les numeros se chevauchaient de 2 px et le
   dernier sortait du cadre de 8 px. Ils passent sur deux rangees de
   trois, 8 px entre eux. */
@media (max-width: 379.98px){
  .gd-page .go-rapport .g-rapport-onglets{ column-gap:6px; }
}
@media (max-width: 369.98px){
  .gd-page .go-rapport .g-rapport-onglets{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
}

/* =========================================================================
   5. CE QU'IL FAUT SAVOIR : la bande claire, cinq onglets
   La classe f-bande dit a la scene qu'elle est couverte ; le fond est
   repeint ici. Sans script : les cinq panneaux a la suite.
   ------------------------------------------------------------------------- */
.gd-savoir.f-bande{
  background:var(--gd-papier); color:var(--gd-encre);
  padding:var(--f-bande-haut) 0 var(--f-bande-haut);
}
.gd-savoir .f-titre-section{ color:var(--gd-encre); }
.gd-savoir{ position:relative; isolation:isolate; }
/* Calque temoin pour socle.js (verre dense de la barre sur le papier),
   transparent : le meme procede que la bande claire de la page 990. */
.gd-page .gd-sous-barre{ position:absolute; inset:0; z-index:-1; padding:0; margin:0; background:transparent; pointer-events:none; }
.gd-savoir-tete{ margin-bottom:32px; }
.gd-savoir :focus-visible{ outline:2px solid var(--g-klein); outline-offset:3px; }

.gd-savoir-panneaux{ display:grid; gap:16px; max-width:1120px; margin-inline:auto; }
.gd-savoir-panneau{
  display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-width:0;
  padding:24px 20px; border-radius:16px; background:var(--f-blanc); color:var(--gd-encre);
  border:1px solid var(--gd-filet); letter-spacing:-0.01em;
}
.gd-savoir-h{ margin:0; font-size:24px; line-height:1.2; font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); text-wrap:balance; }
.gd-savoir-lead{ margin:14px 0 0; font-size:20px; line-height:1.4; color:var(--gd-encre); text-wrap:pretty; }
.gd-savoir-points{ list-style:none; margin:0; padding:0; }
.gd-savoir-points li{
  position:relative; padding:14px 0 14px 22px; border-top:1px solid var(--gd-filet);
  font-size:16px; line-height:1.5; color:var(--gd-encre-2); text-wrap:pretty;
}
.gd-savoir-points li::before{
  content:""; position:absolute; left:1px; top:calc(14px + .75em - 3px); width:6px; height:6px; border-radius:50%; background:var(--g-klein);
}
.gd-savoir-chute{
  margin:16px 0 0; padding:18px 20px; border-left:3px solid var(--g-klein); border-radius:0 10px 10px 0;
  background:var(--gd-teinte); font-size:18px; line-height:1.4; font-weight:var(--f-g-titre); color:var(--gd-encre);
  text-wrap:pretty;
}

/* Meme audit, telephone : la bande s'ouvre et se ferme a 56 px au lieu
   de 100. En accordeon (offre.js, offre.css 5), 8 px entre les rangees,
   le panneau ouvert a 12 px sous son bouton et a 16 px du suivant. */
@media (max-width: 760px){
  .gd-savoir.f-bande{ padding:56px 0; }
  .go-accordeon .gd-savoir-panneaux{ gap:8px; }
  .go-accordeon .gd-savoir-panneaux > .go-acc{ margin-top:0; }
  .go-accordeon .gd-savoir-panneaux > .go-panneau--on{ margin:4px 0 8px; }
}
@media (min-width: 761px){
  .gd-savoir-tete{ margin-bottom:40px; }
  .gd-savoir-panneau{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px; padding:44px 48px; }
  .gd-savoir-h{ font-size:28px; }
  .gd-savoir-lead{ margin-top:20px; font-size:22px; line-height:1.38; }
  .gd-savoir-points li:first-child{ border-top:0; padding-top:4px; }
  .gd-savoir-points li:first-child::before{ top:calc(4px + .75em - 3px); }
  .gd-savoir-chute{ margin-top:20px; font-size:20px; }
}

/* =========================================================================
   6. QUESTIONS ET LECTURES : la bande opaque de F (f3-faq)
   ------------------------------------------------------------------------- */
.gd-faq.f3-faq{ padding-top:var(--f-bande-haut); }
/* « A lire ensuite » : le modele commun (.go-lectures, offre.css). */

/* =========================================================================
   7. MOUVEMENT REDUIT ET IMPRESSION
   ------------------------------------------------------------------------- */
@media print{
  .gd-savoir-panneau{ display:grid !important; }
  .gd-cas{ box-shadow:none !important; border:1px solid #999; }
}

/* =========================================================================
   8. LE RETOUR DE STEPHANE R. DANS L'EN-TETE
   Sans chiffres sous l'accroche, la colonne du texte finissait bien au-dessus
   de la plaque (« Sur devis » sur deux lignes) : le retour se pose a leur
   place, et les deux colonnes finissent ensemble. Retouches 5 (30/09/2026) :
   un essai l'avait sorti sous la grille, comme sur les pages 490 et 990 ;
   la plaque montait, un vide s'ouvrait au-dessus du surtitre et la
   signature passait sous le pli a 1440 x 900. Il revient ici.
   ------------------------------------------------------------------------- */
.gd-tete-temoin.go-temoin{ grid-row:5; margin-top:40px; padding:24px 28px; }
.gd-tete-temoin blockquote p{ font-size:20px; }
@media (max-width: 960px){ .gd-tete-temoin.go-temoin{ order:6; grid-row:auto; } }
@media (max-width: 760px){
  .gd-tete-temoin.go-temoin{ margin-top:32px; padding:20px; }
  .gd-tete-temoin blockquote p{ font-size:18px; }
}

/* =========================================================================
   9. TELEPHONE, SECONDE PASSE (09/10/2026, delegation de Raphael)
   Les six situations en accordeon, a leur place (apres le bloc du devis) :
   la section faisait 4,4 ecrans, et le visiteur qui cherchait la sienne
   traversait les cinq autres. offre.js (section 4) fait du titre de chaque
   carte le bouton qui la deplie (aria-expanded, aria-controls vers ses
   blocs), la premiere ouverte au chargement, chacune independante. Le
   bouton couvre toute la tete de la carte (titre en 22 px, rond du
   chevron a droite, offre.css 9). Les blocs reprennent la marge de
   20 px de la carte. Sans script, ou au-dessus de 760 px, les cartes
   restent deroulees. Les regles portent sur l'ecran seul (screen), comme
   la requete d'offre.js (reprise du meme jour) : imprimee depuis un
   ordinateur, sur A4 ou Letter (boite de 718 a 739 px), la page garde ses
   six situations deroulees, comme avant.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 760px){
  .gd-cas-grille--acc{ gap:8px; }
  .gd-cas-grille--acc .gd-cas{ gap:0; padding:0; }
  .gd-cas-grille--acc .gd-cas-titre .gd-cas-bouton{
    font:inherit; letter-spacing:inherit; color:inherit;
    min-height:64px; padding:16px 14px 16px 20px; border-radius:16px;
    background:none; box-shadow:none;
  }
  .gd-cas-grille--acc .gd-cas-bloc{ margin:0 20px; }
  .gd-cas-grille--acc .gd-cas-bloc:last-child{ margin-bottom:20px; }
  .gd-cas-grille--acc .gd-cas-bloc + .gd-cas-bloc{ margin-top:12px; }
  .gd-cas-grille--acc .gd-cas--ferme .gd-cas-bloc{ display:none; }
}