/* =========================================================================
   ARTIS VALORISATION, REFONTE : FAMILLE LE RAPPORT D'EXEMPLE (p-rapport.css)
   Pages : exemple-de-rapport.html.
   Reference du systeme : REFONTE-GABARIT.md. Commentaires sans accents.

   Ordre de chargement propre a cette page : socle.css, pages.css,
   rapport-vitrine.css, p-rapport.css, puis rapport-design.css. La feuille de
   famille passe ici AVANT rapport-design.css (et non en dernier) : elle
   porte la feuille propre des planches, que rapport-design.css surcharge
   depuis le 26/09, exactement comme dans la page publiee (le <style> de la
   tete, puis rapport-design.css). Les rares regles de cette feuille qui
   doivent battre rapport-design.css le font par la specificite (prefixe
   .r-planches reel), jamais par l'ordre.

   Le jeu de planches est celui de la page publiee (balisage, moteur
   MONTVALIER, rapport-design.js), laisse dans la page et non monte dans une
   racine d'ombre comme a l'accueil : les dix planches restent dans le HTML
   (lues sans script, indexees). Pour qu'elles se dessinent comme celles de
   l'accueil (planches.css), leurs regles sont reprises ici, bornees au
   lecteur par :where(.r-planches), qui borne sans rien peser :
     sections 1 et 2  le sous-ensemble d'artis.css dont les planches ont
                      besoin (section 1 de planches.css), :host et .g-corps
                      devenus .r-planches ;
     section 3        la feuille propre de la page (section 2 de
                      planches.css), reprise telle quelle ;
     section 4        l'habillage (section 3 de planches.css).
   Le lecteur autour (onglets, compteur, fleches, legende) est le composant
   de l'accueil, rapport-vitrine.css, pose sur la bande marine (section 6).
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. LE CADRE DES PLANCHES : JETONS ET CORPS
   Les jetons de planches.css (:host), et le corps de la racine d'ombre
   (.g-corps) : .r-planches remet a zero ce que la page transmet par
   heritage (approche de -0,03 em, blanc du bleu, corps de 16 px), comme
   :host{ all:initial } le faisait a l'accueil.
   ------------------------------------------------------------------------- */
.r-planches{
  --paper:#F6F7FA; --paper-deep:#ECEFF4; --white:#FFFFFF; --navy:#0E1E3C; --navy-deep:#09152A;
  --navy-soft:#1B2C52; --klein:#002FA7; --klein-hover:#0B3FC4; --klein-lit:#3D5AFF;
  --klein-wash:rgba(0,47,167,.06); --klein-muted:rgba(0,47,167,.16); --azur:#5B8DD1; --azur-ink:#3F6099;
  --ink:#0B1D36; --ink-soft:#4A5A70; --ink-mute:#5E6D84; --snow:#EDF0F5; --snow-soft:#9FB1C9;
  --rule:rgba(11,29,54,.12); --rule-mid:rgba(11,29,54,.22); --rule-strong:#7A89A0;
  --rule-dark:rgba(237,240,245,.16); --rule-dark-strong:rgba(237,240,245,.34);
  --police:"DM Sans","DM Sans repli",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:var(--police); --body:var(--police); --mono:var(--police);
  --t-h3:clamp(1.2rem,2.1vw,1.55rem); --t-body:1.125rem; --t-small:.875rem; --t-label:.75rem;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.25rem; --s5:3.5rem; --s6:5rem;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.30,1); --dur:.3s; --dur-fast:.2s;
  --r-controle:10px; --r-panneau:16px; --r-image:16px; --r-pilule:999px;
}
.r-planches{
  display:block; margin:0; padding:0; min-width:0;
  color:var(--ink); font-family:var(--body); font-size:var(--t-body); font-weight:400; line-height:1.62;
  letter-spacing:normal; word-spacing:normal; text-transform:none; text-align:start;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"kern";
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%;
}

/* =========================================================================
   2. LE SOUS-ENSEMBLE D'ARTIS.CSS DONT LES PLANCHES ONT BESOIN
   Titres, paragraphes, le bouton de la planche 08, la justification (avec
   les limites de cesure de WebKit d'artis.css, section 55 bis) et les
   planches resserrees au telephone (artis.css, sections 58 et 59 :
   demande de Raphael du 19/09, chaque planche a la hauteur de l'ecran, en
   retirant a chacune son bloc le moins utile). Le focus des planches porte
   le prefixe reel : il doit battre .k-page :focus-visible (blanc) et
   .g-rapport :focus-visible, qui ne l'atteignaient pas dans l'ombre.
   ------------------------------------------------------------------------- */
:where(.r-planches) :is(img, svg){ max-width:100%; height:auto; display:block; }
.r-planches ::selection{ background:var(--klein); color:#fff; }
.r-planches :focus-visible{ outline:2px solid var(--klein); outline-offset:3px; border-radius:2px; }
:where(.r-planches) :is(h1, h2, h3, h4){ font-family:var(--display); font-weight:500; line-height:1.1; margin:0; color:var(--ink); text-wrap:pretty; }
:where(.r-planches) h3{ font-family:var(--body); font-weight:500; font-size:var(--t-h3); line-height:1.28; letter-spacing:-0.008em; }
:where(.r-planches) p{ margin:0 0 var(--s2); }
:where(.r-planches) p:last-child{ margin-bottom:0; }
:where(.r-planches) :is(button, input, select, textarea, optgroup){ font-family:inherit; }
:where(.r-planches) :is(p, li, dd, figcaption){ text-wrap:pretty; }
:where(.r-planches .deck) :where(p, li, dd, figcaption){ max-width:30em; }

/* Le bouton de planche (Ponderation du rapport, planche 08) */
:where(.r-planches) .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--body); font-size:.9375rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  text-align:center; padding:.95rem 1.5rem; border-radius:var(--r-controle); border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform .08s var(--ease);
}
:where(.r-planches) .btn:disabled{ opacity:.42; cursor:not-allowed; }
:where(.r-planches) .btn:active:not(:disabled){ transform:translateY(1px); }
:where(.r-planches) .btn.btn-secondaire{ background:transparent; color:var(--ink); border-color:rgba(11,29,54,.28); }
:where(.r-planches) .btn-secondaire:hover:not(:disabled){ border-color:var(--ink); background:rgba(11,29,54,.04); }
:where(.r-planches) .btn:focus-visible{ outline:2px solid var(--klein); outline-offset:3px; }
:where(.r-planches) .btn-sm{ padding:.7rem 1.1rem; font-size:.8125rem; }
@media (max-width:480px){
  :where(.r-planches) .btn{ letter-spacing:.03em; padding-inline:1.15rem; line-height:1.2; }
}
@media (pointer:coarse){
  :where(.r-planches) .btn{ min-height:44px; }
}

/* La justification : le texte courant des planches, jamais les etiquettes,
   les cellules, l'en-tete ni le pied. */
:where(.r-planches) .justif p, :where(.r-planches) .justif li,
:where(.r-planches) .justif dd, :where(.r-planches) .justif blockquote{
  text-align:justify; text-align-last:left;
  -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:5 2 3; text-wrap:pretty;
}
:where(.r-planches) .justif .btn, :where(.r-planches) .justif td, :where(.r-planches) .justif th,
:where(.r-planches) .justif .pl-sur, :where(.r-planches) .justif .pl-tete, :where(.r-planches) .justif .pl-pied,
:where(.r-planches) .justif figcaption, :where(.r-planches) .justif .legende, :where(.r-planches) .justif .note{
  text-align:left; text-align-last:left; -webkit-hyphens:manual; hyphens:manual;
}
:where(.r-planches) .justif .deck .pl-rep, :where(.r-planches) .justif .deck .pl.marine .pl-rep,
:where(.r-planches) .justif .deck .pl-p, :where(.r-planches) .justif .deck .pl-bandeau p,
:where(.r-planches) .justif .deck .pl-bandeau.klein p{
  text-align:justify; text-align-last:left;
  -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3;
}
@supports (-webkit-hyphenate-limit-after:3){
  :where(.r-planches) .justif p, :where(.r-planches) .justif li,
  :where(.r-planches) .justif dd, :where(.r-planches) .justif blockquote{
    text-wrap:wrap; -webkit-hyphenate-limit-before:2; -webkit-hyphenate-limit-after:3;
  }
  :where(.r-planches) .justif .deck .pl-rep, :where(.r-planches) .justif .deck .pl.marine .pl-rep,
  :where(.r-planches) .justif .deck .pl-p, :where(.r-planches) .justif .deck .pl-bandeau p,
  :where(.r-planches) .justif .deck .pl-bandeau.klein p{
    text-wrap:wrap; -webkit-hyphenate-limit-before:3; -webkit-hyphenate-limit-after:3;
  }
}

/* Le telephone : les planches resserrees (artis.css, section 58). Le
   bandeau de conclusion et les paragraphes du corps n'y sont plus retires
   (brief du 04/10/2026, UI02) : ils portent la conclusion chiffree et
   l'explication de chaque extrait. */
@media (max-width:620px){
  :where(.r-planches) .justif .deck .pl{ padding:20px 18px 16px; min-height:0; }
  :where(.r-planches) .justif .deck .pl::before{ left:18px; }
  :where(.r-planches) .justif .deck .pl-titre{ font-size:22px; margin:12px 0 8px; max-width:none; }
  :where(.r-planches) .justif .deck .pl-rep{ font-size:13.5px; line-height:1.55; margin-top:9px; }
  :where(.r-planches) .justif .deck .pl-st{ margin-bottom:8px; }
  :where(.r-planches) .justif .deck .pl-tete{ margin-bottom:0; }
  :where(.r-planches) .justif .deck .pl-corps{ margin:14px 0 10px; gap:14px; }
  :where(.r-planches) .justif .deck .pl-corps > div + div{ padding-top:12px; }
  :where(.r-planches) .justif .deck .pl-t{ font-size:12.5px; line-height:1.45; }
  :where(.r-planches) .justif .deck .pl-t td, :where(.r-planches) .justif .deck .pl-t th,
  :where(.r-planches) .justif .deck .pl-t.dense td, :where(.r-planches) .justif .deck .pl-t.dense th,
  :where(.r-planches) .justif .deck .pl-t.demi td, :where(.r-planches) .justif .deck .pl-t.demi th{ padding:5px 0; }
  :where(.r-planches) .justif .deck .pl-t.demi td, :where(.r-planches) .justif .deck .pl-t.demi th{ padding:4px 0; }
  :where(.r-planches) .justif .deck .pl-t tr.tot td{ padding-top:8px; }
  :where(.r-planches) .justif .deck .pl-note{ padding:10px 12px; margin-top:14px; }
  :where(.r-planches) .justif .deck .pl-seg{ margin-top:10px; }
  :where(.r-planches) .justif .deck .pl-cur{ margin-top:12px; padding-top:11px; }
  :where(.r-planches) .justif .deck .curs-grille{ gap:10px; }
  :where(.r-planches) .justif .deck .curs-grille .pl-cur{ margin-top:0; padding-top:8px; }
  :where(.r-planches) .justif .deck .pl-cles{ gap:10px; }
  :where(.r-planches) .justif .deck .pl-cles > *{ padding-bottom:10px; }
  :where(.r-planches) .justif .deck .rd-chart-scroll{ max-height:none; }
  :where(.r-planches) .justif .deck .pl-st.suite{ margin-top:12px; }
  :where(.r-planches) .justif .deck .pl-pied{ margin-top:11px; padding-top:9px; gap:10px; }
}

/* Le telephone : jusqu'au 04/10/2026, chaque planche y perdait son bloc
   le moins utile (artis.css, section 59) : reperes des planches 01 a 03,
   tableaux des flux et de la construction de la valeur (04), sensibilite
   du taux (05), mediane et composition de l'echantillon (06), EBITDA de
   reference (07), multiples implicites, methodes ecartees et retour a la
   ponderation (08), grands chiffres des leviers (10). display:none les
   retirait aussi des lecteurs d'ecran. Brief du 04/10/2026 (UI02) : tout
   reste, et les flux du plan de la planche 04 se replient sous « Voir les
   flux du plan » (section 12). Seul le titre courant du pied se reduit a
   « donnees fictives ». */
@media (max-width:620px){
  :where(.r-planches) .justif .deck .pl-pied .rh > span:not(:last-child){ display:none; }
  :where(.r-planches) .justif .deck .curs-grille{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:14px; }
  :where(.r-planches) .justif .deck [data-lev]{ gap:8px; }
  :where(.r-planches) .justif .deck .pl-lev{ padding:9px 12px; }
}

/* Mouvement reduit, dans les planches */
@media (prefers-reduced-motion:reduce){
  :where(.r-planches) *, :where(.r-planches) ::before, :where(.r-planches) ::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important;
  }
}

/* =========================================================================
   3. LES PLANCHES : LA FEUILLE PROPRE DE LA PAGE
   Le <style> de la tete de la page publiee (section 2 de planches.css),
   repris regle pour regle, commentaires compris, chaque selecteur borne
   par :where(.r-planches). Retires : la visionneuse d'avant (largeur de
   1060 px, barre de progression), la barre de telechargement et le
   sommaire en texte, redessines plus bas en bulles, et l'avertissement,
   pose sous la legende (section 7).
   ------------------------------------------------------------------------- */
/* =========================================================================
   LES PLANCHES DU RAPPORT MONTVALIER
   Format A4 paysage, 1,414 : 1, et la grammaire de page du document :
   filet d'en-tete, etiquette de section, titre, phrase-reponse en
   Klein, colonnes separees d'un filet, bandeau de conclusion en pied avec le
   chiffre a droite.

   Le piege du format : une A4 paysage reduite donnerait un corps a 8px. La
   planche cite la page, elle ne la photographie pas. Rien sous 12px.
   ------------------------------------------------------------------------- */

:where(.r-planches) .deck{position:relative}

/* POINT 4. Le rail. Les dix planches sont cote a cote et se feuillettent au
   doigt, a la souris et au clavier. Tout l'accrochage est en CSS : sans
   JavaScript, le rail reste un defilement horizontal accroche, avec ses dix
   planches lisibles.

   scroll-behavior reste a auto : le lissage est demande coup par coup en
   JavaScript, apres lecture de prefers-reduced-motion, qu'un
   behavior:'smooth' pose en CSS ignorerait. Le detail est commente avec la
   fonction glisserVers.

   overscroll-behavior-x:contain neutralise le geste de retour arriere du
   navigateur. La barre de defilement est masquee : la position est dite par
   le compteur et par la barre de progression, qui la disent mieux. */
:where(.r-planches) .deck-scene{
  width:100%;
  position:relative;
  display:flex; gap:var(--s3);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scroll-behavior:auto;
  /* de quoi laisser respirer les contours de focus, coupes sinon par
     overflow-y:hidden : .pt:focus-visible porte un outline-offset de 2 px */
  padding-block:4px;
  scrollbar-width:none;
}
:where(.r-planches) .deck-scene::-webkit-scrollbar{display:none}

/* L'enveloppe du rail porte sa largeur et ses deux fleches. Les fleches
   sont legeres a dessein, demande de Raphael : un chevron d'un trait et
   demi, a un tiers d'encre, qui se revele au survol et au focus. Elles
   remplacent les deux rangees de boutons Extrait precedent / suivant. */
:where(.r-planches) .deck-rail{position:relative; width:min(100%,1000px); margin-inline:auto}
:where(.r-planches) .deck-fleche{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--ink); opacity:.32; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .2s var(--ease), background .2s var(--ease);
}
:where(.r-planches) .deck-fleche--prec{left:-.35rem}
:where(.r-planches) .deck-fleche--suiv{right:-.35rem}
:where(.r-planches) .deck-fleche:hover, :where(.r-planches) .deck-fleche:focus-visible{opacity:1; background:rgba(246,247,250,.85)}
:where(.r-planches) .deck-fleche:focus-visible{outline:2px solid var(--klein); outline-offset:2px}
:where(.r-planches) .deck-fleche[disabled]{opacity:0; pointer-events:none}
@media (min-width:1080px){
  :where(.r-planches) .deck-fleche--prec{left:-2.6rem}
  :where(.r-planches) .deck-fleche--suiv{right:-2.6rem}
}

/* La cellule porte la requete de conteneur : une regle ne peut pas
   interroger le conteneur qu'elle definit, et le bloc @container plus bas
   agit sur .pl elle-meme. Sans cet etage, la requete mesurerait le rail et
   basculerait en colonne unique au mauvais moment. */
:where(.r-planches) .pl-cellule{
  flex:0 0 100%;
  min-width:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  container-type:inline-size;
}

:where(.r-planches) .pl{
  position:relative;
  aspect-ratio:1.414 / 1;
  background:var(--white); border:1px solid var(--rule);
  padding:clamp(1.1rem,2.4cqi,2rem) clamp(1.2rem,2.8cqi,2.4rem);
  display:flex; flex-direction:column;
  height:100%;
  overflow:hidden;
  /* Une feuille posee, pas un aplat decoupe : un arrondi qui se sent sans se
     voir, une ombre large et tres diluee. Sans grain depuis le 04/10/2026
     (demande de Raphael : « il y a des petits picots sur le fond des
     pages ») : le bruit SVG (feTurbulence, --grain) pose en ::after sur
     chaque planche est retire. */
  border-radius:var(--r-image,12px);
  box-shadow:0 1px 1px rgba(11,29,54,.04), 0 20px 44px -24px rgba(11,29,54,.22);
}
:where(.r-planches) .pl > *{position:relative; z-index:1}
/* En colonne souple : c'est le corps qui absorbe le blanc, jamais la
   phrase-reponse. Le nombre d'elements varie d'une planche a l'autre, une
   grille a lignes fixes se serait donc trompee de rangee. */
/* POINT 4. .on ne pilote plus l'affichage, les dix planches sont dans le
   rail. Elle ne marque plus que la planche courante, pour l'etat des
   commandes. Le voisin est legerement retire pour que l'oeil sache ou il
   est sans que le reste disparaisse. */
:where(.r-planches) .pl-cellule:not(.on) .pl{opacity:.55; transition:opacity .35s var(--ease)}
:where(.r-planches) .pl-cellule.on .pl{opacity:1}
:where(.r-planches) .pl-corps{flex:1 1 auto}
:where(.r-planches) .pl-bandeau, :where(.r-planches) .pl-pied{flex:0 0 auto}

/* --- L'en-tete -------------------------------------------------------- */
:where(.r-planches) .pl-tete{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-bottom:.45rem; border-bottom:1px solid var(--rule);
}
:where(.r-planches) .pl-sect, :where(.r-planches) .pl-num{
  font-family:var(--mono); font-size:max(.72rem,12px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
}
:where(.r-planches) .pl-num{color:var(--azur-ink)}
:where(.r-planches) .pl-num.recalc{color:var(--klein); font-weight:600}

/* --- Le titre et la phrase-reponse ------------------------------------ */
:where(.r-planches) .pl-titre{
  font-family:var(--display); font-size:clamp(1.35rem,3.1cqi,2.1rem); line-height:1.14;
  color:var(--ink); margin:clamp(.5rem,1.2cqi,.85rem) 0 0;
  font-optical-sizing:none; font-variation-settings:"opsz" 22;
}
:where(.r-planches) .pl-rep{
  font-family:var(--display); font-size:clamp(.95rem,1.75cqi,1.18rem); line-height:1.4;
  color:var(--klein); margin:.5rem 0 0; max-width:62ch;
  font-optical-sizing:none; font-variation-settings:"opsz" 16;
}

/* --- Le corps, en colonnes -------------------------------------------- */
:where(.r-planches) .pl-corps{
  display:grid; gap:clamp(.9rem,2.2cqi,1.8rem);
  margin-top:clamp(.55rem,1.2cqi,.95rem); min-height:0; align-content:start;
}
:where(.r-planches) .pl-corps.c2{grid-template-columns:1fr 1fr}
:where(.r-planches) .pl-corps.c3{grid-template-columns:1fr 1fr 1fr}
:where(.r-planches) .pl-corps.c21{grid-template-columns:2fr 1fr}
:where(.r-planches) .pl-corps.c12{grid-template-columns:1fr 2fr}
:where(.r-planches) .pl-corps > * + *{border-left:1px solid var(--rule); padding-left:clamp(.9rem,2.2cqi,1.8rem)}
:where(.r-planches) .pl-corps > div{display:flex; flex-direction:column; min-width:0}
:where(.r-planches) .pl-note{margin-top:auto}

:where(.r-planches) .pl-st{
  font-family:var(--mono); font-size:max(.72rem,12px); letter-spacing:.13em;
  text-transform:uppercase; color:var(--klein); display:block; margin-bottom:.35rem;
}
/* Une seconde etiquette dans la meme colonne : un intervalle, pas un saut. */
:where(.r-planches) .pl-st.suite{margin-top:.75rem}
:where(.r-planches) .pl-p{font-size:max(.9rem,14px); line-height:1.5; color:var(--ink-soft); margin:0 0 .5rem}

/* --- Les tableaux ------------------------------------------------------ */
:where(.r-planches) .pl-t{width:100%; border-collapse:collapse; font-size:max(.88rem,14px)}
/* Les tableaux longs, dix lignes et plus, respirent un cran moins : c'est la
   difference entre une page dense et une page qui deborde. */
:where(.r-planches) .pl-t.dense th, :where(.r-planches) .pl-t.dense td{padding:.1rem 0}
:where(.r-planches) .pl-t.demi th, :where(.r-planches) .pl-t.demi td{padding:.19rem 0}
:where(.r-planches) .pl-t th, :where(.r-planches) .pl-t td{padding:.26rem 0; border-bottom:1px solid var(--rule); text-align:left; vertical-align:baseline}
:where(.r-planches) .pl-t th{
  font-family:var(--mono); font-size:max(.68rem,12px); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-mute); font-weight:500;
}
/* POINT 5. nowrap gardait un montant sur une ligne, ce qui est juste, mais
   la colonne porte aussi des reponses en clair, comme la reference
   methodologique de la planche 01 : elles debordaient de la planche et
   etaient coupees, de 1024 px a 1536 px. Le repli est rendu : un montant est
   trop court pour se replier, une phrase ne l'est pas. */
:where(.r-planches) .pl-t td.n, :where(.r-planches) .pl-t th.n{
  text-align:right; font-variant-numeric:tabular-nums; white-space:normal;
  font-family:var(--mono); font-size:max(.8rem,12.5px);
}
:where(.r-planches) .pl-t td.n .nb, :where(.r-planches) .pl-t th.n .nb{white-space:nowrap}
:where(.r-planches) .pl-t tr.tot td{font-weight:600; color:var(--ink); border-bottom:0; border-top:1px solid var(--rule-strong)}
:where(.r-planches) .pl-t tr.tot td.n{color:var(--klein)}
:where(.r-planches) .pl-t td{color:var(--ink-soft)}
:where(.r-planches) .pl-t td:first-child{color:var(--ink)}

/* --- Les grands chiffres ----------------------------------------------- */
/* Un bouton de planche reste discret : c'est une commande, pas un appel. */
:where(.r-planches) .pl .btn-sm{padding:.34rem .75rem; font-size:max(.75rem,12px); align-self:start}

:where(.r-planches) .pl-cles{display:flex; flex-wrap:wrap; gap:clamp(.85rem,2.5cqi,1.9rem) clamp(1.1rem,3.2cqi,2.5rem)}
/* La synthese, elle, n'a que ses trois chiffres a dire : ils y sont plus grands. */
:where(.r-planches) .pl-cles.grand .v{font-size:clamp(1.9rem,5cqi,3.2rem)}
/* Dans la colonne etroite, les grands chiffres deviennent un registre :
   l'intitule a gauche, le nombre a droite, une ligne par valeur. Plus dense
   qu'un empilement, et le nombre garde sa taille. */
:where(.r-planches) .pl-corps > div:last-child .pl-cles{
  display:block; border-top:1px solid var(--rule);
}
:where(.r-planches) .pl-corps > div:last-child .pl-cle{
  display:flex; align-items:baseline; justify-content:space-between; gap:.7rem;
  padding:.4rem 0; border-bottom:1px solid var(--rule);
}
:where(.r-planches) .pl-corps > div:last-child .pl-cle .v{order:2; font-size:clamp(1.3rem,2.9cqi,1.95rem)}
:where(.r-planches) .pl-corps > div:last-child .pl-cle .k{order:1; margin-top:0; max-width:11em}
:where(.r-planches) .pl.marine .pl-corps > div:last-child .pl-cles{border-top-color:rgba(237,240,245,.14)}
:where(.r-planches) .pl.marine .pl-corps > div:last-child .pl-cle{border-bottom-color:rgba(237,240,245,.14)}
:where(.r-planches) .pl-cle .v{
  font-family:var(--display); font-size:clamp(1.5rem,3.6cqi,2.4rem); line-height:1;
  color:var(--ink); display:block; white-space:nowrap;
  font-optical-sizing:none; font-variation-settings:"opsz" 22;
}
:where(.r-planches) .pl-cle .v em{font-style:normal; font-size:.5em; color:var(--ink-mute); margin-left:.15em}
:where(.r-planches) .pl-cle .k{
  font-family:var(--mono); font-size:max(.68rem,12px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute); display:block; margin-top:.4rem;
}
:where(.r-planches) .pl-cle.klein .v{color:var(--klein)}

/* --- Le bandeau de conclusion ------------------------------------------ */
:where(.r-planches) .pl-bandeau{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  background:var(--ink); color:#fff; padding:clamp(.5rem,1.1cqi,.78rem) clamp(.9rem,2.2cqi,1.4rem);
  margin-top:auto; border-radius:var(--r-controle,4px);
}
:where(.r-planches) .pl-bandeau.klein{background:var(--klein)}
:where(.r-planches) .pl-bandeau p{margin:0; font-size:max(.8rem,12.5px); line-height:1.45; color:rgba(255,255,255,.92)}
:where(.r-planches) .pl-bandeau .chiffre{
  font-family:var(--display); font-size:clamp(1.25rem,2.8cqi,1.8rem); line-height:1;
  white-space:nowrap; font-optical-sizing:none; font-variation-settings:"opsz" 22;
}

/* --- Le pied ----------------------------------------------------------- */
:where(.r-planches) .pl-pied{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--rule); padding-top:.5rem; margin-top:.7rem;
}
:where(.r-planches) .pl-pied .rh{
  font-family:var(--mono); font-size:max(.68rem,12px); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
/* Les segments d'un libelle sont separes par un filet dessine, jamais par
   un caractere de ponctuation. */
:where(.r-planches) .pl-sect span + span::before, :where(.r-planches) .pl-pied .rh span + span::before{
  content:""; display:inline-block; width:1px; height:.76em; margin:0 .6em;
  background:currentColor; opacity:.4; vertical-align:-.03em;
}
:where(.r-planches) .pl-pied .page{
  font-family:var(--display); font-size:max(.95rem,15px); color:var(--ink-mute);
  font-optical-sizing:none; font-variation-settings:"opsz" 22;
}

/* --- Les planches marine ------------------------------------------------
   Trois planches sur dix passent au bleu profond : l'ouverture, la reponse et
   l'horizon. Le fond reprend celui des surfaces marine de la page, couleur
   pleine sous son degrade pour que les controleurs de contraste sachent le
   lire, plus deux lueurs froides tres diluees (sans grain depuis le
   04/10/2026). L'azur y est redefini a sa valeur claire, celle qui tient
   sur le marine. */
:where(.r-planches) .pl.marine{
  background-color:var(--navy);
  background-image:
    radial-gradient(ellipse 92% 62% at 6% -4%, rgba(0,47,167,.34) 0%, rgba(0,47,167,0) 62%),
    radial-gradient(ellipse 74% 58% at 98% 104%, rgba(91,141,209,.18) 0%, rgba(91,141,209,0) 60%),
    linear-gradient(177deg,#0C2141 0%,var(--navy) 46%,#091A31 100%);
  border-color:rgba(237,240,245,.10);
  color:var(--snow);
  --azur:#7FB0E8;
  box-shadow:0 1px 1px rgba(7,20,38,.22), 0 24px 50px -24px rgba(7,20,38,.55);
}

/* Le mot en filigrane, coupe par le bord : le meme geste que la couverture du
   site, a l'echelle de la planche. */
:where(.r-planches) .pl-filigrane{
  position:absolute; right:-.06em; bottom:-.13em;
  font-family:var(--display); font-weight:400; line-height:.74;
  font-size:clamp(6rem,31cqi,14.5rem); letter-spacing:.006em;
  color:transparent; -webkit-text-stroke:1px rgba(127,176,232,.09);
  pointer-events:none; user-select:none; -webkit-user-select:none; white-space:nowrap;
}
@supports not (-webkit-text-stroke:1px #000){
  :where(.r-planches) .pl-filigrane{color:rgba(127,176,232,.03)}
}

:where(.r-planches) .pl.marine .pl-tete{border-bottom-color:rgba(237,240,245,.14)}
:where(.r-planches) .pl.marine .pl-sect, :where(.r-planches) .pl.marine .pl-num{color:rgba(159,177,201,.85)}
:where(.r-planches) .pl.marine .pl-num.recalc{color:var(--klein-lit)}
:where(.r-planches) .pl.marine .pl-titre{color:#fff; font-size:clamp(1.9rem,5cqi,3.4rem)}
:where(.r-planches) .pl.marine .pl-rep{color:var(--azur)}
:where(.r-planches) .pl.marine .pl-p{color:var(--snow-soft)}
:where(.r-planches) .pl.marine .pl-st{color:var(--azur)}
:where(.r-planches) .pl.marine .pl-pied{border-top-color:rgba(237,240,245,.14)}
:where(.r-planches) .pl.marine .pl-pied .rh, :where(.r-planches) .pl.marine .pl-pied .page{color:rgba(159,177,201,.7)}
:where(.r-planches) .pl.marine .pl-corps > * + *{border-left-color:rgba(237,240,245,.14)}

:where(.r-planches) .pl.marine .pl-t td{color:var(--snow-soft)}
:where(.r-planches) .pl.marine .pl-t td:first-child{color:var(--snow)}
:where(.r-planches) .pl.marine .pl-t th{color:rgba(159,177,201,.85)}
:where(.r-planches) .pl.marine .pl-t th, :where(.r-planches) .pl.marine .pl-t td{border-bottom-color:rgba(237,240,245,.13)}
:where(.r-planches) .pl.marine .pl-t tr.tot td{color:#fff; border-top-color:rgba(237,240,245,.30)}
:where(.r-planches) .pl.marine .pl-t tr.tot td.n{color:var(--azur)}
:where(.r-planches) .pl.marine tr.pt-l:hover td, :where(.r-planches) .pl.marine tr.pt-l:focus-within td{background:rgba(237,240,245,.06)}
:where(.r-planches) .pl.marine .pt{text-decoration-color:rgba(127,176,232,.5)}

/* Sur une planche marine, les grands chiffres sont le sujet : ils prennent
   la place que le fond leur laisse. */
:where(.r-planches) .pl.marine .pl-cle .v{color:#fff}
:where(.r-planches) .pl.marine .pl-cle .k{color:rgba(159,177,201,.85)}
:where(.r-planches) .pl.marine .pl-cle .v em{color:var(--snow-soft)}
:where(.r-planches) .pl.marine .pl-cle.klein .v{color:var(--azur)}

/* Le bandeau de conclusion ne peut pas rester marine sur du marine : il
   devient une plaque de verre, sauf la conclusion du rapport qui garde son
   Klein, dans la version lumineuse qui tient sur le fond profond. */
:where(.r-planches) .pl.marine .pl-bandeau{
  background:rgba(237,240,245,.07); border:1px solid rgba(237,240,245,.14);
}
:where(.r-planches) .pl.marine .pl-bandeau p{color:var(--snow-soft)}
:where(.r-planches) .pl.marine .pl-bandeau .chiffre{color:#fff}
/* Sur le marine, un Klein plein alourdit le pied de planche. Un bleu clair a
   encre marine tient le meme role et laisse respirer la page : le contraste y
   gagne aussi, 9 : 1 contre 4 : 1. */
:where(.r-planches) .pl.marine .pl-bandeau.klein{
  background:#AFC9EC; border-color:transparent; color:var(--navy);
  box-shadow:0 10px 28px -16px rgba(11,29,54,.5);
}
:where(.r-planches) .pl.marine .pl-bandeau.klein p{color:rgba(11,29,54,.82)}
:where(.r-planches) .pl.marine .pl-bandeau.klein .chiffre{color:var(--navy)}

:where(.r-planches) .pl.marine .pl-note{
  background:rgba(237,240,245,.06); color:var(--snow-soft);
  border-left-color:var(--klein-lit);
}
:where(.r-planches) .pl.marine .pl-note:empty{background:none; border-left-color:transparent}

:where(.r-planches) .pl.marine .pl-lev{color:rgba(159,177,201,.8); border-bottom-color:rgba(237,240,245,.13)}
:where(.r-planches) .pl.marine .pl-lev[aria-pressed="true"]{color:#fff}
:where(.r-planches) .pl.marine .pl-lev .puce{border-color:rgba(237,240,245,.34)}
:where(.r-planches) .pl.marine .pl-lev[aria-pressed="true"] .puce{background:var(--klein-lit); border-color:var(--klein-lit)}
:where(.r-planches) .pl.marine .pl-lev[aria-pressed="true"] .m{color:var(--azur)}

:where(.r-planches) .pl.marine .pl-cur label{color:rgba(159,177,201,.85)}
:where(.r-planches) .pl.marine .pl-cur label b{color:var(--azur)}
:where(.r-planches) .pl.marine .pl-cur input[type=range]{accent-color:var(--klein-lit)}
:where(.r-planches) .pl.marine .pl-cur .rep{color:rgba(159,177,201,.7)}

:where(.r-planches) .pl.marine .pl-seg{border-color:rgba(237,240,245,.24)}
:where(.r-planches) .pl.marine .pl-seg button{color:rgba(159,177,201,.85)}
:where(.r-planches) .pl.marine .pl-seg button + button{border-left-color:rgba(237,240,245,.24)}
:where(.r-planches) .pl.marine .pl-seg button[aria-pressed="true"]{background:var(--klein-lit); color:#fff}

:where(.r-planches) .pl.marine .btn.btn-secondaire{color:var(--snow); border-color:rgba(237,240,245,.34)}
:where(.r-planches) .pl.marine .btn.btn-secondaire:hover:not(:disabled){border-color:var(--snow); background:rgba(237,240,245,.07)}

/* Les graphiques d'une planche marine : encres inversees. */
:where(.r-planches) .pl.marine .barre{fill:rgba(159,177,201,.30)}
:where(.r-planches) .pl.marine .barre.clair{fill:var(--azur)}
:where(.r-planches) .pl.marine .barre.acc{fill:var(--klein-lit)}
:where(.r-planches) .pl.marine .ligne{stroke:var(--azur)}
:where(.r-planches) .pl.marine .point{fill:var(--azur)}
:where(.r-planches) .pl.marine .axe{stroke:rgba(237,240,245,.22)}
:where(.r-planches) .pl.marine .etiq{fill:rgba(159,177,201,.85)}
:where(.r-planches) .pl.marine .val{fill:var(--snow)}
:where(.r-planches) .pl.marine .val.blanc{fill:#fff}
:where(.r-planches) .pl.marine .bande{fill:var(--azur); opacity:.14}
:where(.r-planches) .pl.marine .pont.socle{fill:rgba(200,214,232,.62)}
:where(.r-planches) .pl.marine .pont.apport{fill:var(--azur)}
:where(.r-planches) .pl.marine .pont.deduit{fill:var(--klein-lit)}
:where(.r-planches) .pl.marine .fil{stroke:rgba(237,240,245,.28)}
:where(.r-planches) .pl.marine .chute{fill:var(--azur); opacity:.10}
:where(.r-planches) .pl.marine .ponderee{stroke:var(--azur)}
:where(.r-planches) .pl.marine .etiq.accent{fill:var(--azur)}
:where(.r-planches) .pl.marine .cap{fill:var(--azur)}

/* --- Les points sensibles et la gouttiere de notes ---------------------- */
:where(.r-planches) .pt{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-align:inherit; border-bottom:1px dotted var(--klein);
}
:where(.r-planches) .pt:hover, :where(.r-planches) .pt[aria-expanded="true"]{color:var(--klein)}
:where(.r-planches) .pt:focus-visible{outline:2px solid var(--klein); outline-offset:2px}
:where(.r-planches) tr.pt-l{cursor:pointer}
:where(.r-planches) tr.pt-l:hover td, :where(.r-planches) tr.pt-l[aria-expanded="true"] td{background:var(--klein-wash)}

:where(.r-planches) .pl-note{
  border-left:2px solid var(--klein); background:var(--paper);
  border-radius:0 var(--r-controle,4px) var(--r-controle,4px) 0;
  padding:.45rem .7rem; font-size:max(.85rem,13.5px); line-height:1.45; color:var(--ink-soft);
  min-height:2.4em;
}
:where(.r-planches) .pl-note:empty{border-left-color:transparent; background:none}
:where(.r-planches) .pl.marine .pl-note{background:rgba(255,255,255,.06); color:var(--snow-soft)}

/* --- Les curseurs ------------------------------------------------------- */
:where(.r-planches) .pl-cur{margin-top:.7rem}
/* Quatre ponderations en deux rangees : la planche 08 doit tenir en hauteur. */
:where(.r-planches) .curs-grille{display:grid; grid-template-columns:1fr 1fr; gap:.2rem .9rem; margin-top:.4rem}
:where(.r-planches) .curs-grille .pl-cur{margin-top:0}
:where(.r-planches) .pl-cur label{
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  font-family:var(--mono); font-size:max(.7rem,12px); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:.2rem;
}
:where(.r-planches) .pl-cur label b{
  font-family:var(--display); font-size:max(1rem,16px); color:var(--klein);
  letter-spacing:0; text-transform:none;
}
:where(.r-planches) .pl-cur input[type=range]{width:100%; accent-color:var(--klein); min-height:24px}
:where(.r-planches) .pl-cur .rep{
  font-family:var(--mono); font-size:max(.66rem,12px); color:var(--ink-mute);
  display:block; margin-top:.15rem;
}

/* --- La matrice de sensibilite ------------------------------------------
   Une carte de chaleur plutot qu'un damier : l'oeil prend d'abord la pente
   de la valeur, puis la case retenue, marquee sur ses deux axes. */
:where(.r-planches) .pl-mat{width:100%; border-collapse:separate; border-spacing:2px; font-size:max(.78rem,12px)}
:where(.r-planches) .pl-mat th, :where(.r-planches) .pl-mat td{
  padding:.28rem .3rem; text-align:right; border:0; border-radius:2px;
  font-variant-numeric:tabular-nums; font-family:var(--mono);
}
:where(.r-planches) .pl-mat th{
  font-size:max(.68rem,12px); letter-spacing:.04em; color:var(--ink-mute);
  font-weight:500; background:none;
}
:where(.r-planches) .pl-mat thead th{text-align:right; padding-bottom:.35rem}
:where(.r-planches) .pl-mat tbody th{text-align:left; padding-right:.5rem; white-space:nowrap}
:where(.r-planches) .pl-mat th.axe{color:var(--klein); font-weight:600}
:where(.r-planches) .pl-mat td{background:rgba(91,141,209,calc(var(--i,0) * .34)); color:var(--ink)}
:where(.r-planches) .pl-mat td.vive{
  background:var(--klein); color:#fff; font-weight:600;
  box-shadow:0 0 0 2px rgba(0,47,167,.18);
}
:where(.r-planches) .pl-mat td.interp{font-style:italic; color:var(--ink-mute)}
:where(.r-planches) .pl-mat caption{
  caption-side:bottom; text-align:left; margin-top:.35rem;
  font-family:var(--mono); font-size:max(.66rem,12px); color:var(--ink-mute);
}

:where(.r-planches) .pl.marine .pl-mat th{color:rgba(159,177,201,.85)}
:where(.r-planches) .pl.marine .pl-mat th.axe{color:var(--azur)}
:where(.r-planches) .pl.marine .pl-mat td{background:rgba(127,176,232,calc(var(--i,0) * .30)); color:var(--snow)}
:where(.r-planches) .pl.marine .pl-mat td.vive{background:var(--klein-lit); color:#fff; box-shadow:0 0 0 2px rgba(61,90,255,.3)}
:where(.r-planches) .pl.marine .pl-mat caption{color:rgba(159,177,201,.8)}

/* --- Les segments et bascules ------------------------------------------- */
/* Les segments partagent la largeur du plus long : deux boutons de tailles
   differentes se lisent comme une hierarchie, ce qu'ils ne sont pas. */
:where(.r-planches) .pl-seg{display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border:1px solid var(--rule-strong); margin-top:.4rem; align-self:start;
  border-radius:var(--r-controle,4px); overflow:hidden}
:where(.r-planches) .pl-seg button{
  font-family:var(--mono); font-size:max(.7rem,12px); letter-spacing:.09em;
  text-transform:uppercase; padding:.32rem .65rem; background:transparent;
  border:0; cursor:pointer; color:var(--ink-mute); min-height:28px; text-align:center;
  transition:background .2s var(--ease), color .2s var(--ease);
}
:where(.r-planches) .pl-seg button + button{border-left:1px solid var(--rule-strong)}
:where(.r-planches) .pl-seg button[aria-pressed="true"]{background:var(--klein); color:#fff}

:where(.r-planches) .pl-lev{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  width:100%; padding:.42rem 0; border:0; border-bottom:1px solid var(--rule);
  background:transparent; cursor:pointer; font:inherit; text-align:left;
  font-size:max(.88rem,14px); color:var(--ink-mute); min-height:34px;
}
:where(.r-planches) .pl-lev[aria-pressed="true"]{color:var(--ink)}
:where(.r-planches) .pl-lev .m{font-family:var(--mono); font-size:max(.8rem,12.5px); white-space:nowrap}
:where(.r-planches) .pl-lev[aria-pressed="true"] .m{color:var(--klein); font-weight:600}
:where(.r-planches) .pl-lev .puce{
  width:.6rem; height:.6rem; border:1px solid var(--rule-strong); flex:0 0 auto;
  border-radius:2px; transition:background .25s var(--ease), border-color .25s var(--ease);
  display:inline-block; margin-right:.5rem;
}
:where(.r-planches) .pl-lev[aria-pressed="true"] .puce{background:var(--klein); border-color:var(--klein)}

/* --- Les graphiques ------------------------------------------------------ */
:where(.r-planches) .pl svg{display:block; width:100%; height:auto; overflow:visible}
:where(.r-planches) .pl .barre{fill:var(--ink)}
:where(.r-planches) .pl .barre.clair{fill:var(--azur)}
:where(.r-planches) .pl .barre.acc{fill:var(--klein)}
:where(.r-planches) .pl .ligne{fill:none; stroke:var(--klein); stroke-width:1.6}
:where(.r-planches) .pl .point{fill:var(--klein)}
:where(.r-planches) .pl .axe{stroke:var(--rule-strong); stroke-width:1}
:where(.r-planches) .pl .etiq{font-family:var(--mono); font-size:12px; fill:var(--ink-mute)}
:where(.r-planches) .pl .val{font-family:var(--mono); font-size:12px; fill:var(--ink)}
:where(.r-planches) .pl .val.blanc{fill:#fff}

/* Le bandeau de planche, au dessin des planches de prospection : les deux
   nombres d'abord, la barre a deux tons sous eux, la note qui dit ce que
   chaque part represente. L'etiquette est en capitales espacees, le nombre
   dans la police du texte. Deux planches s'en servent, la synthese et les leviers,
   d'ou le prefixe bd- et non lev-. */
:where(.r-planches) .pl .bd-lab{font-family:var(--body); font-size:10px; font-weight:500;
  letter-spacing:.13em; fill:var(--ink-mute)}
:where(.r-planches) .pl .bd-gros{font-family:var(--display); font-size:27px; font-weight:400;
  letter-spacing:-.025em; fill:var(--ink)}
:where(.r-planches) .pl .bd-gros.acc{font-size:20px; fill:var(--klein)}
/* Le fond doit rester une graduation, la part claire une valeur : deux gris
   bleutes trop voisins et la barre paraissait vide sur sa moitie gauche. */
:where(.r-planches) .pl .bd-fond{fill:#EDF1F7}
:where(.r-planches) .pl .bd-base{fill:#A8C2E4}
/* La part bleue couvre les trois quarts de la barre sur la synthese : en klein
   plein elle ecrasait la fourchette etablie, qui est le propos de la planche.
   L'azur accentue sans dominer, et reste lisible sur la part claire. */
:where(.r-planches) .pl .bd-sup{fill:var(--azur)}
/* Le repere de la valeur centrale, pose dans la part claire : il doit s'en
   detacher sans percer la barre, d'ou le blanc plein et non un filet sombre. */
:where(.r-planches) .pl .bd-repere{fill:#fff; opacity:.95}
:where(.r-planches) .pl.marine .bd-lab{fill:#9FB3CC}
:where(.r-planches) .pl.marine .bd-gros{fill:#fff}
:where(.r-planches) .pl.marine .bd-gros.acc{fill:var(--klein-lit)}
:where(.r-planches) .pl.marine .bd-fond{fill:rgba(255,255,255,.14)}
:where(.r-planches) .pl.marine .bd-base{fill:#D7E2F2}
:where(.r-planches) .pl.marine .bd-sup{fill:var(--klein-lit)}
:where(.r-planches) .pl.marine .bd-repere{fill:var(--marine)}
/* rapport-design.js enveloppe chaque graphique d'une case qui defile : un
   trace a l'echelle garde ainsi ses axes sur un ecran etroit. La case epouse
   le dessin, donc la largeur minimale du conteneur reste celle du dernier SVG
   pose, et le dessin ne peut plus retrecir. Les trois traces a l'echelle s'en
   accommodent, c'est meme le but. Les deux bandeaux, eux, se replient a toutes
   les largeurs : on leur rend le droit de retrecir, et ils tiennent dans la
   planche au lieu de defiler. */
:where(.r-planches) .deck .rd-chart-scroll > [data-svg="fourchette"],
:where(.r-planches) .deck .rd-chart-scroll > [data-svg="leviers"]{min-width:0}
:where(.r-planches) .pl .bande{fill:var(--klein); opacity:.1}
/* Le pont : socles a l'encre, apports en azur, deductions en Klein. */
:where(.r-planches) .pl .pont{cursor:pointer; transition:opacity .2s var(--ease)}
:where(.r-planches) .pl .pont.socle{fill:var(--navy)}
:where(.r-planches) .pl .pont.apport{fill:var(--azur)}
:where(.r-planches) .pl .pont.deduit{fill:var(--klein)}
:where(.r-planches) .pl .pont:hover, :where(.r-planches) .pl .pont:focus{opacity:.78; outline:none}
:where(.r-planches) .pl .pont:focus-visible{outline:2px solid var(--klein); outline-offset:2px}
:where(.r-planches) .pl .fil{stroke:var(--rule-strong); stroke-width:1; stroke-dasharray:2 3}
:where(.r-planches) .pl .fil.depart{stroke-dasharray:1 5; opacity:.6}
:where(.r-planches) .pl .chute{fill:var(--klein); opacity:.055}
:where(.r-planches) .pl .ponderee{stroke:var(--klein); stroke-width:1.5; stroke-dasharray:3 3}
:where(.r-planches) .pl .etiq.accent{fill:var(--klein); letter-spacing:.08em}
:where(.r-planches) .pl .cap{fill:var(--klein)}


/* --- Trop etroit pour l'A4 : lisible plutot que fidele --------------------
   Mesure : au ratio A4, une planche de moins de 880px de large ne tient plus
   ses onze lignes de tableau a 14px. C'est la planche 09, le pont de dette,
   qui fixe le seuil. En dessous, la planche s'etire en une colonne.
   La requete de conteneur repond a la largeur reelle de la planche ; la
   requete de media reste en second rideau pour les moteurs qui l'ignorent. */
@container (max-width:899px){
  :where(.r-planches) .pl{aspect-ratio:auto}
  /* Le filigrane est un geste de format : hors de l'A4, il n'a plus de
     bord qui le coupe, il encombrerait le texte. */
  :where(.r-planches) .pl-filigrane{display:none}
  :where(.r-planches) .pl-corps.c2, :where(.r-planches) .pl-corps.c3, :where(.r-planches) .pl-corps.c21, :where(.r-planches) .pl-corps.c12{grid-template-columns:1fr}
  :where(.r-planches) .pl-corps > * + *{border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1rem}
  :where(.r-planches) .pl.marine .pl-corps > * + *{border-top-color:rgba(255,255,255,.12)}
  :where(.r-planches) .pl-bandeau{flex-direction:column; align-items:flex-start; gap:.5rem}
  :where(.r-planches) .pl-mat{font-size:12px}
  :where(.r-planches) .pl-mat th, :where(.r-planches) .pl-mat td{padding:.25rem}

  /* POINT 5. Ce que la planche coupait au telephone. Mesure a 320 px : boite
     de 286 px, contenu de 354 a 522 px, et overflow:hidden, donc invisible et
     inatteignable. Quatre causes, quatre remedes, tous dans le mode etroit ou
     la planche est deja "lisible plutot que fidele".
       l'en-tete tenait sur une ligne sans repli
       les etiquettes de section et les grands chiffres etaient en nowrap
       les tableaux gardaient leur largeur minimale de contenu
       les curseurs gardaient leurs deux colonnes */
  :where(.r-planches) .pl-tete{flex-wrap:wrap; row-gap:.3rem}
  :where(.r-planches) .pl-sect, :where(.r-planches) .pl-num{white-space:normal}
  :where(.r-planches) .pl-t, :where(.r-planches) .pl-mat{table-layout:fixed; width:100%}
  :where(.r-planches) .pl-mat tbody th{white-space:normal}
  :where(.r-planches) .curs-grille{grid-template-columns:1fr}
  :where(.r-planches) .pl-seg{flex-wrap:wrap}
}

@media (max-width:999px){
  :where(.r-planches) .pl{aspect-ratio:auto}
  /* Le filigrane est un geste de format : hors de l'A4, il n'a plus de
     bord qui le coupe, il encombrerait le texte. */
  :where(.r-planches) .pl-filigrane{display:none}
  :where(.r-planches) .pl-corps.c2, :where(.r-planches) .pl-corps.c3, :where(.r-planches) .pl-corps.c21, :where(.r-planches) .pl-corps.c12{grid-template-columns:1fr}
  :where(.r-planches) .pl-corps > * + *{border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1rem}
  :where(.r-planches) .pl.marine .pl-corps > * + *{border-top-color:rgba(255,255,255,.12)}
  :where(.r-planches) .pl-bandeau{flex-direction:column; align-items:flex-start; gap:.5rem}
  :where(.r-planches) .pl-mat{font-size:12px}
  :where(.r-planches) .pl-mat th, :where(.r-planches) .pl-mat td{padding:.25rem}

  /* POINT 5. Ce que la planche coupait au telephone. Mesure a 320 px : boite
     de 286 px, contenu de 354 a 522 px, et overflow:hidden, donc invisible et
     inatteignable. Quatre causes, quatre remedes, tous dans le mode etroit ou
     la planche est deja "lisible plutot que fidele".
       l'en-tete tenait sur une ligne sans repli
       les etiquettes de section et les grands chiffres etaient en nowrap
       les tableaux gardaient leur largeur minimale de contenu
       les curseurs gardaient leurs deux colonnes */
  :where(.r-planches) .pl-tete{flex-wrap:wrap; row-gap:.3rem}
  :where(.r-planches) .pl-sect, :where(.r-planches) .pl-num{white-space:normal}
  :where(.r-planches) .pl-t, :where(.r-planches) .pl-mat{table-layout:fixed; width:100%}
  :where(.r-planches) .pl-mat tbody th{white-space:normal}
  :where(.r-planches) .curs-grille{grid-template-columns:1fr}
  :where(.r-planches) .pl-seg{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  :where(.r-planches) .pl, :where(.r-planches) .pl-note{transition:none}
  :where(.r-planches) .pl-cellule .pl{transition:none}
}

/* POINT 5. Les commandes des planches sont declarees ici, dans le style
   propre a la page : le bloc @media (pointer:coarse) de la feuille commune
   ne les cite pas et ne peut donc pas les atteindre. Mesure avant : 28 px
   pour les bascules, 34 px pour les leviers, 26 a 31 px pour les lignes de
   tableau cliquables. */
@media (pointer:coarse){
  :where(.r-planches) .pl-seg button{min-height:44px}
  :where(.r-planches) .pl-lev{min-height:44px}
  :where(.r-planches) tr.pt-l td{padding-block:.7rem}
  :where(.r-planches) .pl-t.dense tr.pt-l td{padding-block:.6rem}
}

/* Sans JavaScript, les planches restent toutes lisibles a la suite, chiffres
   compris : le balisage livre porte les valeurs du rapport. Seules les
   commandes qui ne serviraient a rien disparaissent. */
/* Le rail est en CSS : sans JavaScript il defile et s'accroche comme avec.
   Les planches ne portent alors aucune classe .on, donc aucune n'est
   retiree : cette regle les remet toutes a pleine encre.
   Et comme ni le compteur ni la barre de progression ne sont la pour dire
   qu'il y a une suite, la barre de defilement reapparait : c'est le seul
   indice qui reste qu'il y a dix planches et non une. */
html.no-js :where(.r-planches) .pl-cellule .pl{opacity:1}
html.no-js :where(.r-planches) .deck-scene{scrollbar-width:auto; padding-bottom:.4rem}
html.no-js :where(.r-planches) .deck-scene::-webkit-scrollbar{display:block; height:10px}
html.no-js :where(.r-planches) .deck-prog,
html.no-js :where(.r-planches) .deck-fleche,
html.no-js :where(.r-planches) #demanderRapport,
html.no-js :where(.r-planches) [data-dr-ouvrir],
html.no-js :where(.r-planches) .pl-cur,
html.no-js :where(.r-planches) .curs-grille,
html.no-js :where(.r-planches) .pl-seg,
html.no-js :where(.r-planches) [data-reset-poids]{display:none}
html.no-js :where(.r-planches) .pl-note:empty{display:none}

/* =========================================================================
   4. L'HABILLAGE DES PLANCHES DANS LE LECTEUR
   Section 3 de planches.css : le rail prend la largeur du lecteur, sa
   barre de progression et ses fleches cedent la place a celles du
   composant (seulement quand le lecteur est vivant : sans script, le
   rail garde les siennes, et la regle sans script plus haut les retire).
   Au telephone, la planche 01 garde ses reperes de mission et l'encart
   "52 pages" (retouche du jury du 29/09, la meme qu'a l'accueil).
   ------------------------------------------------------------------------- */
:where(.r-planches) .deck{ max-width:none; margin:0; }
:where(.r-planches) .deck-rail{ width:100%; }
.g-rapport--vivant .r-planches .deck-prog,
.g-rapport--vivant .r-planches .deck-fleche{ display:none !important; }
/* (La planche 01 retrouvait ici, au telephone, son paragraphe, ses
   reperes et son encart « 52 pages » : depuis le 04/10/2026, aucune
   planche ne perd plus rien, voir section 2.) */
/* DM Sans (30/09/2026) : titres des planches en 500, la graisse la plus
   forte de la reference ; rapport-design.css les pose en 600, d'ou le
   prefixe reel. */
.r-planches .deck .pl .pl-titre, .r-planches .deck .pl.marine .pl-titre{ font-weight:500; }
/* La jauge vide n'appelle pas la face italique. */
.r-planches i:empty, .r-planches #dkProg{ font-style:normal; }
/* Contraste : sur la planche 03 (marine), les barres du plan portent leur
   valeur en blanc, 12 px. Le bleu de rapport-design.css (#5f85b6) n'y
   donnait que 3,8:1 ; #5177a9, du meme bleu en plus sombre, donne 4,6:1 et
   reste plus clair que les barres du realise (#365574). L'accueil garde
   l'ancien bleu tant que rapport-design.css n'est pas repris. */
.r-planches .deck .pl.marine .barre.clair{ fill:#5177a9; }
/* Meme planche, au telephone : l'annee 2025 est surlignee par une bande
   bleue ; son etiquette, a 85 % du gris-bleu, y tombait a 4,1:1. Le
   gris-bleu plein (#9FB1C9) donne 5,1:1 sur la bande et plus ailleurs. */
.r-planches .deck .pl.marine .etiq{ fill:#9FB1C9; }
/* Cibles de 44 px au toucher. Les lignes de tableau qui ouvrent une note
   (tr.pt-l, tabindex 0) et les curseurs tombaient a 27-29 px et 32 px :
   rapport-design.css et le resserrement du telephone (section 2)
   l'emportaient sur la regle de la page (section 3, pointer:coarse). La
   hauteur de cellule sert de minimum : une ligne de deux lignes de texte
   garde sa hauteur. */
@media (pointer:coarse){
  .r-planches .deck .pl tr.pt-l td{ height:44px; }
  .r-planches .deck .pl-cur input[type=range]{ min-height:44px; }
}
/* Au telephone, le pied ne garde que "donnees fictives" : le filet qui
   le separait du libelle precedent, retire, ne precede plus rien. */
@media (max-width:620px){
  .r-planches .justif .deck .pl-pied .rh > span:last-child::before{ display:none; }
}
/* Audit du 03/10/2026 (VIS-5), la meme regle qu'a la fin de planches.css.
   Planche 08 : sous 332 px de planche, une colonne de curseurs ne loge plus
   « Transactions 30 % » (140 px) ; une seule colonne. La requete porte sur
   la planche (.pl-cellule), pas sur l'ecran. Au telephone, le seuil passe
   a 400 px de planche depuis le 09/10/2026 (section 13). */
@container (max-width:340px){
  :where(.r-planches) .justif .deck .curs-grille{ grid-template-columns:1fr; }
}
/* Derniere passe du 03/10/2026 (VIS-5, planche 04), les memes paliers qu'a
   la fin de planches.css. Les cases heritent de text-align-last:left :
   l'air jusqu'au voisin vaut colonne + espacement - nombre. A 288 px de
   planche (320 px), 5,1 px ; a 244 px (accueil, 320 px), 1,1 px. Jusqu'a
   295 px de planche, la colonne des taux prend sa largeur (3,9 em), corps
   de 10,5 px ; jusqu'a 280 px, corps de 9,5 px, matrice elargie de 8 px de
   chaque cote dans la marge de la planche, legende a l'aplomb, selecteur
   de scenario aux marges resserrees. Au dela de 295 px, rien ne change. */
@container (max-width:295px){
  :where(.r-planches) .justif .deck .pl-mat thead th:first-child{ width:3.9em; }
  :where(.r-planches) .justif .deck .pl-mat th, :where(.r-planches) .justif .deck .pl-mat td{ font-size:10.5px; }
}
@container (max-width:280px){
  :where(.r-planches) .justif .deck .pl-mat{ width:calc(100% + 16px); margin-inline:-8px; }
  :where(.r-planches) .justif .deck .pl-mat caption{ padding-inline:8px; }
  :where(.r-planches) .justif .deck .pl-mat th, :where(.r-planches) .justif .deck .pl-mat td{ font-size:9.5px; }
  :where(.r-planches) .justif .deck .pl-seg{ padding:3px; gap:2px; }
  :where(.r-planches) .justif .deck .pl-seg button{ padding-inline:4px; letter-spacing:0; }
}

/* =========================================================================
   5. LA COUVERTURE : LA BULLE DU RAPPORT
   A droite du titre, la bulle chiffree du rapport de demonstration :
   52 pages, le PDF, donnees fictives, et le bouton qui ouvre la fenetre.
   ------------------------------------------------------------------------- */
.r-couv-rapport{ gap:10px; }
.r-couv-rapport .k-chiffre-legende{ margin-top:2px; }
.r-couv-rapport .f-boutons{ margin-top:10px; }
.r-couv-rapport .f-bouton{ width:100%; justify-content:space-between; }

/* =========================================================================
   6. LA BANDE MARINE ET LE LECTEUR
   Le seul contenu marine du site (pages.css section 9) porte les
   planches. Autour, le lecteur de l'accueil (rapport-vitrine.css) :
   onglets numerotes, compteur, fleches, legende de l'extrait courant. Ses
   jetons de texte (--f-texte, --f-attenue-70, --f-attenue-50) sont ceux
   du socle sur fond sombre : blanc, blanc a 70 %, blanc a 50 %. Seuls
   changent ici : l'accent (azur, au lieu du Klein qui y tombe a 1,9:1), le
   survol et la rangee de numeros, dessines pour le sombre, et le seuil de
   cette rangee. Depuis le 04/10/2026, la bande prend le bleu du rapport
   #15253E, comme sur l'accueil (#03021b avant), et l'accent l'azur des
   titres, #88B6EB (#7FB0E8 avant) : blanc a 70 % 8,2:1, azur 7,3:1 (9:1
   avant) ; le blanc a 50 % (5,3:1 avant, 4,9:1 sur le nouveau bleu) passe
   a 62 % dans la bande, comme sur celle de l'accueil (pages.css, 9) :
   6,7:1.

   Le seuil : a l'accueil, la planche est dessinee a 900 px puis reduite ;
   ici elle est rendue a sa largeur. La colonne des onglets (260 px) ne
   reste donc que si la planche garde 900 px a cote d'elle, soit a partir
   de 1280 px ; en dessous, la rangee de numeros (rapport-vitrine.css la
   pose a 1100 px, reprise ici jusqu'a 1279 px).
   ------------------------------------------------------------------------- */
.r-bande .k-tete{ margin-bottom:32px; }
.r-rapport{ --g-r-colonne:260px; --g-r-accent:var(--k-azur); }
.r-rapport .g-rapport-corps{ column-gap:28px; }
.r-rapport .g-rapport-onglets{ top:104px; }
@media (hover:hover){
  .r-rapport .g-rapport-onglet:hover{ background:rgba(255,255,255,.08); color:var(--f-texte); }
  .r-rapport .g-rapport-onglet[aria-selected="true"]:hover{ background:var(--f-blanc); color:var(--g-encre); }
}
.r-rapport .g-rapport-onglet:focus-visible,
.r-rapport .g-rapport-fleche:focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; }

/* La barre claire sur l'onglet courant (jury du 30/09) : seule bulle
   blanche de la colonne, il passe sous la barre en fin de lecteur (la
   colonne collante remonte avec la planche) et, sous 1280 px, quand la
   rangee de numeros defile. pages.js ne suit que .k-surface : chaque
   onglet porte un temoin vide de cette classe, affiche sur le seul onglet
   courant et calque sur lui. La barre passe au verre clair tant que
   l'onglet courant est dessous, et reste marine sur le reste de la
   colonne, qui est marine. Un temoin masque n'a pas de boite : il ne
   compte pas. */
.r-rapport .g-rapport-onglet{ position:relative; }
.r-onglet-surface{ display:none; }
.r-rapport .g-rapport-onglet[aria-selected="true"] > .r-onglet-surface{
  display:block; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;
}

/* La scene ne coupe rien : pas d'image d'attente a arrondir ici, et les
   contours de focus des planches restent entiers. */
.r-rapport .g-rapport-scene{ overflow:visible; border-radius:0; }

@media (max-width:1279px){
  .r-rapport .g-rapport-corps{ grid-template-columns:minmax(0, 1fr); row-gap:20px; }
  .r-rapport .g-rapport-onglets{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .r-rapport .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:transparent; color:var(--f-texte); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); font-size:16px;
  }
  .r-rapport .g-rapport-onglet .g-rapport-no{ font-size:16px; letter-spacing:0; color:inherit; }
  .r-rapport .g-rapport-onglet[aria-selected="true"]{ background:var(--f-blanc); color:var(--g-encre); box-shadow:none; font-weight:500; }
  .r-rapport .g-rapport-onglet[aria-selected="true"] .g-rapport-no{ color:var(--g-klein); }
  .r-rapport .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;
  }
  .r-rapport .g-rapport-courant{ display:block; }
}
@media (max-width:760px){
  .r-rapport .g-rapport-barre, .r-rapport .g-rapport-legende{ padding-inline:0; }
}

/* =========================================================================
   7. SOUS LES PLANCHES : L'AVERTISSEMENT ET LE TELECHARGEMENT
   Depuis le 04/10/2026, le texte de simulation est l'introduction de la
   bande (brief, section 11) et .r-avert n'est plus pose ; sous la legende
   viennent les extraits voisins et l'etat de la simulation (section 12),
   puis le bouton qui ouvre la fenetre (#demanderRapport, qu'artis.js
   exige), le contact et la mention du PDF.
   ------------------------------------------------------------------------- */
.r-avert{
  margin:16px 0 0; max-width:46em; padding-left:14px; border-left:2px solid var(--k-azur);
  font-size:14px; line-height:1.5; letter-spacing:0; color:var(--f-attenue-70); text-wrap:pretty;
}
.r-telecharger{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:28px; }
.r-telecharger .f-boutons{ margin:0; gap:8px; }
/* La mention du PDF et de l'adresse demandee (UI06, 04/10/2026) : une
   phrase sous les boutons, plus une etiquette en capitales. */
.r-telecharger-note{
  flex-basis:100%; margin:0; max-width:46em; font-size:14px; line-height:1.5; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--f-attenue-70); text-wrap:pretty;
}
.r-bande .f-bouton-clair{ color:var(--k-encre); }
.r-bande .f-bouton-verre{ color:var(--f-texte); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.r-bande .f-bouton:focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; }
@media (max-width:760px){
  .r-telecharger .f-boutons, .r-telecharger .f-boutons .f-bouton{ width:100%; }
  .r-telecharger .f-boutons .f-bouton{ flex:1 1 100%; justify-content:space-between; }
}

/* =========================================================================
   8. LES DIX EXTRAITS COMMENTES
   Une carte d'article (pages.css, 12f) par extrait : le numero en puce, ce
   que l'extrait presente, son titre, une phrase. Le lien mene a la
   planche dans le lecteur (et, sans script, a la bande des planches).
   ------------------------------------------------------------------------- */
.r-extraits{ list-style:none; margin:0; padding:0; }
.r-extraits > li{ display:flex; min-width:0; }
.r-extraits .k-carte-article{ flex:1 1 auto; min-width:0; }

/* =========================================================================
   9. L'OFFRE
   ------------------------------------------------------------------------- */
.r-voisins{ display:grid; gap:var(--k-ecart); align-content:start; }
.r-offre .k-bulle .f-boutons{ margin-top:4px; }

/* =========================================================================
   10. LA FENETRE DE DIALOGUE
   Le composant du socle (pages.css, 12g) ; ici, le bouton verre du
   remerciement prend l'habit clair de l'accueil (scene.css, surfaces
   claires) : filet d'encre, pastille d'encre.
   ------------------------------------------------------------------------- */
.rv-boite{
  --f-verre-bouton:transparent; --f-bouton-verre-fond:transparent; --f-bouton-verre-survol:rgba(11,29,54,.05);
  --f-bouton-verre-bord:inset 0 0 0 1px rgba(11,29,54,.22);
  --f-pastille-verre:var(--g-encre); --f-pastille-verre-fleche:var(--f-blanc);
}
.rv-boite .f-bouton-verre{ color:var(--k-encre); -webkit-backdrop-filter:none; backdrop-filter:none; }
.rv-boite .f-boutons{ margin-top:0; gap:8px; }
.rv-boite #drTelecharger{ justify-self:start; }
@media (max-width:760px){
  .rv-boite #drTelecharger{ justify-self:stretch; justify-content:space-between; }
  .rv-boite .f-boutons .f-bouton{ flex:1 1 100%; justify-content:space-between; }
}

/* =========================================================================
   11. SANS SCRIPT
   Les onglets, le compteur et les fleches du lecteur se retirent
   (rapport-vitrine.css) ; la legende aussi, qui ne suivrait plus le rail.
   Les dix planches restent lisibles a la suite dans le rail (section 3).
   La fenetre demande le script : ses deux boutons se retirent, comme sur
   la page publiee.
   ------------------------------------------------------------------------- */
.r-rapport:not(.g-rapport--vivant) .g-rapport-legende{ display:none; }
html.no-js #demanderRapport, html.no-js [data-dr-ouvrir]{ display:none; }

/* =========================================================================
   12. LECTURE ET NAVIGATION (brief du 04/10/2026 : UI02, UI03, UI06, UI07)
   Sur cette page seulement : le lecteur de l'accueil et des offres
   (planches.css, rapport-vitrine.css) ne change pas. Les regles qui
   doivent battre rapport-design.css le font par la specificite (prefixe
   .r-planches reel), comme en section 4.
   ------------------------------------------------------------------------- */

/* --- 12a. Planche 04 : les flux du plan dans un detail repliable ---------
   A l'ordinateur, le detail reste ouvert et son bouton est retire
   (rapport-design.js le rouvre au-dessus de 620 px) : la planche ne change
   pas. Au telephone, il se replie sous « Voir les flux du plan ». */
.r-planches .deck .pl-detail{ display:block; margin:0; }
.r-planches .deck .pl-detail > summary{ display:none; }
@media (max-width:620px){
  .r-planches .deck .pl .pl-detail > summary{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-height:44px; margin:0; padding:10px 14px;
    border:1px solid var(--rd-local-border, var(--rule)); border-radius:10px;
    background:var(--rd-local-panel, var(--paper)); color:var(--rd-local-text, var(--ink));
    font-size:15px; font-weight:500; line-height:1.3; letter-spacing:0; cursor:pointer; list-style:none;
  }
  .r-planches .deck .pl .pl-detail > summary::-webkit-details-marker{ display:none; }
  .r-planches .deck .pl .pl-detail > summary::after{
    content:""; flex:none; width:8px; height:8px; margin-right:4px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
  }
  .r-planches .deck .pl .pl-detail[open] > summary{ margin-bottom:14px; }
  .r-planches .deck .pl .pl-detail[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
  .r-planches .deck .pl .pl-detail > summary:focus-visible{ outline:2px solid var(--rd-local-accent, var(--klein)); outline-offset:3px; }
}
/* Sous un scenario publie seul, les flux affiches sont ceux du scenario
   central : la planche le dit au-dessus du tableau. */
.r-planches .deck .pl .pl-ref{ margin:0 0 6px; max-width:none; font-size:13px; line-height:1.45; color:var(--rd-local-muted, var(--ink-mute)); }

/* --- 12b. La matrice dans sa propre zone de defilement -------------------
   Elle tient a 390 px ; plus etroite, elle defile dans sa zone au lieu de
   reduire ses chiffres (les corps de 10,5 et 9,5 px de la section 4 ne
   s'appliquent plus ici). rapport-design.js rend la zone focalisable et
   affiche l'indice quand elle deborde. Au telephone, son bord qui cache
   une suite s'estompe aussi depuis le 09/10/2026 (section 13). */
.r-planches .deck .pl-mat-defile{ max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#9ab2d6 transparent; }
.r-planches .deck .pl-mat-defile:focus-visible{ outline:2px solid var(--rd-local-accent, var(--klein)); outline-offset:3px; }
.r-planches .justif .deck .pl .pl-mat-defile > .pl-mat{ width:100%; min-width:292px; margin-inline:0; }
.r-planches .justif .deck .pl .pl-mat caption{ padding-inline:0; }
.r-planches .deck .pl .pl-mat-indice{ margin:6px 0 0; max-width:none; font-size:12px; line-height:1.4; color:var(--rd-local-muted, var(--ink-mute)); }

/* --- 12c. Les corps de lecture (UI03) ----------------------------------------
   15 a 16 px pour la conclusion, les explications et les chiffres utiles,
   12 a 14 px pour les etiquettes et les notes (13 px au moins sous 760 px
   depuis le 09/10/2026, section 13), sans resserrer l'interlettrage des
   donnees (rapport-design.css le reduisait sur les montants et la
   matrice). */
.r-planches .justif .deck .pl .pl-rep, .r-planches .justif .deck .pl.marine .pl-rep{
  font-size:16px; line-height:1.6; max-width:72ch; color:var(--rd-local-text);
}
.r-planches .justif .deck .pl .pl-p{ font-size:15px; line-height:1.65; }
.r-planches .justif .deck .pl .pl-st, .r-planches .justif .deck .pl.marine .pl-st{ font-size:12px; }
.r-planches .justif .deck .pl .pl-sect, .r-planches .justif .deck .pl .pl-num{ font-size:12px; }
.r-planches .justif .deck .pl .pl-t{ font-size:14px; }
.r-planches .justif .deck .pl .pl-t th{ font-size:12px; }
.r-planches .justif .deck .pl .pl-t td.n, .r-planches .justif .deck .pl .pl-t th.n{ font-size:14px; letter-spacing:0; }
.r-planches .justif .deck .pl .pl-t tr.tot td.n, .r-planches .justif .deck .pl.marine .pl-t tr.tot td.n{ font-size:15px; }
.r-planches .justif .deck [data-pl="1"] [data-t="sommaire"] td{ font-size:14px; }
.r-planches .justif .deck .pl .pl-note{ font-size:14px; line-height:1.55; }
.r-planches .justif .deck .pl .pl-bandeau p, .r-planches .justif .deck .pl.marine .pl-bandeau p{ font-size:14px; line-height:1.5; }
.r-planches .justif .deck .pl .pl-cle .k{ font-size:12px; }
.r-planches .justif .deck .pl .pl-cur label, .r-planches .justif .deck .pl.marine .pl-cur label{ font-size:12px; }
.r-planches .justif .deck .pl .pl-cur .rep, .r-planches .justif .deck .pl.marine .pl-cur .rep{ font-size:13px; }
.r-planches .justif .deck .pl .pl-seg button, .r-planches .justif .deck .pl.marine .pl-seg button{ font-size:12px; letter-spacing:.02em; }
.r-planches .justif .deck .pl .pl-mat th, .r-planches .justif .deck .pl .pl-mat td{ font-size:13px; letter-spacing:0; padding:8px 4px; }
.r-planches .justif .deck .pl .pl-mat caption{ font-size:12px; }
.r-planches .justif .deck .pl .pl-lev, .r-planches .justif .deck .pl .pl-lev .m{ font-size:14px; }
.r-planches .justif .deck .pl .pl-pied .rh, .r-planches .justif .deck .pl.marine .pl-pied .rh{ font-size:12px; letter-spacing:.05em; }
.r-planches .justif .deck .pl .btn-sm{ font-size:12px; }
.r-planches .deck .pl .bd-lab{ font-size:12px; }
@media (max-width:620px){
  .r-planches .justif .deck .pl .pl-rep, .r-planches .justif .deck .pl.marine .pl-rep{ font-size:15px; line-height:1.6; }
}

/* Les montants s'alignent a droite. .justif td leur imposait
   text-align-last:left : une valeur d'une ligne restait calee a gauche de
   sa colonne, dans les tableaux comme dans la matrice. */
.r-planches .justif .deck .pl .pl-t td.n, .r-planches .justif .deck .pl .pl-t th.n,
.r-planches .justif .deck .pl .pl-mat td, .r-planches .justif .deck .pl .pl-mat thead th{
  text-align:right; text-align-last:right;
}

/* --- 12d. La composition des paragraphes etroits (UI07) -----------------------
   Les petits encadres (bandeau, note, colonne etroite) sont alignes a
   gauche a toutes les largeurs ; au telephone, toute la prose des
   planches l'est, sans cesure. La justification reste sur les longues
   mesures de l'ordinateur. */
.r-planches .justif .deck .pl :is(.pl-bandeau p, .pl-note, .pl-ref, .pl-mat-indice),
.r-planches .justif .deck .pl .pl-corps > div + div .pl-p{
  text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual;
}
@media (max-width:620px){
  .r-planches .justif .deck .pl :is(.pl-rep, .pl-p, .pl-bandeau p, .pl-note){
    text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual;
  }
}

/* --- 12e. Le lecteur : compteur, intitules courts, extraits voisins (UI03) -- */
.r-rapport .g-rapport-compteur{
  margin:0 0 4px; font-size:13px; line-height:1.3; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--g-r-accent);
}
.r-rapport .g-rapport-barre{ scroll-margin-top:96px; }
.r-rapport .g-rapport-court{ display:none; }
/* Sous 1280 px, chaque onglet porte son numero et un intitule court
   (« 04 Flux actualises ») ; le titre complet reste lu par les lecteurs
   d'ecran. De 761 a 1279 px, les dix tiennent sur deux ou trois rangees. */
@media (max-width:1279px){
  .r-rapport .g-rapport-onglets{ display:flex; flex-wrap:wrap; gap:6px; }
  .r-rapport .g-rapport-onglet{
    flex:0 1 auto; width:auto; min-width:44px; min-height:44px; padding:0 14px;
    grid-template-columns:none; place-items:normal;
    display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
  }
  .r-rapport .g-rapport-onglet .g-rapport-no{ font-size:13px; letter-spacing:.04em; }
  .r-rapport .g-rapport-court{ display:inline; font-size:15px; line-height:1.2; white-space:nowrap; }
}
/* Au telephone, une seule rangee qui defile au doigt : l'onglet courant y
   reste visible (script du lecteur), le compteur et le titre courant sont
   juste dessous. La marge interne garde les contours de focus entiers.
   Depuis le 09/10/2026, son bord droit s'estompe (section 13). */
@media (max-width:760px){
  .r-rapport .g-rapport-onglets{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    margin:-4px; padding:4px; scroll-padding-inline:4px; scroll-snap-type:x proximity;
    scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .r-rapport .g-rapport-onglets::-webkit-scrollbar{ display:none; }
  .r-rapport .g-rapport-onglet{ flex:0 0 auto; scroll-snap-align:start; }
}

/* Sous la legende, l'extrait precedent et le suivant, nommes. */
.r-suite{ display:flex; gap:10px; margin-top:22px; }
.r-suite[hidden], .r-suite-bouton[hidden]{ display:none; }
.r-suite-bouton{
  flex:1 1 0; min-width:0; max-width:360px; min-height:56px; margin:0; padding:10px 16px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px;
  border:0; border-radius:var(--f-r-bouton, 8px); background:transparent; color:var(--f-texte);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); font:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.r-suite-bouton--suiv{ margin-left:auto; align-items:flex-end; text-align:right; }
.r-suite-sens{ font-size:13px; line-height:1.3; letter-spacing:0; color:var(--f-attenue-70); }
.r-suite-dest{ font-size:16px; line-height:1.3; font-weight:500; text-wrap:balance; }
@media (hover:hover){ .r-suite-bouton:hover{ background:rgba(255,255,255,.08); } }
.r-suite-bouton:focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; }

/* L'etat de la simulation et le retour aux hypotheses du rapport. */
.r-etat{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:22px; }
.r-etat[hidden]{ display:none; }
.r-etat-texte{
  margin:0; padding-left:14px; border-left:2px solid var(--k-azur);
  font-size:14px; line-height:1.5; color:var(--f-attenue-70); text-wrap:pretty;
}
.r-reinit{
  min-height:44px; margin:0; padding:10px 16px; border:0; border-radius:var(--f-r-bouton, 8px);
  background:transparent; color:var(--f-texte); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  font:inherit; font-size:15px; line-height:1.3; text-align:left; cursor:pointer;
}
.r-reinit[aria-disabled="true"]{ opacity:.55; cursor:default; }
.r-etat[data-modifie="oui"] .r-reinit{ background:var(--f-blanc); color:var(--k-encre); box-shadow:none; }
.r-reinit:focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; }
@media (max-width:760px){
  .r-reinit{ width:100%; }
}

/* La couverture : l'adresse demandee, sous le bouton (UI06). */
.r-couv-rapport .r-acces{ margin-top:-2px; }

/* =========================================================================
   13. TELEPHONE : L'AUDIT DU 8 OCTOBRE 2026 (lots 3 et 6)
   Retouche du 09/10/2026, sous 760 px seulement, d'apres l'audit
   telephone du 8 octobre (lot 3, constat 59, et lot 6, constats 64, 78, 81,
   82, 83, 84, 86, 88, 170, 176, 179 et 183). Tout le contenu reste affiche
   a sa place : rien n'est masque, replie ni deplace. Les dix extraits
   commentes, le sommaire de l'extrait 01, l'etat de la simulation et
   l'ordre de la fenetre de telechargement ne changent pas (choix de
   contenu laisses a Raphael). C'etait la premiere passe. Sur sa
   delegation, la seconde passe, section 14, replie les dix extraits et le
   sommaire de l'extrait 01. A partir de 761 px, rien ne change : les
   requetes de conteneur de cette section sont elles-memes posees sous
   760 px d'ecran.
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  /* La couverture (constat 84) : le bouton de telechargement, l'action
     propre a la page, tombait a 674 px du haut, sous le pli de Safari
     (659 px) et de l'iPhone SE (667 px). 88 px au-dessus du fil d'Ariane
     au lieu de 112 (le texte du fil reste a 35 px sous la barre), 20 px
     entre le chapo et la bulle du rapport au lieu de 28 : le haut du
     bouton remonte de 29 px (de 674 a 645 px du haut a 393 px). */
  .k-page .k-couv{ padding-top:88px; }
  .k-page .k-couv-grille{ gap:20px; }

  /* Les etiquettes en capitales (constat 83) : 13 px et 0,22 em au lieu
     de 12 px et 0,3 em. */
  .k-page main{ --k-t-etiquette:13px; }
  .k-page main .k-etiquette, .k-page main .k-bulle-etiquette{ letter-spacing:.22em; }

  /* Les chapos de la bande et des extraits, et les resumes des dix
     extraits (constats 64 et 170) : justifies sur 309 a 353 px, ils
     ouvraient des blancs de plus de trois espaces et coupaient neuf mots.
     Au fer a gauche, sans cesure automatique. */
  .k-page main .k-lede, .r-extraits .k-carte-article-resume{
    text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual;
  }

  /* La rangee des dix onglets (constats 78 et 183) : 1 545 px dans 361,
     deux onglets entiers visibles, rien ne disait qu'il y en avait huit
     autres. Le bord droit s'estompe sur 32 px. 40 px de rembourrage a
     droite font que le dernier onglet, en fin de defilement, s'arrete net
     avant le fondu, et l'onglet courant que le lecteur ramene a l'ecran
     s'arrete aussi avant lui (scroll-padding). Les onglets passent a 8 px
     l'un de l'autre au lieu de 6, l'ecart voulu entre deux cibles
     (constat 175). */
  .r-rapport .g-rapport-onglets{
    gap:8px; padding-right:40px; scroll-padding-inline:4px 40px;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }

  /* L'extrait voisin seul (constat 86) : sous l'extrait 01, le bouton
     « Extrait suivant » tenait un cadre de 353 x 61 px, le texte cale a
     droite et la moitie gauche vide. Seul (premier ou dernier extrait), il
     prend la largeur de son texte, sens et destination sur une ligne,
     44 px de haut, cale de son cote. Les deux ensemble, rien ne change. */
  .r-suite:has(> [data-r-prec][hidden]) > .r-suite-bouton--suiv,
  .r-suite:has(> .r-suite-bouton--suiv[hidden]) > [data-r-prec]{
    flex:0 1 auto; min-height:44px; padding:11px 16px;
    flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:0;
  }
  .r-suite:has(> [data-r-prec][hidden]) > .r-suite-bouton--suiv{ justify-content:flex-end; }

  /* Les graphiques et la matrice qui defilent dans leur case (constats 59
     et 179) : la trajectoire (03), la convergence (08) et le pont (09)
     gardent leur echelle et leurs textes dans une case de 315 px pour 540,
     440 et 540 px de trace, la matrice (04) defile sous 390 px. Rien ne
     disait qu'il restait du trace a droite : sur l'extrait 08, la barre du
     DCF semblait vide. Comme sur l'offre (offre-mission.js, .om-suite-d),
     le bord qui cache une suite s'estompe sur 28 px, selon la position du
     defilement, que rapport-design.js pose dans data-rd-suite (g, d ou
     gd). Au focus, plus de masque : il couperait le contour de la case. */
  .r-planches .deck :is(.rd-chart-scroll, .pl-mat-defile)[data-rd-suite="d"]{
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .r-planches .deck :is(.rd-chart-scroll, .pl-mat-defile)[data-rd-suite="g"]{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px);
    mask-image:linear-gradient(90deg, transparent, #000 28px);
  }
  .r-planches .deck :is(.rd-chart-scroll, .pl-mat-defile)[data-rd-suite="gd"]{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  .r-planches .deck :is(.rd-chart-scroll, .pl-mat-defile):focus-visible{ -webkit-mask-image:none; mask-image:none; }

  /* Les petits textes des planches (constat 82) : 133 textes a 12 px,
     etiquettes de section, numeros, pied « donnees fictives » et numero
     de page, libelles des curseurs, des bascules et des boutons. 13 px, la
     planche garde sa grille. Les textes dessines dans les graphiques (SVG) gardent leur
     taille : elle depend du moteur de trace. */
  .r-planches .justif .deck .pl .pl-st, .r-planches .justif .deck .pl.marine .pl-st,
  .r-planches .justif .deck .pl .pl-sect, .r-planches .justif .deck .pl .pl-num,
  .r-planches .justif .deck .pl .pl-t th,
  .r-planches .justif .deck .pl .pl-cle .k,
  .r-planches .justif .deck .pl .pl-cur label, .r-planches .justif .deck .pl.marine .pl-cur label,
  .r-planches .justif .deck .pl .pl-seg button, .r-planches .justif .deck .pl.marine .pl-seg button,
  .r-planches .justif .deck .pl .pl-mat caption,
  .r-planches .justif .deck .pl .pl-pied .rh, .r-planches .justif .deck .pl.marine .pl-pied .rh,
  .r-planches .justif .deck .pl .pl-pied .page,
  .r-planches .justif .deck .pl .btn-sm,
  .r-planches .deck .pl .bd-lab,
  .r-planches .deck .pl .pl-mat-indice{ font-size:13px; }

  /* Les quatre curseurs de ponderation de l'extrait 08 (constat 81) : en
     deux colonnes de 151 px pour une course de 0 a 100 par pas de 5, 7 px
     par pas sous le pouce, et le libelle touchait la valeur. La regle d'une
     colonne (section 4) ne valait que sous 340 px de planche, 353 px a
     393 : relevee a 400 px de planche, une colonne sur tout telephone
     (course de 287 px, 14 px par pas). */
  @container (max-width:400px){
    :where(.r-planches) .justif .deck .curs-grille{ grid-template-columns:1fr; }
  }
}
/* Le bouton « Retablir la ponderation du rapport » de l'extrait 08
   (constats 81, 88 et 176) : 34 px de haut au toucher. La regle de 44 px
   (section 2) a une specificite de 0,1,0, celle de rapport-design.css
   (.deck .pl .btn-sm, 34 px) l'emporte avec 0,3,0. Le prefixe reel la
   bat, au doigt et sous 760 px seulement. */
@media (max-width:760px) and (pointer:coarse){
  .r-planches .deck .pl .btn-sm{ min-height:44px; }
}

/* =========================================================================
   14. TELEPHONE : LA SECONDE PASSE
   Seconde passe telephone, delegation de Raphael (09/10/2026, audit du
   8 octobre, constats 64, 65 et 79). A partir de 761 px, rien ne change.
   - Les dix extraits commentes (constat 64), sous 760 px : dix cartes sur
     trois ecrans (2 571 px a 393 px) qui reprenaient mot pour mot ce que
     le lecteur affiche deja au-dessus de chaque planche (data-sur) et sous
     elle (la legende, data-legende). Ils deviennent une liste de dix
     lignes d'au moins 48 px dans une seule bulle blanche, le dessin du
     sommaire des pages sur le bleu (.k-sommaire, pages.css) : le numero en
     Klein, le titre de l'extrait, la pastille fleche, un filet entre deux
     lignes. Chaque ligne ouvre son extrait dans le lecteur, comme la carte
     le faisait (script du lecteur, data-r-extrait, puis l'ancre
     #planches). Ce que presente l'extrait et sa phrase sont masques, ils
     restent dans la page. L'anneau de focus passe au Klein : blanc, il
     disparaissait sur la bulle. Sans script, les lignes ne
     choisiraient pas leur extrait et les legendes du lecteur sont
     retirees (section 11) : les dix cartes restent entieres (html.js).
   - Le sommaire de l'extrait 01 (constat 79), a 760 px et moins :
     rapport-design.js cree au telephone un detail ferme au chargement,
     sous l'intitule « Ce que contient le rapport » devenu le bouton. Le
     bouton prend le dessin de « Voir les flux du plan », le detail de la
     planche 04 (section 12a), qui lui ne se replie qu'a 620 px et moins :
     ses declarations sont reprises ici pour la bande de 621 a 760 px, ou
     le sommaire tient en deux colonnes de quatre lignes (430 px a 700 px
     de large). L'intitule s'y lit tel qu'il est ecrit dans la page, en
     casse de phrase, comme « Voir les flux du plan » dans le meme lecteur :
     il perd les capitales et l'espacement de l'etiquette qu'il etait, son
     texte ne change pas. Le detail s'ecarte du paragraphe de la mission
     comme l'intitule le faisait (12 px, .pl-st.suite au telephone).
     Jusqu'a la reprise du meme jour, il ne se repliait qu'a 620 px et moins.
   - Tout porte sur l'ecran seul (screen), comme la requete de
     rapport-design.js (reprise du meme jour) : imprimee depuis un
     ordinateur, sur A4 ou Letter (boite de 718 a 739 px), la page garde
     ses dix cartes entieres et le sommaire ouvert, comme avant.
   ------------------------------------------------------------------------- */
@media screen and (max-width:760px){
  .js .k-page .r-extraits{
    display:block; padding:4px 20px; border-radius:var(--k-r-bulle); background:var(--k-blanc);
  }
  .js .k-page .r-extraits > li{ display:block; }
  .js .k-page .r-extraits > li + li{ border-top:1px solid var(--k-trait); }
  .js .k-page .r-extraits .k-carte-article{
    grid-template-columns:34px minmax(0,1fr) 20px; grid-template-areas:"tete titre fleche";
    gap:8px; min-height:48px; padding:8px 0; border-radius:0; background:none;
  }
  .js .k-page .r-extraits .k-carte-article-duree,
  .js .k-page .r-extraits .k-carte-article-resume{ display:none; }
  .js .k-page .r-extraits .k-carte-article .k-puce{
    min-height:0; padding:0; border-radius:0; background:none;
    font-size:13px; font-weight:500; letter-spacing:.06em; font-variant-numeric:tabular-nums;
  }
  .js .k-page .r-extraits .k-carte-article-titre{ font-size:16px; line-height:1.25; text-wrap:pretty; }
  .js .k-page .r-extraits .k-carte-article:active{ transform:none; }
  .js .k-page .r-extraits .k-carte-article:focus-visible{ outline-color:var(--k-klein); outline-offset:2px; border-radius:8px; }
}
@media screen and (max-width:760px){
  .r-planches .deck .pl .pl-detail--sommaire{ margin-top:12px; }
  .r-planches .deck .pl .pl-detail--sommaire > summary{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-height:44px; margin:0; padding:10px 14px;
    border:1px solid var(--rd-local-border, var(--rule)); border-radius:10px;
    background:var(--rd-local-panel, var(--paper)); color:var(--rd-local-text, var(--ink));
    font-size:15px; font-weight:500; line-height:1.3; letter-spacing:0; cursor:pointer; list-style:none;
  }
  .r-planches .deck .pl .pl-detail--sommaire > summary::-webkit-details-marker{ display:none; }
  .r-planches .deck .pl .pl-detail--sommaire > summary::after{
    content:""; flex:none; width:8px; height:8px; margin-right:4px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
  }
  .r-planches .deck .pl .pl-detail--sommaire[open] > summary{ margin-bottom:14px; }
  .r-planches .deck .pl .pl-detail--sommaire[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
  .r-planches .deck .pl .pl-detail--sommaire > summary:focus-visible{ outline:2px solid var(--rd-local-accent, var(--klein)); outline-offset:3px; }
  .r-planches .justif .deck .pl .pl-detail--sommaire > summary > .pl-st{
    margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:inherit;
    text-transform:none; color:inherit;
  }
}