/* ==========================================================================
   LA LUEUR, la feuille de style du site
   Crescere SB, 2 septembre 2026.

   C'est le systeme retenu par Sam le 1er septembre 2026, releve sur
   la page d'accueil validee, et sorti de cette page pour servir
   les huit pages du site sans etre recopie huit fois.

   Ce fichier ne remplace pas assets/css/style.css tant que le site n'a pas
   bascule : les deux cohabitent, chaque page appelant l'une ou l'autre.
   style.css est l'ancien monde, il n'est pas une reference, et il partira
   quand les huit pages seront refaites.

   L'ORDRE DES COUCHES, du fond vers la surface. Le respecter :
     0  .nappe          six taches de couleur floutees qui derivent
     0  .rayon          un balayage orange qui tourne, comme un phare
     0  .filaments      trois courbes de neon parcourues par une lumiere
     0  .marque-geante  le logo, traverse par une lueur qui monte
     1  .voile          le voile de lisibilite, dense a gauche
     2  .braises        les points qui montent, fabriques par le script
     2  .grain          le grain qui casse le lisse du flou
     3  .page           tout le contenu

   Le voile est la clef de voute : il est dense la ou le texte se lit et
   ouvert la ou la couleur doit passer. C'est ce decalage qui permet
   d'avoir a la fois un fond tres colore et un texte parfaitement net.
   ========================================================================== */

:root {
  /* Le socle de la marque. Ces cinq valeurs sont exactes. */
  --sombre:   #3D3935;
  --creme:    #E8E4DC;
  --or:       #C8900A;
  --or-clair: #DB9E0B;   /* petits textes sur fond sombre, et boutons */
  --or-fonce: #845F07;   /* petits textes sur fond creme */

  --nuit:     #17150F;   /* le fond reel des pages, plus sombre que le socle */

  /* Couleurs ajoutees. Ornement uniquement, jamais sous du texte. */
  --ambre:    #E8A81A;
  --braise:   #C4551F;
  --prune:    #3A2440;   /* complementaire de l'or : il le fait briller sans
                            se montrer. Ne pas le retirer en croyant qu'il
                            ne sert a rien. */

  --creme-rvb: 232, 228, 220;
  --or-rvb:    200, 144, 10;

  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --sans:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --marge:   clamp(1.25rem, 3.5vw, 3.5rem);
  --largeur: 1560px;
  --verre:   rgba(232, 228, 220, 0.05);
  --bord:    rgba(232, 228, 220, 0.13);
}

/* Les deux polices sont hebergees par le site. Aucun appel a Google ni
   ailleurs : la page se charge plus vite, elle ne depend de personne, et
   la politique de securite du site n'a rien a autoriser. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 75% 110%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 75% 110%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/work-sans-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/work-sans-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}


/* --------------------------------------------------------------------------
   SOCLE
   Les marges de paragraphe sont remises a zero et reecrites a la main. Une
   marge par defaut vaut 1em : sur un chiffre de 80 pixels, cela ouvre un
   trou de 80 pixels qu'on ne voit pas venir.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Le site est sombre, et le navigateur doit le savoir : barres de
   defilement, listes deroulantes natives et champs d'autocompletion
   passent alors en sombre au lieu de trancher en blanc. */
:root { color-scheme: dark; }

/* Toute ancre visee s'arrete sous la barre fixe, meme sans script. Sans
   cette marge, un lien vers #donnees ou #realisations glissait le titre
   derriere l'en-tete en mouvement reduit.

   SEULEMENT QUAND LENIS NE TOURNE PAS. Lenis pose la classe lenis sur html
   et additionne la marge de defilement a son propre decalage de 110 px :
   avec les deux, le titre s'arretait 220 px sous la barre. :where() ne
   pese rien, les marges plus precises de accompagnement.css gardent la
   main. */
:where(html:not(.lenis)) :where([id]) { scroll-margin-top: 7rem; }

/* Le flash gris que les telephones posent sur tout element touche. Le site
   a son propre retour au toucher, plus bas dans les boutons. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--or); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 4px; border-radius: 4px; }

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--or-clair); color: var(--nuit); padding: 0.75rem 1.25rem; font-weight: 600;
}

/* Texte reserve aux lecteurs d'ecran : present dans la page, invisible a
   l'oeil, mais jamais retire du document. */
.sr-seul {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   COUCHE 1 : LA NAPPE
   Six taches floutees en un seul passage. Elles sont fixes a l'ecran : la
   page defile, la lumiere reste.
   -------------------------------------------------------------------------- */

.nappe {
  position: fixed;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px) saturate(145%);
}
.tache { position: absolute; border-radius: 50%; will-change: transform; }
.tache--1 { width: 46vw; height: 46vw; left: 4%;   top: -6%;  background: radial-gradient(circle, var(--or) 0%, var(--or) 22%, transparent 80%); opacity: 0.82; }
.tache--2 { width: 42vw; height: 42vw; right: -2%; top: 6%;   background: radial-gradient(circle, var(--ambre) 0%, var(--ambre) 20%, transparent 78%); opacity: 0.74; }
.tache--3 { width: 54vw; height: 54vw; left: 28%;  top: 40%;  background: radial-gradient(circle, var(--braise) 0%, var(--braise) 24%, transparent 82%); opacity: 0.68; }
.tache--4 { width: 48vw; height: 48vw; right: 6%;  top: 56%;  background: radial-gradient(circle, var(--prune) 0%, var(--prune) 26%, transparent 80%); opacity: 0.92; }
.tache--5 { width: 36vw; height: 36vw; left: -2%;  top: 66%;  background: radial-gradient(circle, var(--or-fonce) 0%, var(--or-fonce) 24%, transparent 80%); opacity: 0.88; }
.tache--6 { width: 32vw; height: 32vw; right: 34%; top: 20%;  background: radial-gradient(circle, var(--or-clair) 0%, var(--or-clair) 18%, transparent 76%); opacity: 0.56; }


/* LA NAPPE PRE-CALCULEE, voir « le fond pre-calcule » dans
   assets/js/la-lueur.js. Quand le script a redessine chaque tache, deja
   floutee, dans son canvas, la nappe n'a plus a flouter quoi que ce soit.
   Sans la classe est-cuite, rien ne change : le flou d'origine s'applique. */
.nappe.est-cuite { filter: none; }
.nappe.est-cuite .tache { background: none; }
.tache__cuite { position: absolute; display: block; pointer-events: none; visibility: hidden; }
/* Les canvas restent caches tant que toute la nappe n'est pas prete : le
   calcul se fait tache par tache, et une tache deja cuite, visible sous le
   flou d'origine, serait floutee deux fois. */
.nappe.est-cuite .tache__cuite { visibility: visible; }


/* --------------------------------------------------------------------------
   COUCHE 2 : LE RAYON
   Un balayage orange qui tourne sans fin, comme la lentille d'un phare.
   C'est un cone unique dans un degrade conique : tout le reste du disque
   est transparent, donc on ne voit passer qu'une lame de lumiere.
   -------------------------------------------------------------------------- */

.rayon {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 190vmax;
  height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  filter: blur(58px);
  opacity: 0.5;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(196, 85, 31, 0.5) 11deg,
    rgba(232, 168, 26, 0.62) 19deg,
    rgba(196, 85, 31, 0.42) 27deg,
    transparent 40deg,
    transparent 168deg,
    rgba(196, 85, 31, 0.3) 178deg,
    rgba(232, 168, 26, 0.36) 186deg,
    transparent 200deg,
    transparent 360deg
  );
}


/* LE RAYON PRE-CALCULE, meme principe que la nappe : un canvas deja flou
   tourne a la place du degrade qu'il fallait flouter a chaque image. */
.rayon.est-cuit { filter: none; background: none; }
.rayon__cuit { position: absolute; inset: 0; display: block; width: 100%; height: 100%; visibility: hidden; }
.rayon.est-cuit .rayon__cuit { visibility: visible; }


/* --------------------------------------------------------------------------
   COUCHE 3 : LES FILAMENTS DE NEON
   Trois courbes tres fines, avec un halo, le long desquelles un segment
   lumineux court sans fin. Le halo est fait de deux ombres portees
   superposees : c'est ce qui donne l'incandescence du tube au neon, plutot
   qu'un simple trait dore.
   -------------------------------------------------------------------------- */

.filaments {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.62;
}
.filaments__halo {
  filter: drop-shadow(0 0 5px rgba(232, 168, 26, 0.85))
          drop-shadow(0 0 16px rgba(196, 85, 31, 0.55));
}
.filaments path {
  fill: none;
  stroke: rgba(232, 168, 26, 0.9);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.filaments .trace {
  stroke: rgba(232, 168, 26, 0.09);
  stroke-width: 1;
}


/* --------------------------------------------------------------------------
   COUCHE 4 : LA MARQUE GEANTE
   Le vrai fichier du logo, assets/img/mark.webp, et non un trace refait a la
   main : les proportions et les trois teintes sont donc exactement celles
   de la marque.

   Elle est posee SOUS le voile, et c'est essentiel : au-dessus, elle
   faisait tomber le contraste du titre. Sous le voile, elle peut etre
   franchement lumineuse sans jamais passer devant les mots.
   -------------------------------------------------------------------------- */

.marque-geante {
  position: fixed;
  right: clamp(0.5rem, 2vw, 2.5rem);
  top: 46%;
  z-index: 0;
  transform: translateY(-42%);
  width: clamp(340px, 44vw, 720px);
  pointer-events: none;
  perspective: 1000px;
}
/* Trois niveaux, et chacun n'appartient qu'a un seul auteur, sinon les
   transformations s'ecrasent les unes les autres :
     .marque-geante         le calage, pose en CSS et jamais touche
     .marque-geante__derive la rotation lente et la montee au defilement
     .marque-geante__socle  le basculement vers la souris et la respiration */
.marque-geante__derive { transform-style: preserve-3d; }
.marque-geante__socle { position: relative; transform-style: preserve-3d; }
.marque-geante__image { width: 100%; height: auto; opacity: 0.7; }

/* L'eclat. Le meme fichier sert de pochoir, et une bande lumineuse circule
   dessous : la lumiere ne peut donc jamais deborder du logo. Un pochoir
   n'utilise que le canal alpha, une image sur fond blanc donnerait un
   carre plein. */
.marque-geante__eclat {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url('../img/mark.webp');
  mask-image: url('../img/mark.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.marque-geante__eclat i {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 52%;
  background: linear-gradient(180deg,
    rgba(232, 168, 26, 0) 0%,
    rgba(255, 205, 90, 1) 48%,
    rgba(232, 168, 26, 0.9) 56%,
    rgba(232, 168, 26, 0) 100%);
  will-change: transform;
  transform: translateY(180%);
}
.marque-geante__eclat i.second {
  height: 34%;
  background: linear-gradient(180deg,
    rgba(196, 85, 31, 0) 0%,
    rgba(232, 168, 26, 0.65) 50%,
    rgba(196, 85, 31, 0) 100%);
}

/* Sur une page interieure, le titre est plus court que celui de l'accueil
   et la marque a donc plus de place devant elle. On la retient un peu,
   pour qu'elle reste un filigrane et ne devienne pas le sujet. */
.marque-geante--filigrane .marque-geante__image { opacity: 0.5; }

@media (max-width: 1000px) { .marque-geante { opacity: 0.5; right: -12%; } }


/* --------------------------------------------------------------------------
   COUCHE 5 : LES BRAISES
   Des points qui montent lentement, a des vitesses toutes differentes. Ils
   sont fabriques par le script et non ecrits dans la page : sans
   JavaScript, il n'y a rien a masquer et rien ne manque.
   -------------------------------------------------------------------------- */

.braises {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.braise {
  position: absolute;
  bottom: -6vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 168, 26, 0.95) 0%, rgba(232, 168, 26, 0) 70%);
  will-change: transform, opacity;
}


/* --------------------------------------------------------------------------
   LA GERBE D'ETINCELLES, au clic sur un bouton
   Demande de Sam le 5 septembre 2026 : que chaque appel a l'action reponde
   sous le doigt.

   POURQUOI DES BRAISES ET NON DES ETOILES. Le fond du site porte deja
   22 braises qui montent. Une gerbe faite de la meme matiere, jaillie du
   point de clic, est le langage du site qui repond. Des etoiles seraient
   un effet rapporte d'ailleurs.

   Le contenant est fabrique par le script et pose une seule fois. Il ne
   capte aucun clic : sans pointer-events: none, il avalerait le clic
   suivant sur toute la page.

   z-index 55 : au-dessus du contenu et de la jauge, sous le bandeau de
   consentement qui est a 60. Une etincelle ne doit jamais passer devant
   une demande de consentement.
   -------------------------------------------------------------------------- */

.gerbe {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  overflow: hidden;
}
.etincelle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* La lueur breve du point de clic. Sans elle, des points de quelques
   pixels passent inapercus. Elle reprend la matiere du halo qui suit le
   curseur, en beaucoup plus court : un demi-seconde. */
.etincelle--lueur {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle,
    rgba(232, 168, 26, 0.55) 0%,
    rgba(219, 158, 11, 0.22) 38%,
    rgba(219, 158, 11, 0) 70%);
}


/* --------------------------------------------------------------------------
   VOILE, GRAIN, HALO
   -------------------------------------------------------------------------- */

/* Le bas du voile est plus dense que dans la premiere version : 0,90 au
   lieu de 0,74. Mesure faite sur les pixels rendus, et non estimee, la
   mention d'enregistrement du pied de page sortait a 4,32 pour un seuil
   exige de 4,50. Le fond y montait a rgb(62, 42, 26) parce que la nappe
   passait au travers. On assombrit donc le sol sous le pied de page
   plutot que d'eclaircir tous les petits textes : la hierarchie des gris
   est conservee, et la couleur reste. */
.voile {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 92% at 14% 46%, rgba(23, 21, 15, 0.94) 0%, rgba(23, 21, 15, 0.66) 40%, rgba(23, 21, 15, 0.16) 100%),
    linear-gradient(180deg, rgba(23, 21, 15, 0.62) 0%, rgba(23, 21, 15, 0.16) 32%, rgba(23, 21, 15, 0.28) 64%, rgba(23, 21, 15, 0.90) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E");
}

.page { position: relative; z-index: 3; }

/* Le halo qui suit le curseur. Il eclaire la zone regardee sans jamais
   gener la lecture : il passe sous le contenu, pas dessus. */
.halo-curseur {
  position: fixed;
  top: 0; left: 0;
  width: 44rem; height: 44rem;
  margin: -22rem 0 0 -22rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  background: radial-gradient(circle,
    rgba(232, 168, 26, 0.17) 0%,
    rgba(232, 168, 26, 0.06) 38%,
    transparent 68%);
}

/* Le cache d'ou monte le titre. Sans script, il ne masque rien du tout :
   le titre est simplement a sa place.

   La reserve du haut n'est pas un detail. Un titre en Archivo pose a 0,88
   d'interligne a son ink plus haute que sa boite : l'accent d'un E majuscule
   depasse, et overflow: hidden le coupait net. « MENTIONS LEGALES » sortait
   avec un accent rectangulaire colle au bord. Le remplissage ouvre la boite
   vers le haut, la marge negative la remet exactement a sa place, et le bas
   continue de cacher le titre tant qu'il n'est pas monte. */
.masque {
  display: block;
  overflow: hidden;
  padding-top: 0.18em;
  margin-top: -0.18em;
  padding-bottom: 0.09em;
}


/* --------------------------------------------------------------------------
   LE CHEVRON, la signature
   La marque de Sam est trois chevrons qui montent. Il revient partout :
   puce des surtitres, jauge de progression, puces du sommaire, liaisons.
   Toujours le vrai trace, jamais une fleche de remplacement.
   -------------------------------------------------------------------------- */

.chevron-puce { width: 15px; height: auto; flex: none; }
.chevron-puce path { fill: none; stroke: var(--or-clair); stroke-width: 30; }

/* Les trois crans fixes, en bas a droite : ils disent ou on en est dans la
   page, et ils y ramenent. C'est un vrai bouton, donc il s'atteint aussi
   au clavier. */
.jauge {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2.25rem);
  bottom: clamp(1rem, 2.5vw, 2.25rem);
  z-index: 30;
  width: 54px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  opacity: 0;
  /* Tant qu'elle est invisible, elle ne doit pas etre cliquable : sinon on
     attrape un bouton qu'on ne voit pas. */
  pointer-events: none;
  transition: background-color 0.4s ease;
}
.jauge.est-active { pointer-events: auto; }
.jauge:hover { background: rgba(232, 228, 220, 0.07); }
.jauge__chevrons { width: 100%; height: auto; display: block; }
.jauge path {
  fill: none; stroke-width: 30;
  stroke: rgba(var(--creme-rvb), 0.16);
  transition: stroke 0.7s ease;
}
.jauge path.allume { stroke: var(--or); }
.jauge:hover path { stroke: var(--or-clair); }
@media (max-width: 700px) { .jauge { display: none; } }


/* LE BOUTON PAUSE DES BANDEAUX QUI DEFILENT, ajoute le 26 septembre 2026.
   Demande de Sam : « tres discret ». 26 px, presque transparent, il ne
   prend sa couleur qu'au survol ou au clavier. Il est pose en absolu dans
   le parent du bandeau, en bas a droite, et n'ajoute donc aucune hauteur :
   le premier ecran de l'accueil garde sa geometrie. Fabrique par
   assets/js/la-lueur.js, voir data-defilement. Chaque page regle sa
   hauteur exacte avec la variable --pause-bas. */
.porte-pause { position: relative; }
.pause-defilement {
  position: absolute;
  right: var(--pause-droite, var(--marge));
  bottom: var(--pause-bas, 0.4rem);
  left: var(--pause-gauche, auto);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(var(--creme-rvb), 0.12);
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.35);
  color: rgba(var(--creme-rvb), 0.62);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.pause-defilement:hover,
.pause-defilement:focus-visible,
.pause-defilement[aria-pressed="true"] { opacity: 1; color: var(--or-clair); border-color: rgba(var(--or-rvb), 0.45); }
.pause-defilement svg { width: 9px; height: 9px; }
.pause-defilement path { fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Les bandeaux menes en CSS se figent ici. Ceux que GSAP conduit
   s'arretent par leur propre script, a l'ecoute de defilement:pause. */
.est-en-pause [class$="__piste"] { animation-play-state: paused !important; }


/* LA BARRE DE LECTURE des articles, voir data-lecture dans la-lueur.js.
   Un filet d'or de 3 px tout en haut de l'ecran, au-dessus de la barre de
   navigation qui flotte plus bas. Il s'allonge par transform et non par
   largeur : aucun recalcul de mise en page pendant le defilement. */
.barre-lecture {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 41;
  height: 3px;
  pointer-events: none;
}
.barre-lecture i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--or-fonce), var(--or-clair));
  box-shadow: 0 0 10px rgba(232, 168, 26, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
}


/* LE PASSAGE D'UNE PAGE A L'AUTRE, ajoute le 26 septembre 2026. Un fondu
   enchaine au lieu du blanc d'un rechargement. Pur CSS : les navigateurs
   qui ne le connaissent pas changent de page comme avant. Rien en
   mouvement reduit.

   PAS DE NOM DE TRANSITION SUR LA BARRE DE NAVIGATION, et il ne faut pas
   en ajouter : view-transition-name fait de l'element une « racine
   d'arriere-plan », et le verre floute de la barre ne verrait plus la page
   derriere lui. La barre etant la meme d'une page a l'autre, le fondu de
   la page entiere la laisse de toute facon immobile a l'oeil. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* --------------------------------------------------------------------------
   LA RECHERCHE
   Ajoutee le 6 septembre 2026. Deux portes d'entree, un seul moteur : le
   bouton loupe de l'en-tete, sur les dix pages, et le champ pose en clair
   sur comprendre-l-ia.html. Voir assets/js/recherche.js.

   TOUT EST FABRIQUE PAR LE SCRIPT. Sans JavaScript, ni le bouton ni le
   volet n'existent : un champ de recherche qui ne cherche pas est pire que
   pas de champ. La classe js-recherche est posee par le script.
   -------------------------------------------------------------------------- */

/* LE BOUTON DE L'EN-TETE, devant l'appel a l'action : la loupe est un
   outil, le rendez-vous garde la derniere place, celle qu'on regarde. */
.recherche-bouton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: transparent;
  color: rgba(var(--creme-rvb), 0.74);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
:root.js-recherche .recherche-bouton { display: inline-flex; }
.recherche-bouton:hover {
  color: var(--or-clair);
  border-color: rgba(var(--or-rvb), 0.45);
  background: rgba(232, 228, 220, 0.06);
}
.recherche-bouton svg { width: 18px; height: 18px; }

/* LE VOLET. Il couvre l'ecran, sous l'en-tete, et se ferme au clic dans le
   vide comme a la touche Echap. z-index 70 : au-dessus du bandeau de
   consentement, parce qu'il est ouvert par un geste du visiteur, alors que
   le bandeau s'impose de lui-meme. */
.recherche-volet {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: clamp(5.5rem, 12vh, 8rem) var(--marge) var(--marge);
  background: rgba(10, 9, 6, 0.82);
  backdrop-filter: blur(14px) saturate(130%);
  overflow-y: auto;
}
.recherche-volet[hidden] { display: none; }
.recherche-volet:not([hidden]) { animation: volet-fondu 0.28s ease; }
@keyframes volet-fondu { from { opacity: 0; } to { opacity: 1; } }

.recherche-volet__interieur {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}
.recherche-volet__sortie { margin-top: 1.25rem; }

.recherche-volet__fermer {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(var(--creme-rvb), 0.7);
  cursor: pointer;
}
.recherche-volet__fermer:hover { color: var(--creme); background: rgba(232, 228, 220, 0.1); }
.recherche-volet__fermer svg { width: 17px; height: 17px; }

/* LE CHAMP, commun aux deux portes d'entree. */
.recherche { margin-bottom: clamp(2rem, 4vw, 3rem); }
.recherche__forme { position: relative; }
.recherche__forme > svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--or-clair);
  pointer-events: none;
}
.recherche__champ {
  width: 100%;
  padding: 0.9rem 3rem 0.9rem 2.9rem;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: rgba(23, 21, 15, 0.75);
  color: var(--creme);
  font-family: var(--sans);
  /* 16 px au minimum, voir .champ dans contact.html : en dessous, l'iPhone
     zoome sur la page a chaque fois qu'on touche le champ. */
  font-size: 1rem;
  font-weight: 350;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
/* La croix native du champ de recherche, bleue, venait s'ajouter a la croix
   de fermeture du volet : deux croix cote a cote, dont une hors charte. */
.recherche-volet .recherche__champ::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.recherche__champ::placeholder { color: rgba(232, 228, 220, 0.5); }
.recherche__champ:focus {
  border-color: rgba(var(--or-rvb), 0.55);
  background: rgba(23, 21, 15, 0.9);
}
/* Le champ en clair de la page des ressources n'a pas de bouton de
   fermeture : il recupere la place a droite. */
.recherche .recherche__champ { padding-right: 1rem; }
.recherche .recherche__forme { max-width: 34rem; }

.recherche__compte,
.recherche__vide {
  margin-top: 1rem;
  font-size: 0.8438rem;
  color: rgba(var(--creme-rvb), 0.72);
}
.recherche__vide a { color: var(--or-clair); }

.recherche__liste { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.recherche__resultat {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--verre);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.recherche__resultat:hover {
  border-color: rgba(var(--or-rvb), 0.45);
  background: rgba(232, 228, 220, 0.08);
}
/* Meme taille que le texte courant : la graisse et l'or suffisent a le
   distinguer. Une taille de plus qui ne se voit pas est une taille de
   trop, et le site en compte deja assez. */
.recherche__titre { font-weight: 600; font-size: 0.9688rem; color: var(--or-clair); }
.recherche__extrait { font-size: 0.8438rem; line-height: 1.55; color: rgba(var(--creme-rvb), 0.78); }
/* De la couleur derriere le mot, pas du jaune vif qui ne se lirait plus. */
.recherche__extrait mark {
  background: rgba(200, 144, 10, 0.28);
  color: var(--creme);
  border-radius: 3px;
  padding: 0 0.15em;
}


/* --------------------------------------------------------------------------
   LE BOUTON DE CONTACT FLOTTANT
   Demande de Sam le 5 septembre 2026 : un moyen de le joindre depuis
   n'importe quelle page, sans avoir a remonter au menu.

   POURQUOI UN <details> ET NON UN BOUTON PILOTE PAR SCRIPT.
   C'est la regle du projet : le contenu n'est jamais suspendu a
   l'execution d'un script. Un <details> s'ouvre et se ferme tout seul,
   repond au clavier, s'annonce correctement aux lecteurs d'ecran, et
   fonctionne si le JavaScript ne se charge pas. Zero ligne de script.

   POURQUOI IL N'EST PAS DANS LE COIN.
   La jauge y est deja, sur toutes les pages, a 24 px du bord et large de
   54 px. Elle est une signature de la direction visuelle et ne se deplace
   pas. Le bouton se pose donc a sa gauche, et les deux forment une petite
   barre. Sous 700 px la jauge disparait, et le bouton reprend le coin,
   qui est la place naturelle du pouce.

   z-index 45 : au-dessus du contenu, sous le bandeau de consentement qui
   est a 60. Un choix de cookies passe avant une invitation a ecrire.
   -------------------------------------------------------------------------- */

.contact-flottant {
  position: fixed;
  z-index: 45;
  bottom: clamp(1rem, 2.5vw, 2.25rem);
  right: calc(clamp(1rem, 2.5vw, 2.25rem) + 68px);
}
@media (max-width: 700px) {
  .contact-flottant { right: clamp(1rem, 2.5vw, 2.25rem); }
}

/* Le triangle que le navigateur pose par defaut sur un <details>. */
.contact-flottant > summary { list-style: none; }
.contact-flottant > summary::-webkit-details-marker { display: none; }

.contact-flottant__bouton {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--or-clair);
  color: #1A1813;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), background-color 0.3s ease;
}
.contact-flottant__bouton:hover { background: var(--or); transform: translateY(-3px); }
.contact-flottant__bouton svg { width: 24px; height: 24px; }

/* LE PICTO CHANGE QUAND LE PANNEAU EST OUVERT.
   Premiere version essayee : faire pivoter la bulle de 90 degres. Sur une
   forme asymetrique, la rotation ne se lit pas comme « ouvert », elle se
   lit comme un defaut d'affichage. Une croix dit ce qu'elle fait.
   Les deux pictos sont dans la page et c'est le selecteur [open] qui
   choisit : aucun script n'intervient. */
.contact-flottant__fermer { display: none; }
.contact-flottant[open] > .contact-flottant__bouton .contact-flottant__ouvrir { display: none; }
.contact-flottant[open] > .contact-flottant__bouton .contact-flottant__fermer { display: block; }

.contact-flottant__choix {
  position: absolute;
  bottom: calc(100% + 0.7rem);
  right: 0;
  display: grid;
  gap: 0.4rem;
  /* 15,5rem et non 13,5 : a 13,5 « Prendre rendez-vous » passait a la
     ligne et la derniere entree faisait deux fois la hauteur des autres. */
  min-width: 15.5rem;
  padding: 0.55rem;
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: rgba(23, 21, 15, 0.94);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* Meme geste que le volet du menu, depuis le coin de la pastille. */
.contact-flottant[open] > .contact-flottant__choix {
  transform-origin: bottom right;
  animation: plaque-entre-bas 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes plaque-entre-bas {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.contact-flottant__lien {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--creme);
  transition: background-color 0.25s ease;
}
.contact-flottant__lien:hover { background: rgba(232, 228, 220, 0.09); }
.contact-flottant__lien span { white-space: nowrap; }
.contact-flottant__lien svg { width: 19px; height: 19px; flex: none; color: var(--or-clair); }
.contact-flottant__lien span { display: block; }
.contact-flottant__detail {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  /* 0,62 sur ce fond mesure au-dessus de 4,50. Ne pas descendre plus bas
     sans remesurer sur les pixels rendus. */
  color: rgba(var(--creme-rvb), 0.62);
}


/* --------------------------------------------------------------------------
   TYPOGRAPHIE
   Archivo en largeur reduite et graisse haute, tout en capitales. Les
   titres prennent toute la largeur disponible et tiennent en deux lignes.
   Aucune limite de mesure sur un titre : c'est elle qui les repliait sur
   quatre lignes. Si un titre deborde, on reduit la taille, jamais la
   largeur.
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.035em;
  /* L'ESPACE ENTRE LES MOTS, ajoute le 25 septembre 2026. Le resserrement
     des lettres s'applique aussi a l'espace, et l'espace d'Archivo en
     largeur reduite est deja etroit : mesure a 0,12 em sur un grand titre,
     0,16 em sur un petit, soit 3,6 px a 22 px de corps. Sur telephone,
     « DIRE QU'ON PARLE A UNE MACHINE » se lisait comme un seul mot. On
     rend l'espace sans toucher au serrage des lettres. */
  word-spacing: 0.06em;
  margin: 0;
}
.display--geant { font-size: clamp(2.15rem, 5.6vw, 5.1rem); }
.display--grand { font-size: clamp(1.75rem, 3.5vw, 3.2rem); }
.display--moyen { font-size: clamp(1.4rem, 2.5vw, 2.1rem); }
.display--petit { font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.02em; word-spacing: 0.1em; }

.or { color: var(--or-clair); }

/* Un mot d'un titre de section, decoupe par la-lueur.js pour entrer a son
   tour. Il reste en ligne, et monte par un decalage relatif : c'est ce qui
   garde les coupures de ligne de l'original. Surtout pas d'inline-block,
   voir la raison dans la-lueur.js. */
.mot { position: relative; }

/* Le surtitre de section. Il ne doit jamais retomber a la taille d'un
   bouton, sinon on ne sait plus lequel des deux annonce quoi. */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0 0 1.4rem;
}

/* Le titre de section porte son chevron a sa propre echelle. Le texte est
   enferme dans un seul span : sans lui, la mise en flex traite chaque
   noeud de texte comme un element separe, et l'ecart du flex vient
   s'ajouter entre les mots tout en avalant l'espace normal. */
.titre-section { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.4rem; }
.titre-section > span { display: block; }
.chevron-puce--titre { width: 22px; }

.texte {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(var(--creme-rvb), 0.76);
  max-width: 52ch;
}
.texte strong { color: var(--creme); font-weight: 600; }

/* Une mention discrete, une date de mise a jour. Elle reste au-dessus du
   seuil : en dessous de 0,55 sur le fond nuit, un texte passe sous les
   4,50 exiges. Le contraste se mesure, il ne s'estime pas. */
.attenue { color: rgba(var(--creme-rvb), 0.72); font-size: 0.875rem; }


/* --------------------------------------------------------------------------
   BOUTONS ET LIENS
   Les boutons ne portent aucun deplacement en CSS : c'est le script qui
   les fait suivre le curseur, et les deux se marcheraient dessus.
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.75rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  /* Un bouton en pastille ne se coupe pas en deux lignes : il s'étire,
     ou il disparaît. Sans cette règle, « Prendre rendez-vous » repliait
     la barre de navigation sur trois lignes et écrasait le logo. */
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}
.bouton--plein { background: var(--or-clair); color: var(--nuit); }
.bouton--plein:hover { background: var(--creme); }
.bouton--verre {
  background: var(--verre);
  backdrop-filter: blur(10px);
  border-color: var(--bord);
  color: var(--creme);
}
.bouton--verre:hover { border-color: rgba(var(--creme-rvb), 0.42); }

.bouton .fleche { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

.bouton:hover .fleche { transform: translateX(4px); }

/* LE RETOUR AU TOUCHER. Sur un ecran tactile, les boutons ne suivent pas
   le doigt comme ils suivent la souris : sans ce leger enfoncement, un
   appui ne se voyait pas avant le changement de page. Reserve aux ecrans
   sans survol, pour ne pas se battre avec l'aimant du script. */
@media (hover: none) {
  .bouton:active { transform: scale(0.96); transition-duration: 0.12s; }
  .contact-flottant__bouton:active { transform: scale(0.92); }
}

/* La precision posee dans le bouton : une duree, un nombre, une gratuite.
   Elle est plus pale que le libelle, c'est une precision et non une
   seconde action. */
.bouton__duree {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.7rem;
  margin-left: 0.15rem;
  border-left: 1px solid currentColor;
  /* 0,6 faisait tomber le contraste a 3,25 sur pixels rendus, pour un
     seuil de 4,50 : le nuit a 60 % sur l or clair donne rgb(101,75,13).
     A 0,85 la precision reste plus pale que le libelle et repasse au-
     dessus du seuil. Mesure faite sur capture, pas sur la couleur
     declaree. Ne pas redescendre. */
  opacity: 0.85;
  font-weight: 500;
}
.bouton__horloge { width: 14px; height: 14px; flex: none; }
.bouton__horloge path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--or-clair); text-decoration: none; padding-bottom: 4px;
  border-bottom: 1px solid rgba(var(--or-rvb), 0.45);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.lien-fleche:hover { color: var(--creme); border-bottom-color: var(--creme); }
.lien-fleche .fleche { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.lien-fleche:hover .fleche { transform: translateX(4px); }


/* --------------------------------------------------------------------------
   EN-TETE
   -------------------------------------------------------------------------- */

.entete { position: fixed; inset: 0 0 auto; z-index: 40; padding-block: 0.9rem; }
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.5rem 0.5rem 0.5rem 1.4rem;
  border-radius: 100px;
  background: rgba(23, 21, 15, 0.42);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(232, 228, 220, 0.08);
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.entete--posee .entete__interieur { background: rgba(23, 21, 15, 0.74); border-color: var(--bord); }
/* La marque porte la barre : elle doit se lire de loin, pas se deviner.

   flex: none est indispensable, et ce n'est pas une precaution theorique.
   Mesure du 6 septembre 2026, apres l'ajout de « Comprendre l'IA » et
   « Contact » au menu : sans cette ligne, la marque est un element
   flexible comme un autre, et le menu la comprime pour se faire de la
   place. A 1100 px de large, le logo tombait a 15 px : il avait disparu
   de la barre sans que rien n'ait l'air casse par ailleurs. */
.marque { flex: none; }
.marque img { height: clamp(30px, 3.2vw, 44px); width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__liens { display: flex; gap: clamp(0.85rem, 1.8vw, 1.7rem); list-style: none; margin: 0; padding: 0; }
.nav__lien {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: rgba(var(--creme-rvb), 0.74); transition: color 0.35s ease;
  /* Un libelle de menu ne se coupe pas. Sans cette ligne, « Comprendre
     l'IA » et « A propos » passaient sur deux lignes chacun a 1210 px, et
     la barre doublait de hauteur. Le piege, c'est que la coupure se fait
     DANS le lien et non entre les liens : une mesure qui compare la
     position verticale des liens ne la voit pas. Verifie a l'oeil. */
  white-space: nowrap;
}
.nav__lien:hover { color: var(--creme); }
.nav__lien[aria-current] { color: var(--or-clair); }
/* LE SEUIL DU MENU DEROULANT EST REDESCENDU DE 1440 A 1200 PX le 20
   septembre 2026, a la demande de Sam : sur un portable Mac, la barre
   tombait sur le bouton a trois traits alors qu'il y avait la place.

   Historique : 980 px pour cinq entrees, 1200 px le 6 septembre 2026 pour
   sept, 1440 px le 16 septembre. Les libelles ne se coupent pas (nowrap
   ci-dessus) : un menu trop long ne passe pas sur deux lignes, il pousse le
   bouton « Prendre rendez-vous » hors de la barre. Depassement mesure du
   bouton, avant resserrement :

     avec « Prestations »     118 px a 1201, 65 a 1280, 8 a 1366, tient a 1380
     avec « Accompagnement »  106 px a 1280, 48 a 1366, 7 a 1420, tient a 1430

   Ce qui a fait redescendre le seuil : entre 1200 et 1439 px, la barre
   passe en mode serre, regle plus bas. Mesure du 20 septembre 2026, place
   restante a droite du bouton, chevron du menu deroulant compris : 46 px a
   1200, 61 px a partir de 1280. A 1180 il reste 30 px, donc la marge de
   securite tient meme sous le seuil.

   LA VERIFICATION : comparer le bord droit du bouton et celui de
   .entete__interieur, a la largeur la plus etroite ou le menu est ouvert.
   La taille du logo ne suffit pas, elle ne bouge pas quand le bouton sort.

   Les trois reperes vont ensemble : les deux regles en 1199 px, et le
   matchMedia de assets/js/la-lueur.js, en 1200 px. */
@media (max-width: 1199px) { .nav__liens { display: none; } }

/* LA BARRE SERREE, de 1200 a 1519 px. Les ecarts, la taille des libelles et
   le bouton descendent d'un cran pour que les sept entrees tiennent avec le
   bouton de rendez-vous.

   Pourquoi 1519 et pas 1439 : a taille pleine, la barre demande 1347 px de
   large. L'enveloppe ne les donne qu'a partir de 1450 px d'ecran, et le
   chevron du menu deroulant a ajoute quinze pixels le 20 septembre 2026.
   Mesure du meme jour, place libre entre la marque et le menu : 8 px de
   DEPASSEMENT a 1440 px sans le mode serre, 32 px de libre avec. Les deux
   largeurs Mac courantes, 1470 et 1512, tombent dans cette zone. */
@media (min-width: 1200px) and (max-width: 1519px) {
  .entete__interieur { gap: 1rem; padding-left: 1rem; }
  .nav { gap: 1rem; }
  .nav__liens { gap: 0.75rem; }
  .nav__lien { font-size: 0.6875rem; letter-spacing: 0.06em; }
  .entete .nav > .bouton { font-size: 0.6875rem; padding: 0.8rem 1.15rem; }
}


/* --------------------------------------------------------------------------
   LE MENU DEROULANT DE L'ACCOMPAGNEMENT
   Demande de Sam le 20 septembre 2026 : les quatre pages de detail doivent
   s'atteindre depuis le menu, pour le referencement comme pour le visiteur.

   Aucun script : le survol l'ouvre, et :focus-within l'ouvre au clavier des
   que le lien parent prend le focus. Le sous-menu devient alors visible,
   donc tabulable, et la tabulation y entre. C'est la seule facon d'avoir un
   deroulant accessible sans JavaScript.

   Le padding-top du volet est transparent : il fait le pont entre le lien et
   la plaque, sinon le sous-menu se referme des que la souris quitte le lien.
   -------------------------------------------------------------------------- */

.nav__liens > li { position: relative; }
.nav__lien--volet { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav__chevron { width: 9px; height: auto; flex: none; transform: rotate(180deg); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.nav__chevron path { fill: none; stroke: currentColor; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }

.nav__sous {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  padding-top: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
}
.nav__sous ul {
  display: grid;
  gap: 0.1rem;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  border-radius: 16px;
  background: #16140E;
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--bord);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.nav__sous a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: rgba(var(--creme-rvb), 0.78);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nav__sous a:hover { background: rgba(232, 228, 220, 0.07); color: var(--creme); }
.nav__sous a[aria-current] { color: var(--or-clair); }
.nav__sous a:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; color: var(--creme); }

.nav__liens > li:hover > .nav__sous,
.nav__liens > li:focus-within > .nav__sous { opacity: 1; visibility: visible; transform: none; }
.nav__liens > li:hover .nav__chevron,
.nav__liens > li:focus-within .nav__chevron { transform: rotate(0deg); }

/* Sur un téléphone, la barre ne peut plus porter à la fois le logo, le
   bouton et le menu : le bouton s'en va. Il n'est pas perdu pour autant,
   le volet mobile l'ouvre en grand, et le pied de page le redonne. Un
   logo lisible vaut mieux qu'un bouton de plus dans une barre saturée. */
@media (max-width: 560px) { .entete .nav > .bouton { display: none; } }

/* SOUS 1200 PX, LE LOGO REPREND LE DESSUS SUR LE BOUTON.
   Mesure du 25 septembre 2026 : a 768 et 1024 px, le logo tombait a 30 et
   33 px de haut, « CRESCERE SB » se lisait en lettres de 7 px, pendant que
   le bouton de rendez-vous gardait sa taille de bureau et ecrasait la
   barre. Le logo remonte, le bouton prend la taille de la barre serree. */
@media (max-width: 1199px) {
  .marque img { height: clamp(36px, 4vw, 42px); }
  .entete .nav > .bouton { font-size: 0.6875rem; padding: 0.8rem 1.15rem; }
}


/* --------------------------------------------------------------------------
   LE MENU MOBILE
   Deux barres qui se croisent pour former une croix a l'ouverture. Le volet
   est un vrai element cache par l'attribut hidden : ferme, il est hors du
   parcours au clavier.

   L'attribut hidden doit gagner. Une regle d'auteur qui pose display
   l'emporte sinon sur celle du navigateur, et le volet resterait visible en
   permanence. D'ou le :not([hidden]) plutot qu'un simple display: flex.
   -------------------------------------------------------------------------- */

.menu-bouton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 100px;
  background: var(--verre);
  cursor: pointer;
  flex: none;
}
/* Le meme seuil que .nav__liens, et les deux doivent rester d'accord :
   si l'un change sans l'autre, on obtient soit deux menus a la fois, soit
   aucun. Voir le commentaire de .nav__liens pour la raison du 1200.
   Le meme nombre est ecrit une troisieme fois dans assets/js/la-lueur.js,
   qui referme le volet quand on repasse en affichage large.

   LA CLASSE js-menu EST POSEE PAR LE SCRIPT qui branche ce bouton. Sans
   JavaScript, le bouton n'apparait donc pas du tout, et la navigation
   passe par le pied de page, qui porte les memes sept liens. Un bouton
   visible qui ne repond pas est pire que pas de bouton. Le defaut etait
   connu et accepte tant qu'il ne touchait que les ecrans sous 980 px ;
   en remontant le seuil a 1200 le 6 septembre 2026, il touchait beaucoup
   plus de monde, et il fallait le regler plutot que l'etendre. */
@media (max-width: 1199px) { :root.js-menu .menu-bouton { display: inline-flex; } }

.menu-bouton__barres { position: relative; display: block; width: 18px; height: 12px; }
.menu-bouton__barres i {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--creme);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-bouton__barres i:first-child { top: 0; }
.menu-bouton__barres i:last-child  { bottom: 0; }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres i:first-child { transform: translateY(5px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres i:last-child  { transform: translateY(-5px) rotate(-45deg); }

/* LE VOLET N'OCCUPE PLUS TOUT L'ECRAN. Demande de Sam le 20 septembre
   2026 : une plaque posee sous la barre, a droite, sous le bouton qui
   l'ouvre. Il prenait tout l'ecran avec des libelles en capitales geantes,
   ce qui etait beaucoup pour sept liens.

   Le haut est calcule sur la barre : 0,9 rem de marge autour de la plaque,
   0,5 rem de rembourrage, et un bouton de 44 px. Un ecart de quelques
   pixels selon la page n'a pas d'importance, la plaque flotte. */
.menu-mobile[hidden] { display: none; }
.menu-mobile:not([hidden]) {
  position: fixed;
  top: 5.25rem;
  right: var(--marge);
  z-index: 45;
  width: min(20rem, calc(100vw - 2 * var(--marge)));
  /* Sur un telephone court, la plaque defile plutot que de sortir de
     l'ecran : onze liens et un bouton font 566 px de haut. */
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 18px;
  background: #16140E;
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--bord);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* La plaque se deplie depuis le bouton qui l'ouvre, au lieu d'apparaitre
   d'un coup. Pur CSS : l'animation joue a chaque fois que hidden tombe. */
.menu-mobile:not([hidden]) {
  transform-origin: top right;
  animation: plaque-entre 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes plaque-entre {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.menu-mobile__nav { display: grid; gap: 0.1rem; }
.menu-mobile__nav a {
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(var(--creme-rvb), 0.82);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.menu-mobile__nav a:hover { background: rgba(232, 228, 220, 0.07); color: var(--creme); }
.menu-mobile__nav a[aria-current] { color: var(--or-clair); }
/* Les quatre pages d'accompagnement, en retrait sous leur entree. */
.menu-mobile__nav a.menu-mobile__sous {
  padding-left: 1.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(var(--creme-rvb), 0.62);
}
.menu-mobile__nav a.menu-mobile__sous:hover { color: var(--creme); }
/* LE BOUTON DU VOLET. Le selecteur est redouble, et ce n'est pas du zele :
   .menu-mobile__nav a, plus specifique qu'une classe seule, imposait au
   bouton la creme des liens, leur rayon de 10 px, leur taille de texte et,
   au survol, leur fond de verre. Mesure du 25 septembre 2026 : libelle
   creme sur or, donc illisible, coins carres, et plus d'or du tout au
   survol. Chaque propriete du bouton est donc reposee ici. */
.menu-mobile__nav a.menu-mobile__cta {
  justify-content: center;
  margin-top: 0.6rem;
  padding: 0.95rem 1.25rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--or-clair);
  color: var(--nuit);
}
.menu-mobile__nav a.menu-mobile__cta:hover { background: var(--creme); color: var(--nuit); }


/* --------------------------------------------------------------------------
   HAUT DE PAGE DES PAGES INTERIEURES
   L'accueil occupe un ecran entier ; les autres pages n'ont pas a le faire,
   sinon on fait descendre le visiteur pour rien avant de lui donner ce
   qu'il vient chercher. Le haut respire, sans plus.
   -------------------------------------------------------------------------- */

.haut { position: relative; padding-block: clamp(8.5rem, 16vh, 12rem) clamp(1.5rem, 4vh, 3rem); }
/* Le titre prend toute la largeur disponible : aucune limite de mesure. */
.haut .display { max-width: none; }
.haut__chapeau { margin-top: clamp(1.25rem, 2.5vw, 1.9rem); font-size: 1.125rem; }
.haut__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Quand une page tient tout entiere dans le premier ecran.

   L'ECART ENTRE LES TROIS BLOCS, demande de Sam le 5 septembre 2026.
   Mesure d'avant sur 1440 x 900 : le bas des chevrons « Decouvrir » et le
   haut de l'intitule de la frise tombaient tous les deux a 699 px. Ils se
   touchaient, sans un pixel de respiration.

   DEUX TENTATIVES ECARTEES, ET POURQUOI. A garder en tete avant d'y
   revenir.

   1. Un gap en clamp de vh, sans condition. Un gap AJOUTE de la hauteur,
      meme quand il n'y en a plus a donner : sur 375 x 812, le premier
      ecran passait de 820 a 917 px pour 812 disponibles. La regle dit
      qu'il ne depasse jamais.

   2. Une marge automatique sur « Decouvrir ». Elle ne prenait que la place
      libre, donc elle ne debordait pas, mais elle la prenait TOUTE : le
      titre collait au sommet, la frise au plancher, et il restait un grand
      vide au milieu. Sam l'a refusee sur capture. Elle poussait aussi la
      frise 77 px plus bas, donc plus profondement sous le bandeau de
      consentement qui occupe deja le pied de l'ecran au premier passage.

   CE QUI EST EN PLACE. Un ecart modere, et seulement la ou il y a de la
   place pour lui : au-dessus de 840 px de haut et 700 px de large. Sur un
   telephone, la regle ne s'applique pas du tout, et le premier ecran
   retrouve exactement la geometrie qu'il avait avant le 5 septembre.

   Le centrage repartit le reste : le titre remonte d'autant que la frise
   descend. C'est symetrique et ce n'est pas reglable autrement sans
   ancrer un bloc, ce qui creuserait le vide refuse plus haut.

   Cette classe ne sert qu'a l'accueil, verifie le 5 septembre 2026 : les
   sept autres pages ne la portent pas et ne bougent donc pas. */
.premier-ecran { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

@media (min-width: 700px) and (min-height: 840px) {
  .premier-ecran { gap: clamp(0.5rem, 2.5vh, 1.5rem); }

  /* TANT QUE LE BANDEAU DE CONSENTEMENT EST LA, PAS D'ECART.
     Il occupe le bas de l'ecran sur environ 170 px et se pose par-dessus
     le contenu. Mesure du 5 septembre 2026 sur 1440 x 900 : il commence a
     708 px. Avec l'ecart, la frise descend a 698 et son intitule tombe a
     722, donc entierement derriere le bandeau. Sans l'ecart, l'intitule
     revient a 699 et reste lisible juste au-dessus.

     L'ecart revient donc des le premier clic sur « Accepter » ou
     « Refuser », et pour toutes les visites suivantes. La classe est posee
     et retiree par assets/js/consentement.js. */
  :root.bandeau-ouvert .premier-ecran { gap: 0; }
}


/* --------------------------------------------------------------------------
   PLAQUES ET ZONES
   -------------------------------------------------------------------------- */

.verre {
  background: var(--verre);
  backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid var(--bord);
  border-radius: 16px;
}

/* Les sections respirent sans se desolidariser. 8vh donnait 72 px de
   chaque cote, soit 144 px entre deux sections : la page se lisait comme
   une suite de pages. Sam a pris pour etalon l ecart entre sa photo et la
   premiere section, 81 px, et en a demande un tout petit peu plus. */
.zone { padding-block: clamp(2.5rem, 5.4vh, 3.5rem); position: relative; }
/* Le titre recoit la part large de la ligne : c'est ce qui lui permet de
   tenir en deux lignes au lieu de trois. */
.zone__entete {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}
@media (max-width: 900px) { .zone__entete { grid-template-columns: 1fr; align-items: start; } }

/* La plaque claire. Le droit se lit sur du papier : elle est reservee aux
   blocs qui font foi, une identite d'editeur, un extrait de registre. */
.papier { background: var(--creme); color: #2A2724; border-radius: 20px; padding: clamp(1.75rem, 4vw, 3.5rem); }
.papier .etiquette { color: var(--or-fonce); }
.papier .chevron-puce path { stroke: var(--or-fonce); }
.papier .display { color: #1A1813; }
.papier .or { color: var(--or-fonce); }
.papier .texte { color: #4A453F; max-width: 68ch; }
.papier .texte strong { color: #1A1813; }
.papier .lien-fleche { color: var(--or-fonce); border-bottom-color: rgba(132, 95, 7, 0.45); }
.papier .lien-fleche:hover { color: #1A1813; border-bottom-color: #1A1813; }

/* L'appel final, quand une page en porte un.

   La plaque est densifiee et ne se contente pas du verre a 5 %. Ses
   boutons se posent a droite, exactement la ou le voile est ouvert : sur
   la page A propos, la nappe y montait a rgb(128,96,34) et la precision
   du bouton tombait a 3,75 pour un seuil de 4,50. Le libelle plein
   lui-meme n etait qu a 4,58. Mesure sur pixels rendus, pas sur les
   couleurs declarees. On densifie le fond plutot que d eclaircir le
   texte, comme pour le bas du voile et pour le sommaire. */
.appel {
  background-color: rgba(23, 21, 15, 0.5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.25rem, 5vw, 3.75rem);
}
/* minmax(0, 1fr) et non 1fr. Mesure du 25 septembre 2026 : une colonne en
   1fr ne descend jamais sous la largeur de son contenu le plus large, et
   le bouton « Faire le diagnostic | 5 min » ne se coupe pas. A 375 px, la
   colonne entiere sortait de la plaque de 15 px, de 70 px a 320 px, sur
   l'accueil, A propos et l'article 50. */
@media (max-width: 880px) { .appel { grid-template-columns: minmax(0, 1fr); } }
.appel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* SUR TELEPHONE, LES APPELS PRENNENT TOUTE LA LARGEUR.
   Deux boutons de largeurs differentes, cales a gauche, laissaient un
   bord droit en escalier. Pleine largeur, ils s'alignent, tombent sous le
   pouce, et le libelle se centre. La plaque de l'appel rend aussi un peu
   de son rembourrage : c'est la place qui manquait au bouton. */
@media (max-width: 520px) {
  .haut__actions .bouton,
  .appel__actions .bouton { flex: 1 1 100%; justify-content: center; }
  .appel { padding: 1.75rem 1.35rem; }
}
/* Sous 380 px, le libelle le plus long ne tient plus sur une ligne meme
   en pleine largeur. Le bouton accepte alors de passer a la ligne plutot
   que de sortir de l'ecran, et son espacement se resserre d'un cran. */
@media (max-width: 380px) {
  .bouton { white-space: normal; text-align: center; letter-spacing: 0.07em; padding-inline: 1.25rem; }
  .bouton__duree { white-space: nowrap; }
}
/* Le texte de l'appel. La regle vivait dans le style local de l'accueil,
   ce qui obligeait chaque page portant un appel a la recopier. */
.appel__texte { display: grid; gap: 1rem; }


/* --------------------------------------------------------------------------
   L'AGENDA DE PRISE DE RENDEZ-VOUS
   Ajoute le 26 septembre 2026 sur la page contact, puis le meme jour sur
   l'accueil, a la place de l'appel au diagnostic. Voir assets/js/agenda.js.

   Sans JavaScript, la plaque porte une invitation centree et le lien vers
   Cal.com. Avec, l'agenda de Cal.com prend toute la plaque des qu'on
   approche, et sa hauteur suit son contenu.
   -------------------------------------------------------------------------- */
.agenda { padding: clamp(1.5rem, 3.5vw, 2.75rem); background-color: rgba(23, 21, 15, 0.5); }
.agenda__accueil {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 34rem;
  margin-inline: auto;
  padding-block: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}
.agenda__picto { width: 40px; height: 40px; color: var(--or-clair); }
.agenda__texte { font-size: 0.9375rem; line-height: 1.65; color: rgba(var(--creme-rvb), 0.78); }
.agenda__texte strong { color: var(--creme); font-weight: 600; }
.agenda__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; margin-top: 0.4rem; }
/* Sous la plaque de l'accueil, la porte de sortie vers le diagnostic pour
   qui n'est pas encore pret a parler. */
.agenda__autre {
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
  text-align: center;
  font-size: 0.9375rem;
  color: rgba(var(--creme-rvb), 0.72);
}
.agenda__autre .lien-fleche { margin-left: 0.5rem; }
.agenda__accueil[hidden],
.agenda__cadre[hidden] { display: none; }
.agenda__cadre { position: relative; min-height: 560px; }
.agenda__cadre:focus { outline: none; }
/* Pendant le chargement, un mot plutot qu'une plaque vide. Le script le
   retire des que Cal.com signale que l'agenda est pret. */
.agenda__attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  min-height: 560px;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--creme-rvb), 0.72);
  text-align: center;
}
/* Le mot d'attente se pose par-dessus la place de l'agenda, qui se
   construit dessous, au lieu de le repousser vers le bas. */
.agenda__cadre > .agenda__attente { position: absolute; inset: 0; min-height: 0; padding: 1rem; }
@media (max-width: 520px) {
  .agenda__actions .bouton { flex: 1 1 100%; justify-content: center; }
}


/* --------------------------------------------------------------------------
   LA FICHE PROJET
   Ajoutee le 26 septembre 2026 : un clic sur un projet ouvre sa fiche par-
   dessus la page. Fabriquee par assets/js/projets.js, dans un <dialog>
   natif. Sur telephone, elle monte du bas de l'ecran, a portee du pouce.
   -------------------------------------------------------------------------- */

.fiche-projet {
  width: min(46rem, calc(100vw - 2rem));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--creme);
  overflow: visible;
}
.fiche-projet::backdrop {
  background: rgba(10, 9, 6, 0.74);
  backdrop-filter: blur(8px);
}
.fiche-projet[open] { animation: fiche-projet-entre 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.fiche-projet[open]::backdrop { animation: volet-fondu 0.35s ease; }
@keyframes fiche-projet-entre {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
/* Tant que la fiche est ouverte, la page de dessous ne defile plus. */
:root.fiche-projet-ouverte { overflow: hidden; }

.fiche-projet__plaque {
  position: relative;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.6rem, 4vw, 2.75rem);
  border: 1px solid var(--bord);
  border-radius: 20px;
  background: #16140E;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
/* Le filet d'or du haut, le meme geste que les tuiles de la methode. */
.fiche-projet__plaque::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

/* La croix reste en place quand la fiche defile : elle est posee sur la
   fenetre, pas dans la plaque qui defile. */
.fiche-projet__fermer {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.9);
  color: rgba(var(--creme-rvb), 0.8);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.fiche-projet__fermer:hover { color: var(--or-clair); border-color: rgba(var(--or-rvb), 0.5); }
.fiche-projet__fermer svg { width: 16px; height: 16px; }
.fiche-projet__fermer path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Le bouton qui copie le lien de la fiche, a gauche de la croix, et le
   petit mot « Lien copie » qui apparait dessous. */
.fiche-projet__copier {
  position: absolute;
  top: 0.9rem;
  right: calc(0.9rem + 48px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.9);
  color: rgba(var(--creme-rvb), 0.8);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.fiche-projet__copier:hover,
.fiche-projet__copier.est-copie { color: var(--or-clair); border-color: rgba(var(--or-rvb), 0.5); }
.fiche-projet__copier svg { width: 17px; height: 17px; }
.fiche-projet__copier path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fiche-projet__copie {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 50%;
  transform: translateX(50%);
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  background: var(--or-clair);
  color: var(--nuit);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.fiche-projet__copier.est-copie .fiche-projet__copie { opacity: 1; }
.fiche-projet__etiquette { margin-bottom: 1rem; padding-right: 6rem; }
.fiche-projet__titre {
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 0.95;
  padding-right: 2.5rem;
  margin-bottom: 1.1rem;
}
.fiche-projet__intitule {
  display: block;
  margin: 0 0 0.45rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.fiche-projet__pour {
  display: grid;
  gap: 0.1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--verre);
  font-size: 0.9375rem;
  color: var(--creme);
}
.fiche-projet__pour .fiche-projet__intitule { margin: 0; }
.fiche-projet__bloc { margin-bottom: 1.35rem; }
.fiche-projet__bloc[hidden] { display: none; }
.fiche-projet__bloc p {
  font-size: 1rem;
  line-height: 1.68;
  color: rgba(var(--creme-rvb), 0.8);
}
.fiche-projet__benefices { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.fiche-projet__benefices li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--creme);
}
.fiche-projet__benefices .chevron-puce { width: 12px; margin-top: 0.45em; }
.fiche-projet__benefices .chevron-puce path { stroke: var(--or); }

.fiche-projet__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bord);
}
.fiche-projet__navigation { display: flex; align-items: center; gap: 0.6rem; }
.fiche-projet__fleche {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: var(--verre);
  color: var(--creme);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.fiche-projet__fleche:hover { color: var(--or-clair); border-color: rgba(var(--or-rvb), 0.5); }
.fiche-projet__fleche svg { width: 18px; height: 18px; }
.fiche-projet__fleche path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fiche-projet__compte {
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--creme-rvb), 0.72);
}

/* SUR TELEPHONE, LA FICHE MONTE DU BAS, pleine largeur, comme un volet
   d'application : le pouce atteint les fleches et le bouton. */
@media (max-width: 600px) {
  .fiche-projet { width: 100vw; margin: auto 0 0; }
  .fiche-projet__plaque {
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
  }
  .fiche-projet[open] { animation-name: fiche-projet-monte; }
  .fiche-projet__pied .bouton { flex: 1 1 100%; justify-content: center; }
  .fiche-projet__navigation { width: 100%; justify-content: space-between; }
}
@keyframes fiche-projet-monte {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}


/* --------------------------------------------------------------------------
   PIED DE PAGE
   -------------------------------------------------------------------------- */

.pied { padding-block: clamp(2.25rem, 4vw, 3.25rem) 2rem; }
.pied__grille {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }
/* width: auto est indispensable. Sans lui, la hauteur vient du style et
   la largeur reste celle de l attribut width du HTML, soit 200 px : le
   logo sortait en 200 sur 22, un rapport de 9,09 au lieu de 3,33, ecrase
   et etire. Le logo de l en-tete portait deja la regle. */
/* 24 px de haut donnaient 80 px de large : correct de rapport, mais perdu
   a cote du texte. Porte a 48, soit 160 de large, il tient sa colonne et
   passe devant celui de l en-tete, qui monte a 44 : dans un pied de page
   la marque est le dernier mot, elle peut se permettre d etre la plus
   grande. */
.pied__marque img { height: 48px; width: auto; margin-bottom: 1.25rem; }
.pied__propos { font-size: 0.9375rem; color: rgba(var(--creme-rvb), 0.74); max-width: 42ch; margin-bottom: 1rem; }
.pied__colonne h2 {
  margin: 0 0 1rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--or-clair);
}
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pied__liens a { font-size: 0.9375rem; color: rgba(var(--creme-rvb), 0.72); text-decoration: none; transition: color 0.35s ease; }
.pied__liens a:hover { color: var(--or-clair); }

.pied__bas {
  margin-top: clamp(2.25rem, 4.5vw, 3rem); padding-top: 1.4rem;
  border-top: 1px solid var(--bord);
  display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: rgba(var(--creme-rvb), 0.72);
}
/* La jauge est fixée en bas à droite de l'écran. Arrivé au bas de la page,
   elle se posait exactement sur le lien « Gérer les cookies ». On lui
   réserve donc sa place dans cette rangée. En dessous de 700 px la jauge
   n'existe pas, et la place est rendue au texte. */
@media (min-width: 701px) { .pied__bas { padding-right: 4.75rem; } }
/* Sous 700 px, c'est le bouton de contact flottant qui prend le coin, et il
   se posait sur « Gerer les cookies » en bas de page. Mesure du 25
   septembre 2026 a 375 px : le lien passait entierement sous la pastille,
   donc impossible a toucher. On laisse sous la derniere rangee la hauteur
   de la pastille et de sa marge. */
@media (max-width: 700px) { .pied { padding-bottom: 6rem; } }
/* Les liens legaux quittent la colonne du site pour tenir leur propre
   rangee : c'est la qu'on les cherche. Le bouton "Gerer les cookies" est
   ajoute a la suite par assets/js/consentement.js, ne pas l'ecrire ici :
   il se chargerait avant tout choix du visiteur. */
.pied__legaux { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.pied__legaux a { color: rgba(var(--creme-rvb), 0.74); text-decoration: underline; text-underline-offset: 3px; transition: color 0.35s ease; }
.pied__legaux a:hover { color: var(--or-clair); }


/* --------------------------------------------------------------------------
   LE BANDEAU DE CONSENTEMENT
   Le comportement vient de assets/js/consentement.js, deja en service et
   qu'on ne touche pas : il fabrique le bandeau, ne charge HubSpot qu'apres
   un clic sur Accepter, efface les cookies en cas de refus, et pose le lien
   "Gerer les cookies" dans le pied de page. Il n'y a donc ici que
   l'habillage.
   -------------------------------------------------------------------------- */

.bandeau-consentement {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.85rem);
  border-radius: 16px;
  background: rgba(23, 21, 15, 0.9);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--bord);
  /* Ferme par defaut : il ne s'ouvre que si le script le demande, et il
     reste hors du parcours au clavier tant qu'il est cache. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}
.bandeau-consentement.est-visible { opacity: 1; visibility: visible; transform: none; }

.bandeau-consentement__titre {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1rem;
  color: var(--or-clair);
}
.bandeau-consentement__texte p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(var(--creme-rvb), 0.78);
  max-width: 78ch;
}
.bandeau-consentement__texte a { color: var(--or-clair); }
.bandeau-consentement__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Le script pose les classes du site actuel sur ses deux boutons. On les
   rattache ici a l'habillage de la nouvelle page. */
.bandeau-consentement .bouton {
  padding: 0.8rem 1.4rem;
  background: var(--or-clair);
  border-color: var(--or-clair);
  color: var(--nuit);
}
.bandeau-consentement .bouton:hover { background: var(--creme); border-color: var(--creme); }
.bandeau-consentement .bouton--contour {
  background: var(--verre);
  border-color: var(--bord);
  color: var(--creme);
}
.bandeau-consentement .bouton--contour:hover { border-color: rgba(var(--creme-rvb), 0.42); background: var(--verre); }

@media (max-width: 760px) {
  .bandeau-consentement { grid-template-columns: 1fr; }
  .bandeau-consentement__actions .bouton { flex: 1; justify-content: center; }
}

/* Le lien de reglage ajoute au pied de page par le script. */
.lien-consentement {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: rgba(var(--creme-rvb), 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.35s ease;
}
.lien-consentement:hover { color: var(--or-clair); }


/* --------------------------------------------------------------------------
   LE GABARIT DES PAGES DE TEXTE
   Sommaire collant a gauche qui suit la lecture, colonne de lecture a
   droite, rubriques separees par un filet.

   Il a ete releve sur mentions-legales.html, puis sorti ici le 3 septembre
   2026 quand article-50.html s'y est pose a son tour. Le futur blog s'y
   posera aussi : c'est pour cela que les classes s'appellent document,
   sommaire, rubrique et corps, et non mentions ou article.

   Ce qui n'appartient qu'a une page reste dans cette page : la fiche
   d'identite de l'editeur pour les mentions, l'echeancier pour l'article.
   -------------------------------------------------------------------------- */

.document {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* LE SOMMAIRE.
   Il reste a l'ecran pendant toute la lecture : sur une page longue,
   savoir ou l'on est vaut mieux que de remonter pour verifier. Le
   decalage du haut tient compte de la barre de navigation fixe. */
.sommaire {
  position: sticky;
  top: 6.5rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  /* La plaque de verre seule laissait passer la nappe : dans les zones
     ou elle est vive, le fond montait a rgb(72,56,28) et le lien de la
     rubrique en cours, en or, tombait a 4,26 pour un seuil de 4,50. On
     densifie le fond plutot que d eclaircir le texte, comme pour le bas
     du voile : la hierarchie des gris est conservee et l or reste l or. */
  background-color: rgba(23, 21, 15, 0.55);
}
.sommaire__intitule {
  margin: 0 0 1.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.sommaire__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* 0,9375 rem, et non 0,9 : c'est deja le pas du systeme pour ce role,
   celui des liens du pied de page. Deux tailles separees de 4 % dans la
   meme page ne se lisent pas comme une hierarchie, elles se lisent comme
   une erreur. Un palier de moins, et l'echelle de la page est nette. */
.sommaire__liens a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(var(--creme-rvb), 0.7);
  text-decoration: none;
  transition: color 0.35s ease;
}
.sommaire__liens a:hover { color: var(--creme); }
/* La rubrique en cours de lecture. Le chevron de la marque s'allume avec
   elle : c'est le meme signal que la jauge en bas a droite, a une autre
   echelle. L'etat est aussi porte par aria-current, pose par le script,
   pour que la lecture d'ecran l'annonce. */
.sommaire__liens a.est-lu { color: var(--or-clair); }
.sommaire__liens .chevron-puce path { stroke: rgba(var(--creme-rvb), 0.28); transition: stroke 0.35s ease; }
.sommaire__liens a:hover .chevron-puce path { stroke: rgba(var(--creme-rvb), 0.6); }
.sommaire__liens a.est-lu .chevron-puce path { stroke: var(--or-clair); }
.sommaire__liens .chevron-puce { width: 11px; flex: none; }

/* LES RUBRIQUES.
   Le titre est decale du texte qui le suit, et un filet separe deux
   rubriques : sur une page qui n'est que du texte, c'est l'espace qui
   fait la structure, pas la couleur. */
.rubrique { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.rubrique + .rubrique { border-top: 1px solid var(--bord); margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.rubrique__titre { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Le corps du texte. La mesure est tenue a 68 signes : au-dela, l'oeil
   perd la ligne suivante en revenant a la marge. */
.corps__texte { display: grid; gap: 1.1rem; }
.corps__texte p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(var(--creme-rvb), 0.78);
  max-width: 68ch;
}
.corps__texte a {
  color: var(--or-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.corps__texte a:hover { color: var(--creme); }

/* L'ACCROCHE.
   Une phrase du texte, sortie de la file des paragraphes et posee plus
   grand. Aucun mot n'est ajoute ni retire : seule la place change. C'est
   ce qui evite le mur de texte sur une rubrique de quatorze paragraphes.
   ---
   Le !important n'est pas une facilite : .corps__texte p est plus
   specifique qu'une classe seule, et l'accroche doit gagner sans qu'on
   ait a redoubler le selecteur a chaque page. */
.accroche {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
  line-height: 1.5 !important;
  color: var(--creme) !important;
  border-left: 2px solid var(--or);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  margin-block: clamp(0.75rem, 1.5vw, 1.25rem);
  max-width: 46ch !important;
}

/* En dessous de 900 px, le sommaire cesse de suivre et se pose au-dessus
   du texte : une colonne collante de 250 px sur un telephone mangerait la
   moitie de l'ecran. */
@media (max-width: 900px) {
  .document { grid-template-columns: 1fr; }
  .sommaire { position: static; }
}


/* --------------------------------------------------------------------------
   APPARITIONS ET MOUVEMENT REDUIT
   Rien n'est masque tant que le script n'a pas pose la classe js-anim :
   sans JavaScript, la page s'affiche entierement.

   prefers-reduced-motion garde une page complete et immobile. La nappe et
   le rayon restent : la couleur est une matiere, pas une animation. Ils
   cessent simplement de bouger.
   -------------------------------------------------------------------------- */

.js-anim .a-monter { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  .js-anim .a-monter { opacity: 1 !important; transform: none !important; }
  .jauge { opacity: 1; pointer-events: auto; }
  .jauge path { stroke: var(--or); }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}