/* =========================================================================
   ARTIS VALORISATION, REFONTE : LE RAPPORT INTERACTIF DE LA DEMONSTRATION (rapport-vitrine.css)
   Le lecteur d'extraits du rapport (onglets, fleches, planche) de l'accueil
   et des trois pages d'offre. Apres socle.css et scene.css (et accueil.css
   sur l'accueil). Les planches elles-memes sont dans planches.css, chargee
   par planches.js dans leur racine d'ombre.
   Installee le 30/09/2026 depuis l'essai g-rapport.css, sans changement
   de regle ; les noms de fichiers cites dans les commentaires suivent.
   Reference du systeme : REFONTE-GABARIT.md.
   ------------------------------------------------------------------------- */

/* =========================================================================
   ESSAI G. LE RAPPORT INTERACTIF DE LA DEMONSTRATION
   Se pose apres socle.css et scene.css, dont il reprend les jetons (verre, textes
   attenues, rayons, pastilles). Le grand panneau de verre garde sa taille ;
   dans le cadre #100f14, la planche est plus petite qu'a l'essai F et les
   dix extraits se choisissent par onglets.
   Retouche finale (jury du 29/09) : la planche mesurait 920 x 809 a 957 px a
   1440 et debordait d'un ecran de 900. Sa largeur est bornee par
   --g-r-planche (720 px, moins sur un ecran bas) : onglets, fleches et
   planche tiennent ensemble dans la fenetre. La colonne des
   onglets et la planche se centrent dans le cadre, qui garde sa taille.
   Ces regles et la legende sont bornees a l'accueil (.g-rapport--accueil) :
   les pages 990 et sur devis, qui chargent aussi cette feuille, ne changent pas.
   Classes g-rapport-* seulement ; rien ne sort de la section.
   ------------------------------------------------------------------------- */

.g-rapport{
  /* Clarte (30/09/2026) : le panneau et le cadre sont clairs (socle.css et scene.css) ;
     l'accent passe du bleu clair (2,1:1 sur le papier) au bleu Klein. */
  --g-r-accent: var(--g-klein, #002FA7);
  --g-r-colonne: 300px;                    /* liste des onglets a l'ordinateur */
}
.g-rapport--accueil{
  --g-r-colonne: 320px;
  /* Largeur de la planche : 720 px au plus ; sur un ecran bas, ce que laisse
     la hauteur (barre du site 96, barre des fleches 60, marge 8), la planche la plus
     haute (10) faisant 1,05 fois sa largeur (mesure), plus 2 % de marge. Jamais sous 640 px : en
     dessous, le texte des planches reduites passerait sous 9 px.
     (rapport-vitrine.js dessine les planches a 900 px et les reduit a cette
     largeur, sauf au telephone.) */
  --g-r-planche: clamp(640px, calc((100vh - 164px) / 1.075), 720px);
  --g-r-courbe: cubic-bezier(.23, 1, .32, 1);
}

/* --- 1. Le cadre du produit ---------------------------------------------------- */
.g-rapport-cadre{ padding:22px 22px 28px; overflow:visible; }   /* sans quoi la liste collante ne colle pas */
.g-rapport-tete{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:24px; row-gap:6px;
  padding:0 0 22px; color:var(--f-texte);
}
.g-rapport-sur{ flex-basis:100%; font-size:12px; line-height:1; color:var(--f-attenue-50); }
.g-rapport-titre{ font-size:20px; line-height:1.2; font-weight:var(--f-g-texte); letter-spacing:var(--f-serre); }
.g-rapport-note{ margin-left:auto; font-size:12px; line-height:1; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--f-attenue-50); }

.g-rapport-corps{
  display:grid; grid-template-columns:var(--g-r-colonne) minmax(0, 1fr);
  column-gap:32px; align-items:start;
}
.g-rapport--accueil .g-rapport-corps{
  grid-template-columns:var(--g-r-colonne) minmax(0, var(--g-r-planche));
  justify-content:center; column-gap:56px;
}

/* --- 2. Les onglets : une colonne, numero et titre ---------------------------- */
.g-rapport-onglets{
  display:flex; flex-direction:column; gap:4px;
  position:sticky; top:96px;             /* sous la barre de 60 px et ses 20 px */
}
.g-rapport-onglet{
  display:grid; grid-template-columns:28px minmax(0, 1fr); column-gap:10px; align-items:baseline;
  width:100%; min-height:48px; margin:0; padding:13px 14px 13px 12px;
  border:0; border-radius:var(--f-r-bouton); background:transparent;
  color:var(--f-attenue-70); font:inherit; font-size:16px; line-height:1.3; letter-spacing:-.01em;
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--g-r-courbe), color .2s var(--g-r-courbe);
}
.g-rapport-no{
  font-size:12px; line-height:1; font-weight:500; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--f-attenue-50);
  transition:color .2s var(--g-r-courbe);
}
.g-rapport-nom{ text-wrap:pretty; }
@media (hover:hover){
  .g-rapport-onglet:hover{ background:rgba(11,29,54,.05); color:var(--f-texte); }
}
/* L'extrait courant : une bulle blanche relevee, un filet Klein a gauche */
.g-rapport-onglet[aria-selected="true"]{ background:var(--f-blanc); color:var(--g-encre, #0B1D36); font-weight:500;
  box-shadow:inset 3px 0 0 var(--g-klein, #002FA7), 0 1px 2px rgba(11,29,54,.08), 0 6px 18px rgba(11,29,54,.08); }
.g-rapport-onglet[aria-selected="true"] .g-rapport-no{ color:var(--g-klein, #002FA7); }
.g-rapport-onglet:active{ transform:scale(.98); }
.g-rapport :focus-visible{ outline:2px solid var(--g-klein, #002FA7); outline-offset:2px; }
.g-rapport-onglet[aria-selected="true"]:focus-visible{ outline-color:var(--g-r-accent); }

/* --- 3. La barre au-dessus de la planche --------------------------------------
   Le compteur « Extrait n sur N, page p du rapport » en est retire
   (critique de Raphael du 02/10/2026) : l'onglet courant dit deja le rang.
   A l'ordinateur, la barre ne porte plus que les fleches, a droite, au
   meme endroit : la planche ne bouge pas (la barre tenait deja ses 44 px
   par les fleches). Sous 1100 px, le titre de l'extrait courant reste seul
   a gauche, centre sur les fleches, sans la marge qui le separait du
   compteur. */
.g-rapport-vue{ min-width:0; }
.g-rapport-barre{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 16px;
}
.g-rapport-repere{ min-width:0; }
.g-rapport-courant{ display:none; margin:0; font-size:18px; line-height:1.25; color:var(--f-texte); text-wrap:balance; }
.g-rapport-fleches{ display:flex; gap:8px; flex:none; }
.g-rapport-fleche{
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--f-blanc); color:var(--g-encre, #0B1D36); box-shadow:inset 0 0 0 1px rgba(11,29,54,.14);
  transition:background-color .2s var(--g-r-courbe), opacity .2s var(--g-r-courbe), transform .16s var(--g-r-courbe);
  -webkit-tap-highlight-color:transparent;
}
.g-rapport-fleche svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){ .g-rapport-fleche:hover{ background:#e8eefb; } }
.g-rapport-fleche:active{ transform:scale(.94); }
.g-rapport-fleche[disabled]{ opacity:.3; cursor:default; transform:none; }

/* --- 4. La scene : l'image d'attente, puis les vraies planches --------------- */
.g-rapport-scene{ position:relative; overflow:hidden; border-radius:22px; }
.g-rapport--lisse .g-rapport-scene{ transition:height .32s var(--g-r-courbe); }
.g-rapport-affiche{ display:block; width:100%; height:auto; border-radius:22px; }
/* L'hote des planches : leur racine d'ombre y est montee par planches.js */
.g-rapport-vif{
  display:block; position:absolute; top:0; left:0; width:100%; margin:0; padding:0;
  opacity:0; pointer-events:none; visibility:hidden;
}
.g-rapport--pret .g-rapport-affiche{ display:none; }
/* DM Sans (30/09/2026) : tant que les feuilles de la racine d'ombre ne sont
   pas chargees, les planches s'y dessinent sans style, et <i id="dkProg">
   en italique : WebKit telechargeait la face italique (40 Ko) pour ce seul
   instant. Avant --pret, l'hote n'est donc pas dessine du tout. Mesure
   WebKit : hauteurs de scene, de planche et de page identiques. */
.g-rapport:not(.g-rapport--pret) .g-rapport-vif{ content-visibility:hidden; }
.g-rapport--pret .g-rapport-vif{ opacity:1; pointer-events:auto; visibility:visible; }
.g-rapport--pret.g-rapport--lisse .g-rapport-vif{ transition:opacity .24s var(--g-r-courbe); }
/* L'image s'efface quand les planches sont la ; le bas de la scene suit leur hauteur. */

.g-rapport-avert{
  margin:16px 0 0; max-width:720px; font-size:16px; line-height:1.45;
  color:var(--f-attenue-50); text-wrap:pretty;
}
/* La legende de l'extrait courant (retouche finale : elle remplace
   l'avertissement de simulation, repris sous chaque planche hors contexte). */
.g-rapport-legende{ margin:18px 0 0; max-width:640px; }
.g-rapport-legende-sur{
  margin:0 0 6px; font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--g-r-accent);
}
.g-rapport-legende-texte{ margin:0; font-size:16px; line-height:1.5; color:var(--f-attenue-70); text-wrap:pretty; }

/* Sans script : l'extrait 1 en image, ni onglets ni fleches (le lien
   « Consulter un exemple de rapport » du panneau mene aux dix). */
.g-rapport:not(.g-rapport--vivant) .g-rapport-onglets,
.g-rapport:not(.g-rapport--vivant) .g-rapport-barre,
.g-rapport:not(.g-rapport--vivant) .g-rapport-vif,
.g-rapport:not(.g-rapport--vivant) .g-rapport-avert{ display:none; }
.g-rapport:not(.g-rapport--vivant) .g-rapport-corps{ grid-template-columns:minmax(0, 1fr); }
.g-rapport--accueil:not(.g-rapport--vivant) .g-rapport-corps{ grid-template-columns:minmax(0, var(--g-r-planche)); }
/* L'avertissement parle de la simulation : il attend les vraies planches. */
.g-rapport:not(.g-rapport--pret) .g-rapport-avert{ display:none; }

/* --- 5. Tablette : les onglets passent en rangee de numeros ------------------ */
@media (max-width: 1100px){
  .g-rapport-corps{ grid-template-columns:minmax(0, 1fr); row-gap:20px; }
  /* Accueil : onglets, fleches et planche dans la meme colonne, bornee et centree. */
  .g-rapport--accueil .g-rapport-corps{ grid-template-columns:minmax(0, 1fr); max-width:var(--g-r-planche); margin-inline:auto; }
  .g-rapport-onglets{
    position:static; flex-direction:row; flex-wrap:wrap; gap:6px;
  }
  .g-rapport-onglet{
    width:auto; flex:1 1 0; min-width:44px; min-height:44px; padding:0;
    display:grid; place-items:center; grid-template-columns:none;
    background:var(--f-blanc); box-shadow:inset 0 0 0 1px rgba(11,29,54,.12); font-size:16px;
  }
  .g-rapport-onglet .g-rapport-no{ font-size:16px; letter-spacing:0; color:inherit; }
  /* En rangee de numeros : l'extrait courant a l'encre, chiffre blanc */
  .g-rapport-onglet[aria-selected="true"]{ background:var(--g-encre, #0B1D36); color:var(--f-blanc); box-shadow:none; }
  .g-rapport-onglet[aria-selected="true"] .g-rapport-no{ color:var(--f-blanc); }
  /* Le titre de l'onglet reste lu par les lecteurs d'ecran */
  .g-rapport-onglet .g-rapport-nom{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .g-rapport-courant{ display:block; }
}

/* --- 6. Telephone (393) ------------------------------------------------------- */
@media (max-width: 760px){
  /* Le cadre s'elargit dans le panneau : 12 px gagnes de chaque cote pour la
     planche, rendue a sa largeur reelle, sans echelle. */
  .g-rapport-cadre{ margin-inline:-12px; padding:16px 10px 20px; border-radius:10px; }
  .g-rapport-tete{ padding:0 4px 16px; column-gap:12px; }
  .g-rapport-titre{ font-size:18px; }
  .g-rapport-note{ margin-left:0; flex-basis:100%; }
  .g-rapport-onglets{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
  .g-rapport-onglet{ min-height:44px; }
  .g-rapport-barre{ margin-bottom:12px; padding-inline:4px; }
  .g-rapport-courant{ font-size:17px; }
  .g-rapport-scene, .g-rapport-affiche{ border-radius:14px; }
  .g-rapport-avert{ padding-inline:4px; }
  .g-rapport--accueil .g-rapport-corps{ max-width:none; }
  .g-rapport-legende{ padding-inline:4px; }
}

/* --- 7. Accueil au telephone : sans les dix onglets (09/10/2026) ---------
   Audit telephone du 8 octobre 2026 (lot 1, constats 3 et 187). La
   premiere passe gardait les dix onglets numerotes de l'accueil, 59 x 44
   px en deux rangees de cinq (94 px), et les ecartait de 8 px. La seconde
   passe (delegation de Raphael, meme jour) les masque : dix numeros sans
   leur nom ne disaient pas ce qu'ils ouvrent. Restent le titre de
   l'extrait courant et ses deux fleches de 44 px, la planche vivante, que
   l'on feuillette aussi au doigt (son rail, dans planches.js), et sa
   legende. La liste reste dans la page, et le panneau garde son nom
   (aria-labelledby vers l'onglet courant). Le chapo de la demonstration
   est masque par accueil.css (section 17). Les pages d'offre, qui
   chargent aussi cette feuille, ne changent pas.
   Le masquage ne vaut qu'a l'ecran (screen, reprise du meme jour) : une
   page imprimee depuis un ordinateur, sur A4 ou Letter, a une boite de
   718 a 739 px et passait sous ce seuil. Elle garde ses dix onglets, avec
   les ecarts de la premiere passe, qui restent pour elle seule : 8 px, et
   6 px entre colonnes sous 336 px. */
@media (max-width: 760px){
  .g-rapport--accueil .g-rapport-onglets{ gap:8px; }
}
@media (max-width: 335.98px){
  .g-rapport--accueil .g-rapport-onglets{ column-gap:6px; }
}
@media screen and (max-width: 760px){
  .g-rapport--accueil .g-rapport-onglets{ display:none; }
}

/* --- 8. Accueil au telephone : un cadre de moins (10/10/2026) -----------
   Audit UI/UX du 9 octobre, point A09. La planche se lisait dans quatre
   surfaces emboitees : le panneau blanc de la demonstration (20 px de
   marge interne), le cadre teinte du lecteur (pose 12 px dans cette
   marge, 10 px de marge interne), la planche blanche (18 px) et ses
   propres blocs. Sa colonne de texte faisait 276 px a 390 px de large et
   206 px a 320, pour 350 et 280 px de colonne dans le reste de la page.
   Le cadre teinte n'est plus une boite dans le panneau : il en devient le
   bas, d'un bord a l'autre et jusqu'au bord inferieur (les coins du bas
   sont ceux du panneau), et la planche y prend toute la largeur du
   panneau, sans marge de cadre. Le nom du rapport, le titre de l'extrait,
   ses deux fleches et la legende gardent la colonne du panneau (20 px du
   bord). La colonne de texte de la planche passe a 312 px a 390 px et a
   242 px a 320 (36 px de plus), et son texte s'aligne sur celui du
   panneau. Rien d'autre ne change : les fleches, le balayage au doigt,
   la planche et sa feuille, la legende. Ecran seul, accueil seul : les
   pages d'offre et le rapport d'exemple, qui chargent cette feuille, ne
   changent pas, ni l'impression. */
@media screen and (max-width: 760px){
  .g-rapport--accueil .g-rapport-cadre{
    margin:0 calc(-1 * var(--f-pad-panneau, 20px)) calc(-1 * var(--f-pad-panneau, 20px));
    padding:16px 0 20px; border-radius:0 0 var(--f-r-bulle, 16px) var(--f-r-bulle, 16px);
  }
  .g-rapport--accueil .g-rapport-tete,
  .g-rapport--accueil .g-rapport-barre,
  .g-rapport--accueil .g-rapport-legende{ padding-inline:var(--f-pad-panneau, 20px); }
  .g-rapport--accueil .g-rapport-scene{ border-radius:0; }
}

@media (prefers-reduced-motion: reduce){
  .g-rapport-scene, .g-rapport-vif, .g-rapport-onglet, .g-rapport-fleche, .g-rapport-no{ transition:none !important; }
  .g-rapport-onglet:active, .g-rapport-fleche:active{ transform:none; }
}

/* --- 9. Accueil au telephone : encore un peu d'air (10/10/2026) ---------
   Demande de Raphael du 10/10/2026 (« encore un petit peu » d'air,
   accueil.css 19). Le panneau de la demonstration passe a 24 px de marge
   interne (--f-pad-panneau, 20 avant) : le cadre de la section 8 le suit
   dans ses marges negatives, la planche garde toute la largeur du
   panneau, et sa largeur ne change pas (la reserve de
   rapport-vitrine.js reste juste). Le nom du rapport, le titre de
   l'extrait, ses fleches et la legende suivent la nouvelle colonne, a
   24 px du bord. Le cadre prend 20 px au-dessus du nom et 24 sous la
   legende (16 et 20 avant). Ecran seul, accueil seul. */
@media screen and (max-width: 760px){
  .f-accueil .g-rapport--accueil .g-rapport-cadre{ padding:20px 0 24px; }
}