/* NSOCIETY · DESKTOP (1er oct. 2026, GATE B « filmable »). Chargée seulement à partir de 1200 px (media sur le
   <link>), après les styles de la page : le mobile n'en voit rien. Même DA — éditoriale, brute, crème / noir, vert
   #B9F710, une idée par écran — mais composée pour un écran de laptop : la largeur sert l'idée, la typographie garde
   son impact en capture vidéo, jamais un téléphone posé au milieu. Pas de dashboard. */

/* 1. LE CADRE : 1144 px de contenu au lieu de 820, avec de l'air sur les côtés ; 1304 px sur les grands écrans */
.shell { max-width: 1240px; padding-left: 48px; padding-right: 48px; }

/* 2. L'ACCUEIL : la promesse à gauche, la preuve (la démo) à droite, le formulaire en une ligne dessous */
.intro { padding-top: 56px; }
.intro > .shell:not(.ident) { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 64px; align-items: end; }
.intro > .shell:not(.ident) > * { grid-column: 1; }
.intro h1 { font-size: clamp(64px, 5.8vw, 84px); line-height: .95; margin-bottom: 20px; }
.intro .lede { font-size: 21px; max-width: 30ch; }
.intro > .shell:not(.ident) > .dg { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0 0 6px; max-width: none; padding: 26px 28px 22px; }
/* la démo : la recherche sur toute la largeur, son volume dessous — plus rien de tronqué */
.dg .dg-ligne { grid-template-columns: 1fr; gap: 14px; }
.dg .dg-carte { justify-self: start; min-width: 240px; }
.dg-barre { min-height: 60px; font-size: 19px; }
/* le formulaire ne s'aligne en une ligne que tant qu'il est à l'écran : caché (attribut ou audit lancé), il le reste */
#form-1:not([hidden]) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 16px; align-items: end; }
/* la confirmation de commune s'ouvre SOUS le champ, par-dessus : la ligne ne bouge pas */
#form-1 fieldset { position: relative; }
#form-1 .cp-suite:not([hidden]) { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; background: var(--porcelaine); }
#form-1 > fieldset { margin: 0; }
#form-1 > .actions { margin: 0; }
#form-1 > .err, #form-1 > .rassure, #form-1 > .note-mesure { grid-column: 1 / -1; }
/* la commune confirmee flotte sous le champ ville : un message d'erreur (site invalide, champ vide) passe dessous */
#form-1:has(.cp-suite:not([hidden])) > .err.on { margin-top: 44px; }
#form-1 > .err.on { margin-bottom: 18px; }
#form-1 .field { font-size: 18px; height: 60px; }
#form-1 #btn-fiche { height: 60px; min-width: 300px; }

/* 3. LA MISSION : le journal en grand ; puis l'ANALYSE en deux colonnes — les faits relevés, la fiche Google */
/* une seule largeur, du journal en direct à l'analyse : rien ne saute ; la hauteur suit l'écran du laptop */
.mission { max-width: none; height: clamp(500px, 64vh, 600px); padding: 32px 40px; }
.mission .j-titre { font-size: 44px; }
.mission .j-sous { font-size: 19px; }
.mission.finie:not(.replie):not([hidden]), .mission.rouverte:not([hidden]) { height: auto; }
/* deux colonnes seulement quand la fiche Google est là ; sans elle, le journal garde toute la largeur */
.mission.finie:not(.replie):not([hidden]):has(> .j-fiche-google:not([hidden])), .mission.replie.rouverte:not([hidden]):has(> .j-fiche-google:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
.mission:has(> .j-fiche-google:not([hidden])) > * { grid-column: 1 / -1; }
.mission.finie:not(.replie):has(> .j-fiche-google:not([hidden])) > .j-faits, .mission.replie.rouverte:has(> .j-fiche-google:not([hidden])) > .j-faits { grid-column: 1; }
.mission.finie:not(.replie) > .j-fiche-google:not([hidden]), .mission.replie.rouverte > .j-fiche-google:not([hidden]) { grid-column: 2; grid-row: span 3; margin-top: 10px; }
.mission.finie:not(.replie):has(> .j-fiche-google:not([hidden])) > .j-active { grid-column: 1; }
.mission .j-fait .j-lab { font-size: 13.5px; }
.mission .j-fait .j-res, .mission .j-fait .j-det, .mission .j-fait p { font-size: 17px; }

/* la fiche Google, un cran plus grande pour l'écran */
.fgm { padding: 14px 22px 16px; }
.fgm-h h3 { font-size: 19px; }
.fgm-h .g-google { font-size: 22px; }
.fgm-c { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.05fr) 22px; column-gap: 16px; min-height: 60px; }
.fgm-etat { width: 26px; height: 26px; font-size: 14px; }
.fgm-lib b { font-size: 14px; }
.fgm-lib > span:not(.fgm-sr) { font-size: 15px; }
.fgm-val { font-size: 18px; }
.fgm-pastille { font-size: 15.5px; padding: 5px 12px; }
.fgm-pic { width: 22px; height: 22px; }
.fgm-s { font-size: 18px; padding-top: 12px; }

/* 4. LES ÉTAPES DU RÉSULTAT : plus larges, les titres d'étape lisibles de loin */
.js-l1 { font-size: 13.5px; }
.js-res { font-size: 17px; line-height: 24px; }
.screen.nu .jeu-piste { padding: 36px 0 28px; }

/* 5. LE MARCHÉ : les recherches à gauche, le total et ce qu'il dit à droite */
.mc-kick { font-size: 13px; }
.mc-titre { font-size: 72px; line-height: .92; margin-top: 12px; }
.mc-bloc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 72px; align-items: start;
  grid-template-areas: "barres payoff" "reste insight" "opp opp" "vide vide"; }
.mc-barres { grid-area: barres; margin-top: 28px; }
.mc-reste { grid-area: reste; }
.mc-payoff { grid-area: payoff; margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--ink); }
.mc-insight { grid-area: insight; }
.mc-opp { grid-area: opp; }
.mc-vide { grid-area: vide; }
.mc-l { padding: 14px 0 15px; }
.mc-lib { font-size: 19px; }
.mc-vol { font-size: 24px; }
.mc-piste { height: 22px; margin-top: 10px; }
.mc-r-l { font-size: 14px; }
.mc-r-v { font-size: 19px; }
/* le total aussi grand que sa colonne le permet, jamais au-delà : sa longueur vient de marche.js (--mc-len) ;
   sans unités de conteneur, le navigateur garde la taille calculée par marche.js */
@supports (width: 1cqi) {
  .mc-payoff { container-type: inline-size; }
  .mc-n { font-size: min(180px, calc(100cqi / (var(--mc-len, 5) * .6))) !important; }
}
.mc-u { font-size: 30px; }
.mc-z { font-size: 16px; }
.mc-insight { font-size: 21px; line-height: 1.35; margin-top: 10px; border-top: 0; padding-top: 0; }
.mc-opp-t { font-size: 22px; }
.mc-corriger { font-size: 14px; }

/* 5 bis. LE DIAGNOSTIC : la carte grandit déjà avec le cadre (requête de conteneur) ; ses mots suivent */
.fd-titre { font-size: 14px; }
.fd-lab, .fd-zones { font-size: 13px; }
/* la carte est figée : ses tailles restent liées à son conteneur, on ne fait que relever leurs bornes */
.fd-n { font-size: clamp(30px, 7.2cqi, 48px); }
.fd-zero { font-size: clamp(22px, 5.4cqi, 38px); white-space: normal; }
.fd-phrase { font-size: clamp(18px, 3cqi, 21px); }

/* 6. PASSER DEVANT : les quatre temps d'une annonce, lisibles ; le calcul en grand */
.dm-t { font-size: 17px; }
.dm-s { font-size: 14px; }
.dm-n { font-size: 13px; }
.sim-plan { font-size: 13.5px; }
.sn-prix { font-size: 40px; }
.sn-lab { font-size: 14px; }
.sim-ca { font-size: 52px; }
.sim-detail { font-size: 16.5px; line-height: 1.7; }
.sim-disc { font-size: 14px; }

/* 7. CONTACT : la question à gauche, le formulaire à droite */
.ct-corps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 72px; align-items: start; }
.ct-corps > .ct-titre, .ct-corps > .ct-sous { grid-column: 1; }
.ct-corps > .rappel, .ct-corps > .rappel-ok { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.ct-titre { font-size: 56px; line-height: .98; }
.ct-sous { font-size: 20px; margin-top: 18px; }

/* 8. LE PIED ET L'EN-TÊTE, alignés sur le nouveau cadre */
.nav { max-width: 1240px; padding-left: 48px; padding-right: 48px; }

/* 9. LES GRANDS ÉCRANS (1600 px et plus) : 1304 px de contenu — en dernier, pour que le cadre et l'en-tête grandissent ensemble */
@media (min-width: 1600px) { .shell, .nav { max-width: 1400px; } }