/* =========================================================================
   ARTIS VALORISATION, REFONTE : LES PAGES A SCENE (scene.css)
   L'accueil et les trois pages d'offre (490 EUR, 990 EUR, sur devis), apres
   socle.css. Tire le 30/09/2026 de f-page.css (essais F et G) : la page sur
   la scene (.f-page), la scene fixe (image de repli, puis la toile WebGL de
   scene.js), les classes de texte, les bulles, surfaces claires et bandes,
   les grilles, les sections que l'accueil partage avec les offres
   (deroulement, reperes par secteur, questions, appel final), les chiffres
   de tete et les contrastes sur les moments clairs de la scene.
   Les regles marquees sans usage ne servent a aucune page a ce jour : elles
   restent avec leur famille de classes.
   Ce qui ne sert qu'a l'accueil est dans accueil.css.
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. LA PAGE ET LES CLASSES DE TEXTE
   ------------------------------------------------------------------------- */
/* Page : fond de secours = fond de scene ; le texte n'attend rien. */
/* Aube (01/10/2026, demande de Raphael : un fond plus clair, aux couleurs
   de l'aube) : la scene passe du marine a l'ardoise bleutee (fond moyen
   rgb 97,108,137 a la couverture, lueur peche en bas ; scene.js, REGLAGES
   aube). Deux consequences ici :
   - le fond de secours, visible avant l'image fixe, prend la couleur
     moyenne de cette image : plus d'eclair marine au chargement ;
   - l'azur #7FB0E8 tombait a 1,7:1 sous « la valeur » et a 2,2:1 sous les
     chiffres (1 440, sans voile). Sur la scene, l'accent prend un azur plus
     pale de la meme famille (#A3C7F2), pose sur le voile d'ardoise de la
     couverture (accueil.css, offre.css). Les bandes et les bulles gardent
     --g-azur.
   Ambiance intermediaire (02/10/2026, demande de Raphael : un peu plus
   fonce, entre la nuit et l'aube). Le milieu se prend dans l'espace de
   l'oeil (gris sRGB moyen de l'ecran), pas en luminance lineaire : pris en
   lineaire, il ne faisait que 28 % du chemin vers la nuit. Accueil, Chrome
   WebGL 1 440 x 900, gris moyen nuit (9d73060) / milieu / aube (04f63a2) :
   couverture 49 / 79 / 108, deroulement 95 / 117 / 138, ecran suivant
   121 / 141 / 161, appel final 72 / 85 / 95. Fond moyen de l'image fixe
   rgb 53,63,94 ; le fond de secours la suit (#353f5e, sa couleur moyenne).
   Bleu profond (03/10/2026, demande de Raphael : un bleu plus fonce, plus
   proche du site de depart). La scene va aux trois quarts du chemin de
   l'intermediaire vers la nuit, dans le meme espace de l'oeil : gris moyen
   de l'accueil (Chrome WebGL 1 440 x 900) haut 80,6 devenu 59,3 (nuit 52,0),
   interlocuteur 114,6 devenu 99,6 (94,8), bas 88,2 devenu 79,0 (75,9).
   Ce qui suit la scene suit le meme chemin : les voiles passent de
   l'ardoise profonde #121a3a a rgba(5,12,54), aux trois quarts vers le
   marine de la nuit (sur la scene foncee, l'ardoise eclaircissait les
   pixels les plus sombres au lieu de les ombrer) ; l'accent passe de
   l'azur pale #A3C7F2 a #88B6EB, aux trois quarts vers l'azur #7FB0E8 du
   site de depart ; fond moyen de l'image fixe rgb 24,31,59, repris par le
   fond de secours (#181f3b).
   Le bleu du rapport, sur toutes les pages a scene (04/10/2026, point 12
   de Raphael : « la couleur de l'accueil doit etre la meme sur les autres
   pages »). Le 04/10 au soir, l'accueil seul (accueil.css) s'etait
   rapproche du bleu du rapport, Pantone #15253E : un voile fixe turquoise
   a 10 % sur la scene, la bande « Le contenu du rapport » en #15253E, les
   voiles de la couverture en rgb 10,20,36. Les sept autres pages a scene
   (trois offres, /valorisation, A propos, methodologie, calculateur)
   restaient sur le bleu violace de la scene nue et leurs bandes sombres
   sur #03021b. Les trois reglages valent maintenant pour toutes :
   - --f-aplat (jeton de socle.css) : les bandes sombres
     (.f-bande--marine) prennent #15253E ;
   - --f-voile (jeton de socle.css) : la couleur de tous les voiles poses
     sous le texte (scene.css, accueil.css, offre.css, p-*.css, pages.css),
     rgb 10,20,36, le bleu du rapport assombri de moitie, au lieu du
     marine de la nuit (0,7,53 ; 5,12,54) et de l'ardoise (18,26,58), qui
     faisaient des taches violettes ;
   - le voile fixe turquoise, ci-dessous. */
.f-page{ --f-azur-scene:#88B6EB; --f-scene-fond:#181f3b; }
/* Le voile fixe : peint juste au-dessus de la scene (meme couche, -1, plus
   loin dans le document) et sous tout le contenu, il la tire vers le bleu
   du rapport, plus gris et moins violet (haut de la couverture de
   l'accueil, Chrome WebGL 1 440 x 900 : rgb 17,23,50 devenu 21,37,62). */
.f-page::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:rgba(57,163,170,.10); }
.f-page{
  margin:0; background:var(--f-scene-fond); color:var(--f-texte);
  font:var(--f-g-texte) var(--f-t-texte)/var(--f-l-texte) var(--f-police);
  letter-spacing:var(--f-serre);
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  border-top:3px solid var(--f-lisere);
}
/* Le telephone sans lisere (10/10/2026, demande de Raphael, vue sur son
   iPhone : « il y a une barre horizontale tout en haut de la page au-dessus
   de Artis Valorisation et les deux traits, enleve-la »). Sous 761 px, a
   l'ecran, le corps n'a plus sa bordure Klein de 3 px. La barre et ses
   deux bulles ne bougent pas (elle est fixe, a 16 px du haut, socle.css).
   Le contenu remonte de 3 px, sur toutes les pages du telephone, sur la
   scene comme sur le bleu (meme regle dans pages.css 2), et les voiles
   des couvertures (offres, A propos, methodologie) partent du haut de
   l'ecran. Une bordure gardee transparente aurait laisse voir, au-dessus
   de ces voiles, 3 px de scene plus claire : un filet a la place du
   lisere. A 761 px et au-dela, le lisere reste (l'impression le retirait deja). */
@media screen and (max-width: 760px){
  .f-page{ border-top:0; }
}
/* Etiquette : capitales espacees */
.f-etiquette{ display:block; font-size:var(--f-t-etiquette); line-height:1; font-weight:500;
  letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; margin:0 0 var(--f-ecart-etiquette); }
/* Titres */
.f-titre-affiche{ font-size:var(--f-t-affiche); line-height:var(--f-l-affiche); font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); margin:0; }
.f-titre-section{ font-size:var(--f-t-section); line-height:var(--f-l-section); font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); margin:0; text-wrap:balance; }
/* Le -0.03em est pose sur chaque classe, et non herite de .f-page : une
   valeur en em herite deja calculee (-0.48px, celle du parent a 16 px).
   Pose ici, elle suit la taille propre : -1.08px a 36, -0.6px a 20. */
.f-titre-carte-l{ font-size:var(--f-t-carte-l); line-height:var(--f-l-carte-l); font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); margin:0; }
.f-titre-carte{ font-size:var(--f-t-carte); line-height:var(--f-l-carte); font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); margin:0; }
.f-chapo{ font-size:var(--f-t-chapo); line-height:var(--f-l-chapo); letter-spacing:var(--f-serre); margin:0; max-width:600px; text-wrap:pretty; }
.f-texte{ font-size:var(--f-t-texte); line-height:var(--f-l-texte); letter-spacing:var(--f-serre); margin:0; }
.f-long{ line-height:var(--f-l-long); }
.f-chiffre{ font-size:var(--f-t-chiffre); line-height:var(--f-l-chiffre); font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); margin:0; }
.f-numero{ font-size:16px; color:var(--f-attenue-40); }
/* Au telephone, les grands titres equilibrent leurs lignes (09/10/2026,
   audit telephone du 8 octobre, constat 169 : vingt-six titres laissaient
   un mot seul sur leur derniere ligne a 393 px). Ceux qui posent deja leur
   retour a la ligne (couverture de l'accueil, offres) gardent le leur. */
@media (max-width: 760px){
  .f-titre-affiche{ text-wrap:balance; }
}
/* En-tete centre (bandes) ou en deux colonnes (titre a gauche, chapo a droite a 856px) */
.f-entete-centre{ text-align:center; display:grid; justify-items:center; margin-bottom:var(--f-ecart-titre-contenu); }
.f-entete-centre .f-chapo{ margin-top:var(--f-ecart-titre-texte); }
.f-entete-duo{ display:grid; grid-template-columns:1fr 544px; gap:40px; align-items:end; margin-bottom:var(--f-ecart-titre-contenu); }

/* =========================================================================
   2. BULLES, SURFACES CLAIRES ET BANDES
   ------------------------------------------------------------------------- */
/* Bulles (clarte, 30/09/2026) : le panneau et les cartes, de verre sombre
   dans la reference, deviennent des bulles blanches posees sur la scene
   (ombre marine large) ; dans une bande de papier, une ombre a peine et un
   filet. Le flou n'a plus rien a montrer sous un fond opaque : coupe. */
.f-panneau{ background:var(--f-blanc); border-radius:var(--f-r-bulle); padding:var(--f-pad-panneau);
  box-shadow:var(--f-ombre-bulle); display:flex; flex-direction:column; gap:40px; }
.f-carte{ background:var(--f-blanc); border-radius:var(--f-r-bulle); padding:var(--f-pad-carte);
  box-shadow:var(--f-ombre-bulle); display:flex; flex-direction:column; gap:24px; }
.f-bande .f-carte, .f-bande .f-panneau{ box-shadow:var(--f-ombre-douce), inset 0 0 0 1px var(--f-filet-encre); }
.f-carte-image{ padding:var(--f-pad-carte-image); }
.f-carte-blanche{ background:var(--f-blanc); color:var(--g-encre); }
.f-carte-noire{ background:var(--f-noir); color:var(--f-blanc); box-shadow:none; }
/* temoignages : une bulle blanche sur le papier */
/* Le cadre du produit : un creux de papier dans la bulle blanche */
.f-cadre-produit{ background:var(--f-papier-2); border-radius:var(--f-r-panneau); overflow:hidden; }
.f-bande .f-cadre-produit{ background:var(--f-blanc); box-shadow:inset 0 0 0 1px var(--f-filet-encre); }
.f-cadre-produit img{ display:block; width:100%; height:auto; }
/* Les surfaces claires : les jetons de texte y prennent l'encre. Tout ce qui
   lit --f-texte, --f-attenue-* ou --f-verre-bouton suit sans autre regle
   (textes, filets, anneaux de focus, boutons, pastilles). */
.f-clair, .f-bande, .f-panneau, .f-carte, .f-carte-blanche, .g-bulle, .gs{
  --f-texte: var(--g-encre); --f-texte-aplat: var(--g-encre); --f-texte-sombre: var(--g-encre);
  --f-attenue-70: var(--f-encre-2); --f-attenue-50: var(--f-encre-3); --f-attenue-40: var(--f-encre-3);
  --f-attenue-20: rgba(11,29,54,.18);
  --f-filet-sombre: var(--f-filet-encre);
  /* bouton plein : l'encre ; bouton de verre : un contour */
  --f-bouton-plein-fond: var(--g-encre); --f-bouton-plein-texte: var(--f-blanc); --f-bouton-plein-survol: #162c4f;
  --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);
  color:var(--g-encre);
}
/* Bandes opaques : elles cachent la scene (scene.js lit la classe).
   Clarte : papier d'Artis. Une seule exception, demandee par Raphael :
   « Le contenu du rapport » garde son bleu marine (.f-bande--marine),
   jetons de texte blancs rendus. */
.f-bande{ background:var(--f-papier); color:var(--g-encre); }
.f-bande.f-bande--marine{
  --f-texte:#ffffff; --f-texte-aplat:#f2eeee; --f-texte-sombre:#000000;
  --f-attenue-70:rgba(255,255,255,.70); --f-attenue-50:rgba(255,255,255,.62); --f-attenue-40:rgba(255,255,255,.62); --f-attenue-20:rgba(255,255,255,.20);
  --f-filet-sombre:#000000;
  --f-bouton-plein-fond:var(--f-blanc); --f-bouton-plein-texte:var(--f-noir); --f-bouton-plein-survol:#e9ebf0;
  --f-verre-bouton:rgba(255,255,255,.10); --f-bouton-verre-fond:initial; --f-bouton-verre-survol:initial; --f-bouton-verre-bord:none;
  --f-pastille-verre:var(--f-blanc); --f-pastille-verre-fleche:var(--f-noir);
  background:var(--f-aplat); color:var(--f-texte-aplat);
}
.f-bande--entre{ padding-top:var(--f-bande-haut); }
.f-bande--sort{ padding-bottom:var(--f-bande-haut); }
.f-bande--continue{ padding-bottom:var(--f-bande-bas); }
.f-souffle{ margin-top:var(--f-souffle); }

/* =========================================================================
   3. GRILLES, DUO COLLANT, RANGEES, LISTES
   ------------------------------------------------------------------------- */
/* Grilles */
.f-grille-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--f-ecart-grille); }
.f-grille-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--f-ecart-grille); }
/* Duo collant : titre a gauche (600 px) qui reste a 120 px, cartes a droite (680 px) */
.f-duo-colle{ display:grid; grid-template-columns:minmax(0,600px) minmax(0,680px); justify-content:space-between; align-items:start; column-gap:clamp(32px, 4vw, 48px); }
.f-duo-colle > .f-colle{ position:sticky; top:var(--f-colle-haut); display:flex; flex-direction:column; }
.f-duo-colle > .f-pile{ display:flex; flex-direction:column; gap:var(--f-ecart-grille); }
/* Filet et liste a etoile (prix) */
.f-filet{ height:1px; border:0; margin:0; background:var(--f-filet-sombre); }
.f-carte-noire .f-filet{ background:var(--f-filet-clair); }
.f-liste-etoile{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.f-liste-etoile li{ display:grid; grid-template-columns:12px 1fr; gap:8px; align-items:start; }
.f-liste-etoile li::before{ content:"\2726"; font-size:12px; line-height:1.6; color:var(--f-noir); }
.f-carte-noire .f-liste-etoile li::before{ color:var(--f-blanc); }

/* =========================================================================
   4. TELEPHONE : TOUT S'EMPILE
   ------------------------------------------------------------------------- */
/* Telephone : tout s'empile, gouttieres de 20 px */
@media (max-width: 760px){
  .f-entete-duo, .f-duo-colle, .f-grille-2, .f-grille-3{ grid-template-columns:1fr; }
  .f-duo-colle > .f-colle{ position:relative; margin-bottom:40px; }
}

/* =========================================================================
   5. LA SCENE FIXE
   ------------------------------------------------------------------------- */
/* --- La scene fixe -------------------------------------------------------
   Un calque de la hauteur de la grande fenetre (100lvh : la barre d'adresse
   de l'iPhone qui se replie ne le redimensionne pas), derriere toute la
   page. Trois etats, du plus sur au plus riche : le fond de secours ;
   l'image fixe de la couverture, rendue par la scene H elle-meme
   (scene-repli-*.webp, moyenne de 48 images : couleur juste, sans texture) ;
   la toile WebGL de scene.js, qui apparait en fondu (700 ms, styles poses
   par le moteur sur .h-scene-toile). Hote : data-h-scene-hote ;
   chargement : scene-chargeur.js.
   Sans grain (04/10/2026, demande de Raphael : « il y a des petits picots
   sur le fond des pages, les couleurs de fond du site ne sont pas
   lisses ») : la tuile grain.webp posee sur l'image fixe (.f-scene::before,
   8 % en lumiere crue) est retiree, comme le grain anime du moteur. */
.f-scene{
  position:fixed; left:0; top:0; width:100%; height:100vh; z-index:-1;
  overflow:hidden; pointer-events:none; contain:strict;
  background-color:var(--f-scene-fond);
  background-image:url("../img/scene-repli-portrait.webp");
  background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
}
@supports (height:100lvh){
  .f-scene{ height:100lvh; }
}
@media (min-aspect-ratio: 11/10){
  .f-scene{ background-image:url("../img/scene-repli-paysage.webp"); }
}
/* Voile reserve a l'image fixe (mouvement reduit, sans WebGL, Economie de
   donnees, ou avant que la toile soit prete) : l'image ne bouge pas, et son
   quart haut gauche clair (portrait, environ rgb 135,167,194) resterait
   sous tout le texte blanc. Le haut est assombri de moitie, fondu a rien a
   45 % de la hauteur. Pose en ::after (peint au dessus de la toile), il
   s'efface avec le meme fondu que la toile apparait : pas de saut de
   clarte ; il revient si le contexte WebGL est perdu. Aube : l'image fixe
   est l'ardoise de la scene ; le voile prend la meme ardoise profonde que
   les autres (#121a3a) et passe de 50 a 35 % : marine a 50 %, il posait
   une bande sombre en haut de l'image claire. 04/10/2026 : couleur des
   voiles (--f-voile, section 1). */
.f-scene::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(var(--f-voile),.35),rgba(var(--f-voile),0) 45%);
  transition:opacity 700ms cubic-bezier(.2,.7,.2,1);
}
.f-scene.h-scene--pret::after{ opacity:0; }
/* Le bleu du telephone (06/10/2026, Raphael : « j'ai l'impression que le
   bleu du telephone n'est pas le meme que celui de l'ordi »). En portrait,
   le moteur de la scene compose autrement (sphere plus haute, disque plus
   eclaire) : mesure du 06/10/2026, Chrome 393 x 852 contre 1440 x 900,
   le haut de l'accueil et des pages a scene sortait a L 27,8 au telephone
   contre 17,3 a l'ordinateur (ecart de couleur dE00 7,7), le deroulement a
   L 38 contre 20 (dE00 14). Sous 761 px, la toile WebGL prete recoit un
   voile marine (rgb 6,14,41) dont l'opacite suit l'etat de la scene sous
   les yeux (socle.js 1e, --f-tel-voile, de 0 a 0,58) : apres le voile,
   dE00 1,2 en haut de l'accueil, 0,7 en haut des autres pages, 2 au plus
   sur la plupart des sections. Restent plus loin les etats que le portrait
   compose vraiment autrement : le deroulement de l'accueil (6,3), la
   synthese de la methodologie (9,8), la demonstration de l'accueil, plus
   sombre au telephone (13,8). L'image fixe (sans WebGL) n'en a pas
   besoin : elle etait deja a 3,5 au plus. Le voile apparait avec le meme
   fondu que la toile. Au-dela de 760 px, rien ne change. */
@media (max-width: 760px){
  .f-scene.h-scene--pret::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:rgb(6,14,41); opacity:var(--f-tel-voile, 0);
    animation:f-tel-voile-entree 700ms cubic-bezier(.2,.7,.2,1);
  }
}
@keyframes f-tel-voile-entree{ from{ opacity:0; } }

/* =========================================================================
   6. LA BARRE SUR LA SCENE
   ------------------------------------------------------------------------- */
/* Le verre de la reference (6 %, flou 9) partout ou la barre passe sur la
   scene ou sur l'aplat. Un verre dense (il vaut le rendu de la reference sur
   l'aplat, #121128) seulement quand la barre recouvre une surface blanche :
   planche, carte de l'interlocuteur, bouton clair (socle.js pose
   .f-barre--dense). Le nom prend alors la meme plaque, le temps du passage :
   #ebe9e5 sur blanc ne se lirait pas. */
/* Clarte, correctifs du jury : la plaque dense marine (rgba 18,17,40,.66)
   donnait un gris sale sur les bulles blanches, et WebKit, sans flou,
   laissait lire le texte de dessous a travers le nom. Des que la
   couverture est passee, la barre prend le verre blanc (92 %) et l'encre,
   comme sur les bandes papier : voir .f-barre--claire, juste dessous. */
/* Sur la scene claire (souffle, haut du deroulement, appel final), le verre
   a 6 % laisse les liens blancs a 3,6:1 : la pilule et le nom prennent un
   verre teinte de marine a 45 % (scene.js pose .f-scene-claire).
   :not(.go-barre-blanche) : sur les pages d'offre, offre.js pose cette
   classe quand une bulle blanche passe sous la barre, et offre.css met alors
   l'encre. Sans l'exclusion, ces deux regles (poids 0,5,0) gardaient le
   verre marine sous l'encre : 1,0 a 1,3:1, mesure le 01/10 sur
   /evaluation-pme a 375, 600, 675 et 750 px de defilement (1 440 px). */
/* Paysage seulement : en portrait, le nom a deja sa plaque blanche et son
   encre (section 15) ; depuis l'aube, la couverture est claire et ce verre
   marine, pose par-dessus, laissait l'encre sur du marine (1,0:1, WebKit 393).
   Aube : la scene est claire a chaque etat (clarte 1 partout dans scene.js),
   et l'image fixe aussi. Sans moteur (mouvement reduit, sans WebGL, avant
   la premiere image), personne ne pose .f-scene-claire : la meme regle vaut
   tant que la toile n'est pas prete (liens blancs a 3,8:1 sur l'image fixe
   a 1 280 sans elle). */
@media (min-aspect-ratio: 11/10){
  .f-scene-claire .f-barre:not(.f-barre--dense):not(.f-barre--claire):not(.go-barre-blanche):not(.f-barre--ouverte) .f-marque,
  .f-page:has(> .f-scene:not(.h-scene--pret)) .f-barre:not(.f-barre--dense):not(.f-barre--claire):not(.go-barre-blanche):not(.f-barre--ouverte) .f-marque{
    background:rgba(18,17,40,.45);
    -webkit-backdrop-filter:blur(var(--f-flou-barre)); backdrop-filter:blur(var(--f-flou-barre));
  }
}
@media (min-width: 1181px){
  .f-scene-claire .f-barre:not(.f-barre--dense):not(.f-barre--claire):not(.go-barre-blanche) .f-liens,
  .f-page:has(> .f-scene:not(.h-scene--pret)) .f-barre:not(.f-barre--dense):not(.f-barre--claire):not(.go-barre-blanche) .f-liens{ background:rgba(18,17,40,.45); }
}
@media (max-width: 1180px){
  .f-page .f-burger:focus-visible{ outline:2px solid var(--g-klein); outline-offset:-5px; }
}

/* =========================================================================
   7. GROUPE 1 : DEMONSTRATION, CONCEPTION, CONTENU DU RAPPORT
   ------------------------------------------------------------------------- */
/* Reperes par secteur : titre a gauche, liste a droite, alignes sur le
   texte des rangees (40 + 24 + 24) */
.f1-reperes{ margin-top:var(--f-rang-ecart); padding:0 48px; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,680px); gap:40px; align-items:start; }
.f1-reperes ul{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.12); }
.f1-reperes li{ border-bottom:1px solid rgba(255,255,255,.12); }
.f1-reperes a{ display:flex; align-items:center; justify-content:space-between; gap:16px; letter-spacing:var(--f-serre);
  min-height:60px; padding:14px 0; color:var(--f-texte-aplat); text-decoration:none;
  font-size:var(--f-t-chapo); line-height:1.2; }
.f1-reperes .f-pastille{ background:var(--f-blanc); color:var(--f-noir); transition:transform .2s var(--f-entree-courbe); }
@media (hover:hover){
  .f1-reperes a:hover span:first-child{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
  .f1-reperes a:hover .f-pastille{ transform:translateX(3px); }
}
@media (max-width: 1100px) and (min-width: 761px){
  .f1-reperes{ grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (max-width: 760px){
  .f1-reperes{ grid-template-columns:minmax(0,1fr); gap:16px; padding:0; margin-top:60px; }
  .f1-reperes a{ font-size:18px; min-height:56px; }
}

/* =========================================================================
   8. GROUPE 2 : DEROULEMENT, INTERLOCUTEUR, CONFIDENTIALITE, AVIS
   ------------------------------------------------------------------------- */
.f2-section{
  /* Ecart entre deux duos collants : Services -> Benefits = 200 px (d_dump :
     derniere carte 9034, etiquette suivante 9234) ; 120 au telephone. */
  --f2-entre: var(--f-entre-duos);
}
/* --- Colonne collante ----------------------------------------------------
   Reference : etiquette a y 7412 (meme ligne que le haut de la premiere
   carte), titre 52 px plus bas (12 + 40), chapo 12 px sous le titre. */
.f2-colle .f-titre-section{ max-width:600px; }
/* Scene H : le deroulement passe sur le moment clair de la scene (etat
   deroul : trois pieces aux aretes turquoise, fond gris bleu). L'etiquette et
   le chapo blancs y tombaient a 3:1 ; un voile doux, local, suit la colonne
   collante, comme celui de l'appel final. Meme voile sous les titres de
   l'interlocuteur et de la confidentialite (au telephone, leurs etiquettes
   passent sur l'arete eclairee de la grande piece : 3,5:1). */
.f2-section{ overflow-x:clip; }
/* le voile deborde la colonne : pas de defilement horizontal (telephone) */
.f2-section .f-colle{ isolation:isolate; }
/* Aube : le haut du deroulement est un peu plus clair (chapo a 4,3:1 a
   1 440 avec le voile d'avant) ; le voile passe de 62 a 68 %, et d'un marine
   pur a une ardoise profonde (#121a3a) : sur le fond lavande, le marine
   faisait une tache bleue, l'ardoise se fond dans la scene. Il deborde de
   40 px en haut et de 20 px en bas : l'etiquette, en haut de la colonne,
   passait sur l'arete eclairee d'une piece au bord du voile (4,4:1 a
   1 440), et le chapo doit rester dans sa partie pleine. Le bord s'adoucit
   (plein a 58 %, 34 % a 82 %, rien au bord) : sur l'ardoise claire de
   l'interlocuteur et de la confidentialite, l'arret net de l'ancien
   degrade dessinait un ovale sombre autour des titres.
   Ambiance intermediaire (02/10/2026) : sur la scene plus sombre, le voile
   plein se lisait encore en ovale sous l'interlocuteur et la
   confidentialite. Allege d'un cinquieme (68, 66, 34 % devenus 54, 53,
   27 %) : etiquette « Le deroulement » de 12 px a 5,3:1 au pire (offre a
   990, 1 024), chapo au-dessus de 5,8:1.
   Bleu profond (03/10/2026) : meme dessin, couleur rgba(5,12,54).
   04/10/2026 : couleur des voiles, --f-voile (section 1). */
.f2-section .f-colle::before{
  content:""; position:absolute; z-index:-1; inset:-104px -120px -84px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--f-voile),.54) 0, rgba(var(--f-voile),.53) 58%, rgba(var(--f-voile),.27) 82%, rgba(var(--f-voile),0));
}
/* Deux colonnes : le bas gauche du chapo (« et du reglement », debut des
   lignes) tombait dans le fondu du voile, sur les stries claires des
   lames (4,3:1 au 2e centile a 1 440, defilement 9 400 et 10 000). Le
   voile descend de 40 px de plus et s'etend de 40 px a gauche, hors de la
   colonne : sa partie pleine couvre tout le chapo (6,4:1 au pire) sans
   foncer davantage, et le debord a gauche est coupe par la section. Au
   telephone, la colonne est centree : le voile reste symetrique. */
@media (min-width: 761px){
  .f2-section .f-colle::before{ inset:-104px -120px -124px -160px; }
}
/* Au telephone (09/10/2026, verification de l'audit telephone du 8
   octobre) : les marges entre sections sont passees a 48 px, et les 104 px
   que le voile deborde au-dessus de la colonne tombaient sur la surface
   claire de la section precedente (bas de la bulle de la demonstration
   sous « Votre interlocuteur » a l'accueil, assombri jusqu'a 44 niveaux,
   bas de la bande « Les situations traitees » de l'offre sur devis,
   jusqu'a 62 niveaux). Le haut du voile s'efface : rien sur ses 48
   premiers pixels, fondu jusqu'a 104 px, plein a partir du haut de la
   colonne. L'etiquette, le titre et le chapo gardent tout leur voile, donc
   leur contraste. */
@media (max-width: 760px){
  .f2-section .f-colle::before{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent 48px, #000 104px);
    mask-image:linear-gradient(to bottom, transparent 0, transparent 48px, #000 104px);
  }
}
/* Les cartes passent au-dessus de la colonne et de son voile. La colonne
   est positionnee (collante, ou relative au telephone) et la pile ne
   l'etait pas : le voile, qui deborde de 120 px a droite et de 84 a 124 px
   en bas, se peignait sur les cartes blanches. A 1 024, les deux colonnes
   se touchent (600 + 680 px dans 944) : « Premier echange », encre sur
   blanc, y tombait a 7,0:1 ; empilees (offre a 990, 761 a 1 100 px),
   tout le haut de la premiere carte passait sous le voile. */
.f2-section .f-duo-colle > .f-pile{ position:relative; z-index:1; }
.f2-chapo-colle{ margin-top:var(--f-ecart-titre-texte); }
.f2-chapo-colle strong{ font-weight:var(--f-g-titre); }
/* 500 : la graisse la plus forte de la reference */
/* --- Cartes etapes (Services) ---------------------------------------------
   680 de large, pad 32, gap 24 ; hauteurs 300 a 400 (reference 400, 450,
   300, 400, avec illustration) : ici 400 / 300 en alternance, texte pousse
   en bas comme « We provide AI-driven tools... » (y 7732 pour une carte
   commencant a 7412). Largeur du texte : 493 px dans la reference. */
/* G : cartes homogenes. Plus de hauteur imposee ni de texte pousse en bas :
   la carte suit la quantite de texte, et les quatre gardent le meme rythme
   interne (etiquette, 16, titre, 16, texte ; pad 32). */
.f2-etape{ gap:16px; }
.f2-etape-n{ margin:0; }
.f2-etape .f-titre-carte-l{ max-width:616px; }
/* Point 5 de Raphael (04/10/2026) : le texte d'une carte ou d'un panneau va
   jusqu'a son bord (les 560 et 600 px de .f-chapo laissaient jusqu'a
   320 px de blanc a droite a 1 024). */
.f2-etape-texte{ line-height:1.4; max-width:none; }
.f-panneau .f-chapo{ max-width:none; }
/* bouton en bas de carte, le gap de 24 reste le minimum ; p sans marge basse */
/* Pastille de 20 px dans un bouton de 48 : la reference garde 48 (Get Started
   148 x 48) ; sans cette marge negative la pastille pousse le bouton a 52. */
/* Le nom compose ne se coupe pas a son trait d'union. */
.f2-insecable{ white-space:nowrap; }
/* 300 dans la reference : le nom n'est pas gras */
/* --- Telephone (393) -------------------------------------------------------
   Reference mobile : en-tetes des duos centres (SERVICES, BENEFITS),
   chapo 18 centre, cartes pleine largeur pad 20, titres de carte 24/27.6,
   texte 18 ; temoignages pad 24, ecart 20, hauteur libre. */
@media (max-width:760px){
  .f2-colle{ align-items:center; text-align:center; }
  .f2-colle .f-chapo{ max-width:none; }
  .f2-etape{ gap:12px; }
  .f2-etape-texte{ max-width:none; }
}

/* =========================================================================
   9. GROUPE 3 : L'OFFRE, LES QUESTIONS, L'APPEL FINAL
   ------------------------------------------------------------------------- */
.f3-offre, .f3-faq, .f3-appel, .f3-pied{
  --f3-entre-sections: var(--f-entre-bande);
  --f3-tete-bande: var(--f-tete-bande);
  --f3-pas-liste: 16px;
}
@media (max-width: 760px){
  .f3-offre, .f3-faq, .f3-appel, .f3-pied{
    --f3-pas-liste: 14px;
  }
}
/* ---------- VOS QUESTIONS --------------------------------------------- */
.f3-faq{ padding-top:calc(var(--f3-entre-sections) - var(--f-bande-bas)); }
/* 05/10/2026 : la colonne des questions passe de 900 a 760 px. Depuis le
   point 5 de Raphael (04/10, le texte jusqu'au bord de sa carte), la
   reponse n'a plus de mesure de 68 ch : sur 852 px, elle comptait 115 a
   122 signes par ligne en moyenne a l'ordinateur. La carte se resserre, et
   la reponse va toujours jusqu'a son bord, sur 712 px : sa plus longue
   ligne compte 109 signes (115 avec les 68 ch d'avant). Sur l'accueil, les reperes par secteur qui suivent
   gardent la largeur des questions (accueil.css 8). */
.f3-faq-liste{ max-width:760px; margin-inline:auto; display:grid; gap:8px; }
/* Carte 6 % sur l'aplat, sans flou (rendu #121128), rayon 8. */
.f3-faq .f3-question{
  display:block; padding:0; gap:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.f3-question > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:44px; padding:24px;
  font-size:20px; line-height:26px; font-weight:var(--f-g-titre); letter-spacing:var(--f-serre);
  color:var(--f-texte-aplat);
  border-radius:var(--f-r-carte);
  -webkit-tap-highlight-color:transparent;
}
.f3-question > summary::-webkit-details-marker{ display:none; }
.f3-question > summary::marker{ content:""; }
.f3-question > summary:focus-visible{ outline:2px solid var(--f-texte); outline-offset:2px; }
.f3-q{ min-width:0; text-wrap:pretty; }
/* DM Sans (30/09/2026) : au telephone, « Quels documents faut-il preparer ? »
   passait a deux lignes et laissait « preparer ? » seul ; les questions
   sont courtes, l'equilibre des lignes les coupe mieux. */
@media (max-width: 760px){
  .f3-q{ text-wrap:balance; }
}
/* Le plus : deux traits de 1,5 px ; ouvert, le trait vertical se couche. */
.f3-plus{ position:relative; flex:none; width:20px; height:20px; }
.f3-plus::before, .f3-plus::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:1.5px;
  margin:-0.75px 0 0 -8px; background:currentColor; border-radius:1px;
  transition:transform .24s cubic-bezier(.23,1,.32,1);
}
.f3-plus::after{ transform:rotate(90deg); }
.f3-question[open] .f3-plus::after{ transform:rotate(0deg); }
.f3-reponse{ padding:0 24px 24px; }
.f3-reponse .f-texte{ margin:0; color:var(--f-attenue-70); }
.f3-lien-texte{ color:var(--f-texte-aplat); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
@media (hover:hover){
  .f3-question > summary:hover .f3-plus{ opacity:.7; }
  .f3-lien-texte:hover{ text-decoration-thickness:2px; }
}
/* Ouverture douce, seulement ou le navigateur sait animer vers height:auto
   (Chrome 131+). Ailleurs, la reponse s'ouvre d'un coup, lisible. */
@supports (interpolate-size: allow-keywords) and selector(::details-content){
  @media (prefers-reduced-motion: no-preference){
  .f3-faq-liste{ interpolate-size:allow-keywords; }
  .f3-question::details-content{
      height:0; overflow:clip;
      transition:height .3s cubic-bezier(.23,1,.32,1), content-visibility .3s allow-discrete;
    }
  .f3-question[open]::details-content{ height:auto; }
}
}
@media (prefers-reduced-motion: reduce){
  .f3-plus::before, .f3-plus::after{ transition:none; }
}
/* ---------- APPEL FINAL ----------------------------------------------- */
/* Sans fond : la scene la plus claire (#6f8095, bord #729dae) passe derriere.
   Un voile tres doux, local, pose le chapo de 20 px au-dessus de 4,5:1 sur le
   gris bleu (blanc sur #6f8095 = 3,9:1). La reference n'en a pas : a valider.
   Scene H : le fond de l'appel est plus clair (#7c9cae au pire endroit,
   blanc a 3,2:1) ; le voile passe de 50 a 62 % et s'elargit. Couleur des
   voiles (--f-voile, section 1) depuis le 04/10/2026, comme le bouton de
   verre (section 14). */
.f3-appel{
  position:relative; isolation:isolate;
  /* Au bout du defilement, le titre tombe vers y 200 (reference : 262 pour
     deux lignes) : 58 px sous les boutons, puis le pied. */
  padding:260px 0 58px;
}
.f3-appel::before{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(80% 95% at 30% 55%, rgba(var(--f-voile),.62) 35%, rgba(var(--f-voile),0) 80%);
}
.f3-appel-corps{ max-width:1040px; }
.f3-appel-titre{ text-wrap:balance; }
.f3-appel-chapo{ margin-top:24px; max-width:720px; }
.f3-appel .f-boutons{ margin-top:32px; }
/* ---------- PIED ------------------------------------------------------- */
/* Le voile sous le pied (socle.css, section 9 : marine de la nuit a 60 %)
   prend la couleur des voiles, meme dose (04/10/2026, point 12). Le bleu
   (pages.css, section 11) fait de meme. */
.f-page .f3-pied{ background:linear-gradient(to bottom, rgba(var(--f-voile),0), rgba(var(--f-voile),.6) 40px); }

/* =========================================================================
   10. GROUPE 3 AU TELEPHONE
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* Questions : 18/24, cibles pleines.
     09/10/2026, audit telephone du 8 octobre (lot 7, constat 212) : le
     meme composant avait deux dessins, carte de 16 px, question en 18 px
     et signe plus sur la scene, carte de 12 px, question en 17 px et
     chevron sur le bleu (k-question, pages.css 8). Au telephone, un seul :
     carte a coins de 16 px (le rayon des bulles passe a 20 px, section 2
     de socle.css, la question garde 16 px), question en 17 px graisse 500,
     rembourrage de 18 et 20 px, chevron Klein qui se retourne a
     l'ouverture, au lieu du signe plus. */
  .f3-faq .f3-question{ border-radius:16px; }
  .f3-question > summary{ padding:18px 20px; font-size:17px; line-height:1.3; gap:16px; border-radius:16px; }
  .f3-plus{ width:16px; height:16px; }
  .f3-plus::before{
    left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:0; background:none;
    border-right:2px solid var(--g-klein); border-bottom:2px solid var(--g-klein);
    transform:translateY(-2px) rotate(45deg);
  }
  .f3-plus::after{ display:none; }
  .f3-question[open] .f3-plus::before{ transform:translateY(2px) rotate(-135deg); }
  .f3-reponse{ padding:0 20px 20px; }
  /* Appel : titre 40, boutons 50/50 (jetons).
     09/10/2026, meme audit (lots 6 et 7, constats 62, 70, 210 et 214) :
     titre d'appel final a 34 px sur toutes les pages (40 avant, 34 sur le
     bleu, pages.css 10), interligne 1,05, et 72 px au-dessus, 96 dessous
     (souffle de 120 et 160 avant). L'accueil (accueil.css 16), les offres
     (offre.css, titre a 32 px) et le calculateur gardent leurs propres
     valeurs, posees apres celles-ci. */
  .f3-appel{ padding:72px 0 96px; }
  .f3-appel-titre{ font-size:34px; line-height:1.05; }
  .f3-appel::before{ background:radial-gradient(100% 60% at 40% 50%, rgba(var(--f-voile),.62) 35%, rgba(var(--f-voile),0) 80%); }
  .f3-appel-chapo{ margin-top:16px; }
  .f3-appel .f-boutons{ margin-top:24px; }
  /* Les deux intitules d'Artis sont longs : a 50/50 ils passent sur deux
     lignes serrees. On les empile, pleine largeur, 48 px chacun. */
  .f3-appel .f-boutons .f-bouton{ flex:1 1 100%; }
}

/* =========================================================================
   11. LES CHIFFRES DE COUVERTURE ET DE TETE D'OFFRE
   ------------------------------------------------------------------------- */
/* --- Les chiffres (couverture et tete des pages d'offre) --------------------
   Clarte (30/09/2026), demande 4 de Raphael : « bien alignes », et la
   condition (« apres reception du dossier complet et du reglement », « avec
   l'auteur du rapport, sur demande ») plus petite, parce qu'elle floutait la
   lecture. Variante B de l'analyse (scratchpad clarte/chiffres/planche.html,
   97 sur 100 contre 85 a l'etat d'avant) : une colonne de chiffres alignes a
   droite (max-content), le libelle court en 20/500 sur la ligne de base du
   chiffre, la condition en 14/400 dessous, dans la colonne du libelle.
   Trois niveaux : chiffre, libelle, condition. Balisage :
     <li><span class="g-chiffre">5</span> <span class="g-chiffre-texte">jours
     ouvres <span class="g-chiffre-precision">apres reception du dossier
     complet et du reglement</span></span></li>
   Sans .g-chiffre-precision, le libelle entier reste en 20/500. Chaque li
   est une sous-grille ; sans sous-grille, une colonne de 1,3 em. */
.g-chiffres{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:16px; row-gap:12px; align-items:baseline;
}
.g-chiffres li{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:baseline; }
@supports not (grid-template-columns: subgrid){
  .g-chiffres li{ grid-template-columns:auto minmax(0,1fr); column-gap:16px; }
  .g-chiffre{ min-width:1.3em; }
}
.g-chiffre{
  justify-self:end; text-align:right; font-size:48px; line-height:1; font-weight:500; letter-spacing:var(--f-serre);
  color:var(--f-azur-scene, var(--g-azur)); font-variant-numeric:tabular-nums;   /* azur de la scene, section 1 */
}
.g-chiffre-texte{ font-size:20px; line-height:1.2; font-weight:500; letter-spacing:var(--f-serre); color:var(--f-texte); text-wrap:pretty; }
.g-chiffre-precision{
  display:block; margin-top:3px; font-size:14px; line-height:1.3; font-weight:400; letter-spacing:0;
  color:rgba(255,255,255,.82);
}

/* =========================================================================
   12. LES TROIS BULLES D'OFFRE DE LA COUVERTURE
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-height: 860px){
  .g-chiffre{ font-size:42px; }
  .g-chiffres{ margin-top:22px; row-gap:10px; }
}
@media (min-width: 1200px) and (max-height: 760px){
  .g-chiffre{ font-size:34px; }
  .g-chiffre-texte{ font-size:18px; }
  .g-chiffre-precision{ font-size:13px; margin-top:1px; }
  .g-chiffres{ margin-top:16px; row-gap:6px; }
}
/* Telephone : empilees, pleine largeur. */
@media (max-width: 760px){
  .g-chiffres{ margin-top:18px; row-gap:10px; column-gap:12px; }
  .g-chiffre{ font-size:38px; }
  .g-chiffre-texte{ font-size:17px; }
  .g-chiffre-precision{ font-size:13px; }
}
@media (max-width: 760px) and (max-height: 700px){
  .g-chiffre{ font-size:30px; }
  .g-chiffre-texte{ font-size:16px; }
  .g-chiffres{ margin-top:12px; row-gap:6px; }
}

/* =========================================================================
   13. LES CARTES DES OFFRES
   ------------------------------------------------------------------------- */
.g-carte-inclus{ list-style:none; margin:0; padding:0; display:grid; gap:10px; align-content:start; }
.g-carte-inclus li{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:10px; font-size:15px; line-height:1.4; letter-spacing:0; color:var(--f-encre-2); }
.g-carte-inclus li::before{
  content:""; justify-self:center; width:10px; height:5px; margin-top:.5em;
  border-left:2px solid var(--g-klein); border-bottom:2px solid var(--g-klein); transform:rotate(-45deg);
}

/* =========================================================================
   14. CONTRASTE AA : APPEL FINAL ET ANNEAUX DE FOCUS
   ------------------------------------------------------------------------- */
/* Contraste AA (mesure au pire endroit de la scene, F/page/contraste-*.json) :
   les numeros a 40 % de la reference tombent a 3,8:1 sur l'aplat ; ils
   passent a 62 %. Sur la scene la plus claire (appel final), le bouton de
   verre prend un fond marine : a 10 % de blanc, il tombait a 3,3:1. */
.f3-appel .f-bouton-verre{ background:rgba(var(--f-voile),.30); }
/* Tablette : le chapo de l'appel final court sur toute la largeur, au-dela
   du voile ; le voile s'elargit et fonce un peu (3,7:1 sinon a 1024). */
@media (min-width: 761px) and (max-width: 1240px){
  .f3-appel::before{ background:radial-gradient(90% 95% at 40% 55%, rgba(var(--f-voile),.64) 35%, rgba(var(--f-voile),0) 80%); }
}
@media (hover:hover){
  .f3-appel .f-bouton-verre:hover{ background:rgba(var(--f-voile),.42); }
}
/* Pied, ordinateur : la reference pose ses liens de 16 px au pas de 32 ; la
   zone de clic prend tout le pas (32 px) au lieu des 16 px du texte. */
/* Anneau de focus noir sur les fonds blancs (carte de l'interlocuteur, menu
   ouvert) : blanc, il disparaissait. */
.f-page .f-carte-blanche :focus-visible,
.f-page .f-barre--ouverte .f-menu :focus-visible{ outline-color:var(--f-noir); }
/* Audit du 03/10 (A11Y-4) : le panneau d'onglet blanc lui-meme (fonds de
   commerce) prend l'anneau a l'encre de la carte ; pose a 3 px dehors, sur
   la scene sombre, il ne se voyait pas. Il passe dedans, sur le blanc. */
.f-page .f-carte-blanche.go-panneau:focus-visible{ outline-offset:-4px; }

/* =========================================================================
   15. SCENE H : CONTRASTE SUR LES MOMENTS CLAIRS
   ------------------------------------------------------------------------- */
/* Portrait (telephone, tablette debout) : a l'etat de couverture, la moitie
   haute de l'ecran est la face eclairee d'un disque (#8ea8c2 au plus clair),
   et les aretes des grandes pieces passent derriere les textes. Mesure : le
   titre des pages d'offre et son accent azur tombaient a 2,7:1 et 1,4:1, les
   plaques de verre a 2,3:1. Les verres prennent un fond marine a 55 % ; la
   tete des pages d'offre, un voile a 55 % qui s'efface en bas ; la
   couverture de l'accueil, un voile doux sous son texte. */
@media (max-aspect-ratio: 1099/1000){
  /* body : les feuilles des offres, chargees apres, reposent le fond en raccourci */
    /* Clarte : le panneau est blanc, il sort de cette regle. Une page d'offre
     qui blanchit l'une de ces plaques pose background-image:none dans sa
     feuille (chargee apres, meme poids). */
  body .go-plaque, body .go-temoin{ background-image:linear-gradient(rgba(var(--f-voile),.55), rgba(var(--f-voile),.55)); }
  .go-tete{ isolation:isolate; }
  .go-tete::before{
    content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
    /* Aube : ardoise profonde a 45 % au lieu du marine a 55 %, pour que la
       tete des offres ne reste pas plus sombre que la scene au telephone.
       Bleu profond (03/10/2026) : couleur rgba(5,12,54) ; depuis le
       04/10/2026, --f-voile (section 1). */
    background:linear-gradient(to bottom, rgba(var(--f-voile),.45), rgba(var(--f-voile),.45) 80%, rgba(var(--f-voile),0));
  }
}
/* Portrait : le nom de la barre passe sur le disque eclaire de la couverture
   (#ebe9e5 a 3:1) ; il prend une plaque des le haut. Clarte, correctifs du
   jury : la plaque marine a 45 % laissait, sous WebKit (sans flou), le
   titre blanc se lire a travers le nom. Elle devient le verre blanc a 92 %
   et l'encre, comme le burger a cote d'elle et comme la barre dense : au
   telephone, la barre est la meme du haut au bas de la page. */
@media (max-aspect-ratio: 1099/1000){
  .f-barre:not(.f-barre--dense):not(.f-barre--claire):not(.f-barre--ouverte) .f-marque{
    background:rgba(255,255,255,.92); color:var(--g-encre);
    box-shadow:inset 0 0 0 1px var(--f-filet-encre);
    -webkit-backdrop-filter:blur(var(--f-flou-barre)); backdrop-filter:blur(var(--f-flou-barre));
  }
}

/* =========================================================================
   16. MOUVEMENT REDUIT ET IMPRESSION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .f-scene::before, .f-scene::after{ transition:none !important; }
}
@media print{
  .f-scene{ display:none !important; }
  .f-page{ background:#fff; color:#000; border-top:0; }
  .f-page *{ color:#000 !important; background-color:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}