/* =========================================================================
   ARTIS VALORISATION, REFONTE : LE SCHEMA DE CONCEPTION DU RAPPORT (schema.css)
   La bande claire « Conception du rapport » de l'accueil, apres
   rapport-vitrine.css.
   Installee le 30/09/2026 depuis l'essai g-schema.css, sans changement
   de regle ; les noms de fichiers cites dans les commentaires suivent.
   Reference du systeme : REFONTE-GABARIT.md.
   ------------------------------------------------------------------------- */

/* =========================================================================
   ESSAI G. LE SCHEMA DE CONCEPTION DU RAPPORT, SUR BANDE CLAIRE
   Remplace la section #conception de l'essai F. Charge apres socle.css et scene.css,
   dont il reprend les jetons (--f-*) et les classes de base (f-conteneur,
   f-etiquette, f-titre-section, f-chapo) ; tout le reste est prefixe gs-.

   Demande de Raphael du 29/09/2026 : garder le schema d'avant (index.html,
   #artis-editorial), l'ameliorer dans le style de F, peut-etre sur fond
   clair. Ce qui est garde : les trois piliers, les fils des piliers vers la
   fiche Votre rapport, le detail par rubrique, les fleches et le geste (le
   pont de 01 vers 02 est retire le 30/09/2026, retouches 5).
   Ce qui change :
   - la bande est claire (papier) et tranche avec le sombre de F ; les
     piliers sont des cartes blanches ; la fiche Votre rapport, le livrable
     au milieu du schema, est une bulle marine relevee (retouches 5,
     30/09/2026, bloc en fin de fiche) : c'est le seul objet avec lequel on
     interagit, il ressort seul ;
   - la fiche et le detail ne font plus qu'un : le detail s'ouvrait 800 px
     sous le bouton qui le commandait, il est desormais a cote ;
   - au telephone, la fiche n'est plus retiree : les trois rubriques se
     choisissent au doigt, puis au geste ou aux fleches ;
   - les trois rubriques occupent la meme case : la hauteur ne saute plus
     d'une rubrique a l'autre, et le passage se fait en fondu ;
   - aucun texte sous 16 px, hors les etiquettes en capitales (12 px) ;
   - clavier : fleches, Debut et Fin dans la liste des rubriques.
   Icones : Lucide 1.17.0, licence ISC. Logos : Xerfi, Statista, Orbis de
   Moody's, propriete de leurs titulaires.
   ========================================================================= */

.gs{
  /* Encres mesurees : gris secondaire 8,5:1 sur blanc, 7,6:1 sur le papier */
  --gs-papier:#F1F2F6;
  --gs-blanc:#FFFFFF;
  --gs-encre:#03021B;
  --gs-encre-2:#474C5E;
  --gs-encre-3:#5A5F70;          /* etiquettes : 6,2:1 sur blanc */
  --gs-filet:rgba(3,2,27,.10);
  --gs-klein:#002FA7;            /* accent Artis, valeurs actives */
  --gs-teinte:#E6EBF7;           /* fond du pont */
  --gs-fil:#AEB5C4;              /* fils au repos, 2,0:1 : decoratifs */
  --gs-r:12px;
  position:relative;
  background:var(--gs-papier);
  color:var(--gs-encre);
  padding:var(--f-bande-haut) 0 var(--f-bande-haut);
  scroll-margin-top:100px;
}
.gs *{ box-sizing:border-box; }
.gs :focus-visible{ outline:2px solid var(--gs-klein); outline-offset:3px; border-radius:6px; }
.gs-corps{ container:gs / inline-size; }

/* --- 1. En-tete : celui des bandes de F, centre ------------------------------ */
.gs-entete{ text-align:center; display:grid; justify-items:center; margin-bottom:var(--f-ecart-titre-contenu); }
.gs-etiquette{ color:var(--gs-encre); }
.gs-titre{ color:var(--gs-encre); }
.gs-titre span{ color:var(--gs-klein); }
.gs-chapo{ margin-top:var(--f-ecart-titre-texte); color:var(--gs-encre-2); max-width:600px; }

/* --- 2. La carte du schema ---------------------------------------------------- */
.gs-carte{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); }
.gs-fils{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:-1; display:none; }

/* Les piliers : cartes blanches, filet d'un dixieme, sans ombre (F n'en a pas) */
.gs-pilier{
  position:relative; min-width:0; display:flex; flex-direction:column;
  padding:32px; background:var(--gs-blanc); color:var(--gs-encre);
  border:1px solid var(--gs-filet); border-radius:var(--gs-r);
  container-type:inline-size;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.gs-pilier.est-actif{ border-color:var(--gs-klein); box-shadow:0 0 0 4px rgba(0,47,167,.10); }
/* Le pilier se choisit dans toute sa surface (demande de Raphael du
   04/10/2026) : schema.js glisse un vrai bouton dans le titre (clavier,
   aria-pressed) et ecoute le clic sur la carte. Les liens des sources
   gardent le leur. L'anneau de focus du bouton entoure toute la carte. */
.gs-pilier--choix{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.gs-pilier-choix{
  appearance:none; -webkit-appearance:none; display:inline; margin:0; padding:0; border:0; background:none;
  font:inherit; letter-spacing:inherit; line-height:inherit; color:inherit; text-align:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gs-pilier-choix::after{ content:""; position:absolute; inset:-1px; border-radius:var(--gs-r); pointer-events:none; }
.gs .gs-pilier-choix:focus-visible{ outline:none; }
.gs .gs-pilier-choix:focus-visible::after{ outline:2px solid var(--gs-klein); outline-offset:3px; }
@media (hover:hover){
  .gs-pilier--choix:not(.est-actif):hover{ border-color:rgba(0,47,167,.36); }
}
.gs-pilier--choix:not(.est-actif):active{ border-color:rgba(0,47,167,.5); }
.gs-pilier-tete{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.gs-pilier-meta{ margin:0; font-size:12px; line-height:1; font-weight:500; letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; color:var(--gs-encre-3); }
.gs-pilier-no{ color:var(--gs-klein); font-variant-numeric:tabular-nums; }
.gs-pilier-titre{ margin:0; font-size:var(--f-t-carte); line-height:var(--f-l-carte); font-weight:500; letter-spacing:var(--f-serre); color:var(--gs-encre); }

.gs-mosaique{ margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0 24px; flex:1; align-content:start; }
.gs-cellule{ min-width:0; padding:16px 0 20px; border-top:1px solid var(--gs-filet); }
.gs-cellule dt{ display:flex; align-items:center; gap:10px; margin:0; font-size:16px; line-height:1.3; font-weight:500; color:var(--gs-encre); }
.gs-cellule dd{ margin:6px 0 0 30px; font-size:16px; line-height:1.45; color:var(--gs-encre-2);
  text-wrap:pretty; -webkit-hyphens:manual; hyphens:manual; }
.gs-icone{ flex:none; width:20px; height:20px; color:var(--gs-klein); }
/* Deux colonnes des 480 px de carte, quatre des 900 : jamais une cellule
   sous 200 px de texte, soit vingt-cinq signes a 16 px. */
@container (min-width: 480px){
  .gs-p2 .gs-mosaique, .gs-p3 .gs-mosaique{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container (min-width: 900px){
  .gs-p3 .gs-mosaique{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .gs-p3 .gs-pied{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-items:baseline; }
  .gs-p3 .gs-pied-etiquette{ grid-column:1 / -1; }
  .gs-p3 .gs-pied-note{ margin-top:0; }
}

.gs-pied{ margin-top:8px; padding-top:20px; border-top:1px solid var(--gs-filet); }
.gs-pied-etiquette{ margin:0 0 10px; font-size:12px; line-height:1; font-weight:500; letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; color:var(--gs-encre-3); }
.gs-pied-valeur{ margin:0; font-size:16px; line-height:1.3; font-weight:500; color:var(--gs-encre); }
.gs-pied-note{ margin:6px 0 0; font-size:16px; line-height:1.45; color:var(--gs-encre-2); }
.gs-sources{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.gs-sources a{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; height:48px; padding:6px 12px;
  border-radius:8px; background:var(--gs-blanc); border:1px solid var(--gs-filet); color:var(--gs-encre); text-decoration:none;
  transition:border-color .2s ease; }
@media (hover:hover){ .gs-sources a:hover{ border-color:rgba(3,2,27,.28); } }
.gs-sources img{ display:block; height:auto; }
.gs-xerfi{ padding:6px !important; }
.gs-xerfi img{ width:32px; height:32px; }
.gs-statista img{ width:76px; height:20px; }
.gs-orbis{ flex-direction:column; gap:3px !important; }
.gs-orbis img{ width:57px; }
.gs-orbis span{ font-size:12px; line-height:1; font-weight:500; letter-spacing:0; }

/* --- 3. Le lien de 01 vers 02, ecrit -------------------------------------------
   Retouches 4 et 5 (30/09/2026) : la bulle du pont, puis sa fleche, etaient
   retirees a la demande de Raphael. Brief editorial du 04/10/2026
   (sections 7 et 20) : la relation economique redevient explicite, mais
   en texte, sans animation : « Les perspectives economiques fondent les
   hypotheses de chiffre d'affaires, de marge et de risque utilisees dans
   la valorisation. » Un bloc court et stable : au large, dans une colonne
   de 200 px entre les deux piliers, sous une fleche vers la droite ;
   empile, entre 01 et 02, sous une fleche vers le bas (progression
   verticale numerotee). Reste le relais de 02 vers 03 quand le schema
   s'empile. Sous le schema, sa conclusion. */
.gs-lien{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:520px; margin:0 auto 32px; padding:0 8px; text-align:center;
  font-size:16px; line-height:1.45; color:var(--gs-encre-2); text-wrap:pretty;
}
.gs-conclusion{
  margin:48px auto 0; max-width:34ch; text-align:center; text-wrap:balance;
  font-size:var(--f-t-carte); line-height:var(--f-l-carte); font-weight:500; letter-spacing:var(--f-serre); color:var(--gs-encre);
}

/* Les jonctions (demande de Raphael du 04/10/2026) : la triple fleche de
   convergence sous le pilier 03 devient une fleche simple, et les trois
   liaisons du schema prennent le meme dessin. Un trait fin, la couleur des
   fils du schema a plat, relie les cartes ; sur lui, une pastille blanche
   cerclee d'un filet porte une fleche Klein a trait fin (Lucide arrow-right,
   ISC), vers la droite au large, tournee vers le bas quand le schema
   s'empile. Decoratives : aria-hidden dans le balisage. */
.gs-pastille{
  position:relative; z-index:1; display:grid; place-items:center; flex:none;
  width:32px; height:32px; border-radius:50%;
  background:#FFFFFF; color:var(--gs-klein);
  box-shadow:inset 0 0 0 1px var(--gs-filet), 0 1px 2px rgba(11,29,54,.06);
}
.gs-pastille svg{ display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; transform:rotate(90deg); }
.gs-jonction, .gs-relais{ position:relative; display:grid; justify-items:center; }
.gs-jonction::before, .gs-relais::before{ content:""; position:absolute; background:var(--gs-fil); }
/* Empile : un trait vertical de carte a carte, la pastille au milieu */
.gs-relais{ justify-self:center; align-items:center; width:32px; height:80px; margin:0; }
.gs-relais::before{ left:50%; top:0; bottom:0; width:1.5px; margin-left:-.75px; }
/* Le lien ecrit de 01 vers 02 : le trait part du pilier 01, la pastille
   annonce le texte */
.gs-lien-jonction{ align-items:end; width:32px; height:64px; }
.gs-lien-jonction::before{ left:50%; top:0; bottom:16px; width:1.5px; margin-left:-.75px; }

/* --- 4. La fiche Votre rapport et son detail -------------------------------
   Clarte (30/09/2026) : la carte sombre de F devient une bulle blanche. Elle
   reste l'objet qu'on manipule, et le dit autrement : relevee par une ombre
   (les piliers n'en ont pas), un filet Klein en tete, la rubrique choisie
   en bleu Klein ; le detail est un creux de papier a cote de la liste. */
.gs-rapport{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:8px;
  padding:8px; border-radius:var(--gs-r);
  background:var(--gs-blanc); color:var(--gs-encre);
  box-shadow:0 1px 2px rgba(11,29,54,.06), 0 18px 48px rgba(11,29,54,.12), inset 0 3px 0 var(--gs-klein), inset 0 0 0 1px var(--gs-filet);
}
.gs-fiche{ padding:24px 24px 20px; display:flex; flex-direction:column; }
.gs-fiche-marque{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 12px; margin:0 0 20px;
  font-size:12px; line-height:1; font-weight:500; letter-spacing:var(--f-espace-etiquette); color:var(--gs-encre-3); }
.gs-fiche-marque span{ white-space:nowrap; }
.gs-fiche-marque span:first-child{ color:var(--gs-klein); }
.gs-fiche-marque span:last-child{ letter-spacing:.14em; text-transform:uppercase; }
.gs-fiche-titre{ margin:0 0 24px; font-size:var(--f-t-carte); line-height:var(--f-l-carte); font-weight:500; letter-spacing:var(--f-serre); color:var(--gs-encre); }
.gs-chapitres{ display:grid; gap:4px; }
.gs-chapitre{
  appearance:none; -webkit-appearance:none; display:grid; grid-template-columns:24px minmax(0,1fr) 28px; align-items:center; gap:12px;
  width:100%; min-height:56px; padding:10px 12px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  font:400 16px/1.3 var(--f-police); letter-spacing:var(--f-serre); text-align:left; color:var(--gs-encre-2);
  transition:background-color .2s ease, color .2s ease;
}
.gs-ch-no{ font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--gs-encre-3); font-variant-numeric:tabular-nums; }
.gs-ch-chevron{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--gs-papier); color:var(--gs-encre);
  transition:transform .2s ease, background-color .2s ease, color .2s ease; }
.gs-ch-chevron .gs-icone{ width:16px; height:16px; color:currentColor; }
.gs-chapitre[aria-selected="true"], .gs-chapitre[aria-pressed="true"]{ background:var(--gs-teinte); color:var(--gs-encre); font-weight:500; }
.gs-chapitre[aria-selected="true"] .gs-ch-no, .gs-chapitre[aria-pressed="true"] .gs-ch-no{ color:var(--gs-klein); }
.gs-chapitre[aria-selected="true"] .gs-ch-chevron, .gs-chapitre[aria-pressed="true"] .gs-ch-chevron{ background:var(--gs-klein); color:var(--gs-blanc); }
@media (hover:hover){
  .gs-chapitre:hover{ background:rgba(11,29,54,.04); color:var(--gs-encre); }
  .gs-chapitre[aria-selected="true"]:hover{ background:var(--gs-teinte); }
  .gs-chapitre:hover .gs-ch-chevron{ transform:translateX(2px); }
}
.gs-fiche-pied{ margin:20px 0 0; padding-top:16px; border-top:1px solid var(--gs-filet); font-size:16px; line-height:1.45; color:var(--gs-encre-2); }

/* Le detail : un creux de papier */
.gs-detail{ position:relative; min-width:0; padding:24px; border-radius:8px; background:var(--gs-papier); }
.gs-detail-barre{ display:flex; align-items:center; gap:4px; margin:-8px -8px 12px 0; }
.gs-jauge{ display:flex; gap:6px; margin-right:auto; }
.gs-jauge i{ display:block; width:24px; height:3px; border-radius:2px; background:rgba(11,29,54,.16); transition:background-color .25s ease, width .25s ease; }
.gs-jauge i.est-actif{ width:40px; background:var(--gs-klein); }
.gs-fleche{ appearance:none; -webkit-appearance:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:var(--gs-blanc); color:var(--gs-encre); box-shadow:inset 0 0 0 1px var(--gs-filet); cursor:pointer; transition:background-color .2s ease, opacity .2s ease; }
@media (hover:hover){ .gs-fleche:hover{ background:var(--gs-teinte); } }
.gs-fleche[disabled]{ opacity:.35; cursor:default; }
.gs-scene{ display:grid; }
.gs-rubrique{ min-width:0; }
.gs-rubrique + .gs-rubrique{ margin-top:48px; }      /* sans script : l'une sous l'autre */
.gs-rubrique-kicker{ margin:0 0 12px; font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.14em; color:var(--gs-klein); }
.gs-rubrique-titre{ margin:0 0 28px; max-width:30ch; font-size:var(--f-t-carte); line-height:var(--f-l-carte); font-weight:500; letter-spacing:var(--f-serre); color:var(--gs-encre); text-wrap:balance; }
.gs-rubrique-texte{ margin:0; padding-top:20px; border-top:1px solid var(--gs-filet); font-size:16px; line-height:1.5; color:var(--gs-encre-2); max-width:68ch; }
.gs-rubrique-texte strong{ font-weight:500; color:var(--gs-encre); }

/* Retouches 5 (30/09/2026), demande de Raphael : la bulle du livrable, au
   milieu du schema, passe en bleu fonce, le marine des cartes d'offre
   (#0B1D36). Les encres du schema sont redefinies dans la bulle : toutes
   les regles ci-dessus et ci-dessous les suivent. Mesures (WCAG) :
   sur #0B1D36 : blanc 16,9:1, blanc a 82 % 11,6:1, a 72 % 9,2:1, azur
   #7FB0E8 7,5:1 ; sur le creux #132A4A : blanc 14,4:1, 82 % 10,2:1,
   72 % 8,1:1, azur 6,4:1 ; rubrique choisie (#203756) : blanc 12,1:1,
   azur 5,3:1 ; bord des fleches (blanc a 40 % sur le creux) 3,5:1. */
.gs-rapport{
  --gs-encre:#FFFFFF;
  --gs-encre-2:rgba(255,255,255,.82);
  --gs-encre-3:rgba(255,255,255,.72);
  --gs-filet:rgba(255,255,255,.16);
  --gs-klein:#7FB0E8;                       /* l'azur tient le role du Klein */
  --gs-papier:#132A4A;                      /* le creux du detail, les pastilles */
  --gs-teinte:rgba(127,176,232,.16);        /* rubrique choisie : #203756 */
  --gs-blanc:#0B1D36;                       /* fond des fleches, chevron actif */
  background:#0B1D36;
  box-shadow:0 1px 2px rgba(11,29,54,.12), 0 18px 48px rgba(11,29,54,.24), inset 0 3px 0 var(--gs-klein);
}
.gs-rapport .gs-fleche{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.40); }
.gs-rapport .gs-jauge i{ background:rgba(255,255,255,.24); }
.gs-rapport .gs-jauge i.est-actif{ background:var(--gs-klein); }
.gs-rapport .gs-etape{ border-top-color:rgba(255,255,255,.22); }
@media (hover:hover){
  .gs-rapport .gs-chapitre:hover{ background:rgba(255,255,255,.06); }
  .gs-rapport .gs-chapitre[aria-selected="true"]:hover{ background:var(--gs-teinte); }
  .gs-rapport .gs-fleche:hover{ background:rgba(255,255,255,.12); }
}

/* Constats vers hypotheses */
.gs-impact{ display:grid; margin-bottom:24px; }
.gs-impact-tete, .gs-impact-rang{ display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); column-gap:20px; align-items:center; }
.gs-impact-tete{ padding-bottom:12px; font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.1em; color:var(--gs-encre-3); }
.gs-impact-tete span:last-child{ grid-column:3; }
.gs-impact-rang{ padding:16px 0; border-top:1px solid var(--gs-filet); }
.gs-impact-source{ display:flex; align-items:center; gap:10px; min-width:0; font-size:16px; line-height:1.35; color:var(--gs-encre-2); }
.gs-impact-source .gs-icone, .gs-impact-lien .gs-icone{ color:var(--gs-klein); }
.gs-impact-lien{ display:grid; place-items:center; }
.gs-impact-cible{ font-size:16px; line-height:1.35; font-weight:500; color:var(--gs-encre); }
@media (max-width:359px){ .gs-impact-cible{ hyphens:auto; -webkit-hyphens:auto; } }

/* Trois etapes */
.gs-flux{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:none; }
.gs-etape{ position:relative; min-width:0; padding:16px 0 0; border-top:1px solid rgba(11,29,54,.16); }
.gs-etape + .gs-etape::before{ content:""; position:absolute; left:-12px; top:-5px; width:8px; height:8px;
  border-top:1.5px solid var(--gs-klein); border-right:1.5px solid var(--gs-klein); transform:translateX(-50%) rotate(45deg); background:var(--gs-papier); }
.gs-etape-kicker{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:12px; line-height:1; font-weight:500; letter-spacing:.1em; color:var(--gs-encre-3); }
.gs-etape-kicker .gs-icone{ width:18px; height:18px; color:var(--gs-klein); }
.gs-etape strong{ display:block; margin-bottom:6px; font-size:18px; line-height:1.3; font-weight:500; letter-spacing:var(--f-serre); color:var(--gs-encre); }
.gs-etape p:last-child{ margin:0; font-size:16px; line-height:1.45; color:var(--gs-encre-2); }

.gs-annonce{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* --- 5. Avec script : une rubrique a la fois, toutes dans la meme case -------
   La case prend la hauteur de la plus haute : rien ne saute au changement. */
.js .gs-rubrique{ grid-area:1 / 1; transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
.js .gs-rubrique + .gs-rubrique{ margin-top:0; }
.js .gs-rubrique:not(.est-actif){ visibility:hidden; opacity:0; transform:translateX(calc(var(--gs-sens, 1) * 12px)); pointer-events:none; }
.js .gs-rubrique.est-actif{ transition:opacity .26s ease .04s, transform .26s cubic-bezier(.22,.72,.28,1) .04s, visibility 0s; }
.no-js .gs-detail-barre, .no-js .gs-chapitres, .no-js .gs-fiche-pied{ display:none; }
.gs-scene{ touch-action:pan-y; }

/* --- 6. Au large : le schema a plat ------------------------------------------ */
@container gs (min-width: 1000px){
  .gs-carte{
    /* 04/10/2026 : la colonne de 200 px porte de nouveau le lien de 01 vers 02 */
    grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);
    grid-template-rows:auto 112px auto 112px auto;
  }
  .gs-lien{ grid-column:2; grid-row:1; align-self:center; margin:0; padding:0 4px; font-size:15px; }
  /* Au large, le trait traverse la colonne de 200 px d'une carte a l'autre,
     la fleche regarde vers la droite */
  .gs-lien-jonction{ align-items:center; align-self:stretch; width:auto; height:32px; margin:0 -4px; }
  .gs-lien-jonction::before{ left:0; right:0; top:50%; bottom:auto; width:auto; height:1.5px; margin:-.75px 0 0; }
  .gs-lien .gs-pastille svg{ transform:none; }
  .gs-fils{ display:block; }
  .gs-p1{ grid-column:1; grid-row:1; }
  .gs-p2{ grid-column:3; grid-row:1; }
  .gs-rapport{ grid-column:1 / -1; grid-row:3; justify-self:center; width:min(1120px,100%);
    grid-template-columns:minmax(300px,360px) minmax(0,1fr); }
  .gs-p3{ grid-column:1 / -1; grid-row:5; justify-self:center; width:min(1120px,100%); }
  /* Retouche finale (jury du 29/09) : 01 et 02 ont la meme hauteur (meme
     rangee), mais 02 a moins de contenu : ses cellules laissaient un creux
     de 89 px avant « Dans le rapport ». Le blanc se repartit dans les
     cellules (rangees etirees) et le pied se cale en bas : les deux pieds
     s'alignent, sans creux. */
  .gs-p1 .gs-mosaique, .gs-p2 .gs-mosaique{ align-content:stretch; }
  .gs-p1 .gs-pied, .gs-p2 .gs-pied{ margin-top:auto; }
  .gs-relais-23, .gs-convergence{ display:none; }
}
/* La fiche a cote du detail des 720 px, meme quand le schema s'empile */
@container gs (min-width: 720px) and (max-width: 999.98px){
  .gs-rapport{ grid-template-columns:280px minmax(0,1fr); }
  .gs-flux{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .gs-etape + .gs-etape::before{ left:0; top:-5px; transform:translateX(0) rotate(135deg); }
}
@container gs (max-width: 999.98px){
  .gs-carte{ max-width:760px; margin-inline:auto; }
}

/* Les fils, traces par schema.js */
.gs-fil{ fill:none; stroke:var(--gs-fil); stroke-width:1.5; stroke-linecap:round; transition:stroke .25s ease; }
.gs-fil.est-actif{ stroke:var(--gs-klein); stroke-width:2; }
.gs-fil.gs-dessine{ stroke-dasharray:1; animation:gs-dessin .7s cubic-bezier(.22,.72,.28,1) both; }
@keyframes gs-dessin{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
/* 04/10/2026 : la pointe pleine devient un chevron a trait fin, comme la
   fleche des jonctions et des pastilles du site */
.gs-pointe{ fill:none; stroke:var(--gs-fil); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease; }
.gs-pointe.est-actif{ stroke:var(--gs-klein); stroke-width:2; }
.gs-origine{ fill:var(--gs-blanc); stroke:var(--gs-fil); stroke-width:1.5; transition:fill .25s ease, stroke .25s ease; }
.gs-origine.est-actif{ fill:var(--gs-klein); stroke:var(--gs-klein); }

/* --- 7. Telephone --------------------------------------------------------------
   Depuis le 09/10/2026, la bande, les piliers et la fiche au telephone
   suivent aussi la section 9 (audit telephone du 8 octobre, D1). */
@media (max-width: 760px){
  .gs{ padding:96px 0; }
  .gs-pilier{ padding:24px 20px; }
  .gs-cellule dd{ margin-left:0; }
  .gs-fiche{ padding:20px 16px 16px; }
  .gs-detail{ padding:20px 16px; }
  .gs-detail-barre{ margin:-4px -4px 12px 0; }
  .gs-rubrique-titre{ margin-bottom:20px; }
  .gs-flux{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .gs-etape + .gs-etape::before{ left:0; top:-5px; transform:translateX(0) rotate(135deg); }
  .gs-etape strong{ font-size:17px; }
  .gs-lien{ margin:0 auto 24px; }
  .gs-conclusion{ margin-top:32px; font-size:20px; }
  .gs-impact-tete, .gs-impact-rang{ grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); column-gap:10px; }
  .gs-impact-source{ display:block; }
  .gs-impact-source .gs-icone{ display:block; margin-bottom:8px; }
  .gs-impact-lien .gs-icone{ width:16px; height:16px; }
}
@media (max-width: 360px){
  .gs-impact-tete{ font-size:11px; letter-spacing:.06em; }
}

/* --- 8. Mouvement reduit --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .gs *, .gs *::before, .gs *::after{ transition:none !important; animation:none !important; }
  .js .gs-rubrique:not(.est-actif){ transform:none; }
}

/* Sous 360 px (30/09/2026, DM Sans) : « Ce que l'economie change » mesure
   235 px en 20 pour une colonne de 232 ; le titre passait sur trois lignes. */
@media (max-width: 359px){
  .gs-rubrique-titre{ font-size:19px; }
}

/* --- 9. Telephone : les piliers en accordeon (audit du 8 octobre, D1) ------
   Decision de Raphael sur l'audit telephone du 8 octobre 2026 (D1), mise
   en oeuvre le 09/10/2026. Au telephone, la section faisait 5,9 ecrans de
   Safari : trois piliers deroules, deux relais, le lien ecrit et la fiche
   « Votre rapport » (1 170 px), qui reprend les trois piliers.
   - On garde l'en-tete, la conclusion et les trois tetes de pilier
     (numero, verbe, titre). Les cellules de chaque pilier (Marche,
     Concurrence, Perspectives, puis « Dans le rapport » et les sources
     Xerfi, Statista et Orbis de Moody's, de meme pour 02 et 03) se
     replient sous leur tete et s'ouvrent au toucher sur la tete. Les
     trois sont fermes au chargement.
   - On masque la fiche « Votre rapport », les deux relais fleches et le
     lien ecrit de 01 vers 02 avec sa pastille.
   - Le bouton que schema.js glisse dans chaque titre, qui choisissait
     une rubrique de la fiche 1,5 a 3,4 ecrans plus bas sans rien changer
     sous le pouce, devient le declencheur de l'accordeon : aria-expanded,
     aria-controls vers les cellules et le pied, Entree et Espace, fleches
     haut et bas, Debut et Fin entre les trois tetes. schema.js pose
     .gs--accordeon sur la section tant que la fenetre fait 760 px ou
     moins (matchMedia, suivi au changement). Au-dela, rien ne change.
   - Sans script, rien n'est replie : les cellules restent ouvertes, la
     fiche et ses relais restent masques.
   - Le lisere bleu Klein du pilier choisi (est-actif) ne dit plus rien
     au telephone, la fiche etant masquee : il tombe sous 760 px.
   Toute la tete est la cible : le ::after du bouton, deja la pour l'anneau
   de focus, couvre la tete et recoit le toucher (un clic sur un
   pseudo-element est un clic sur son element). Un chevron dans un rond de
   papier, celui des rubriques de la fiche (.gs-ch-chevron), dit l'etat :
   vers le bas ferme, vers le haut ouvert.
   La bande passe a 56 px en haut et en bas (96 avant), et a 48 px de
   « Votre interlocuteur », qui la precede au telephone (D2, accueil.css
   16). Mesure WebKit iPhone 15 (393 px) : 3 917 px avant, 704 px les
   trois piliers fermes (1,07 ecran de Safari au lieu de 5,94), un pilier
   ouvert ajoute 516 a 562 px. */
@media (max-width: 760px){
  .gs{ padding:56px 0; margin-top:48px; }
  .gs-lien, .gs-relais, .gs-rapport{ display:none; }
  .gs-carte{ row-gap:12px; }
  .gs-pilier.est-actif{ border-color:var(--gs-filet); box-shadow:none; }
  .gs-pilier--choix:not(.est-actif):active{ border-color:var(--gs-filet); }

  .gs--accordeon .gs-pilier{ padding:0; cursor:default; }
  .gs--accordeon .gs-pilier-tete{ position:relative; margin:0; padding:20px 64px 20px 20px; gap:10px; }
  .gs--accordeon .gs-mosaique, .gs--accordeon .gs-pied{ margin-inline:20px; }
  .gs--accordeon .gs-pied{ margin-bottom:20px; }
  .gs--accordeon .gs-pilier:not(.gs-pilier--ouvert) > .gs-mosaique,
  .gs--accordeon .gs-pilier:not(.gs-pilier--ouvert) > .gs-pied{ display:none; }
  .gs--accordeon .gs-pilier-choix::after{ inset:0; border-radius:calc(var(--gs-r) - 1px); pointer-events:auto; cursor:pointer; }
  .gs--accordeon .gs-pilier--ouvert .gs-pilier-choix::after{ border-radius:calc(var(--gs-r) - 1px) calc(var(--gs-r) - 1px) 0 0; }
  .gs--accordeon .gs-pilier-choix:focus-visible::after{ outline-offset:-3px; }
  /* Le chevron : un rond de papier de 32 px, une fleche Klein de 2 px */
  .gs--accordeon .gs-pilier-tete::before,
  .gs--accordeon .gs-pilier-tete::after{ content:""; position:absolute; pointer-events:none; }
  .gs--accordeon .gs-pilier-tete::before{ right:20px; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%; background:var(--gs-papier); }
  .gs--accordeon .gs-pilier-tete::after{
    right:32px; top:50%; width:8px; height:8px; margin-top:-6px;
    border-right:2px solid var(--gs-klein); border-bottom:2px solid var(--gs-klein);
    transform:rotate(45deg); transition:transform .2s ease, margin-top .2s ease;
  }
  .gs--accordeon .gs-pilier--ouvert .gs-pilier-tete::after{ transform:rotate(-135deg); margin-top:-2px; }
  @media (hover:hover){
    .gs--accordeon .gs-pilier-tete:hover::before{ background:var(--gs-teinte); }
  }
}

/* --- 10. Telephone : encore un peu d'air (10/10/2026) ----------------------
   Demande de Raphael du 10/10/2026 (« encore un petit peu » d'air), la
   meme regle que sur le reste de l'accueil (accueil.css 19). La bande
   commence a 72 px de « Votre interlocuteur » et garde 72 px en haut et
   en bas (48 et 56 avant). L'en-tete se pose a 48 px des piliers (40),
   le chapo a 16 px du titre (12), dans l'interligne de lecture des
   autres chapos (socle.css 13, dont la bande est exclue : 1,2 avant,
   1,53 desormais). Les piliers s'ecartent de 16 px (12), leurs tetes
   prennent 24 px en haut et en bas (20), et le pied d'un pilier ouvert
   24 px sous lui (20). Cellules et notes en interligne 1,5 (1,45). La
   phrase de conclusion se pose a 48 px du dernier pilier (32), en
   interligne 1,4 (1,3, deux lignes de 20 px). Mesure Chromium a
   393 x 852, piliers fermes : la section passe de 705 a 819 px. Accueil
   seul, a l'ecran de 760 px et moins : au-dela, et a l'impression, rien
   ne change. */
@media screen and (max-width: 760px){
  .f-accueil .gs{ padding:72px 0; margin-top:72px; }
  .f-accueil .gs-chapo{ margin-top:16px; line-height:calc(1em + .6rem); }
  .f-accueil .gs-carte{ row-gap:16px; }
  .f-accueil .gs--accordeon .gs-pilier-tete{ padding-top:24px; padding-bottom:24px; }
  .f-accueil .gs--accordeon .gs-pied{ margin-bottom:24px; }
  .f-accueil .gs-cellule dd, .f-accueil .gs-pied-note{ line-height:1.5; }
  .f-accueil .gs-entete{ margin-bottom:48px; }
  .f-accueil .gs-conclusion{ margin-top:48px; line-height:1.4; }
}