/* Powered By MstatE Technologies
   Feuille de style du site public — direction « Réseau vivant » (17/08/2026).

   Deux thèmes, clair par défaut, portés par un attribut data-theme posé côté
   serveur d'après un cookie : le HTML arrive déjà dans le bon thème, donc pas de
   clignotement au chargement.

   Organisation : jetons, base, utilitaires, puis un bloc par composant dans
   l'ordre où il apparaît dans la page. Aucune couleur n'est écrite ailleurs que
   dans la déclaration des variables. */

/* ═══════════════════════════════════════════════════════════════════════════
   1. JETONS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Charte MstatE (dossier AiiR rev01) : corail, prune, bleu complémentaire.
     Les variantes claires et sombres existent parce qu'une même couleur ne tient
     pas le rapport de contraste sur les deux fonds. */
  --principale-charte: #de524c;
  --prune-charte:      #736377;
  --bleu-charte:       #498fcd;

  /* Échelle typographique : cinq tailles dérivées d'un même rapport. */
  --t-geant: clamp(2.5rem, 1.3rem + 4.2vw, 4.5rem);
  --t1: clamp(1.9rem, 1.25rem + 2.8vw, 3.4rem);
  --t2: clamp(1.28rem, 1.06rem + 1vw, 1.78rem);
  --t3: clamp(1rem, .96rem + .2vw, 1.12rem);
  --t4: .72rem;

  /* Échelle d'espacements : six valeurs, rien entre les deux. */
  --e1: .5rem; --e2: 1rem; --e3: 1.75rem; --e4: 3rem;
  --e5: clamp(3.5rem, 2rem + 5vw, 6rem);
  --e6: clamp(5rem, 2.5rem + 8vw, 9rem);

  --largeur: 1280px;
  --largeur-article: 760px;
  --entete-hauteur: 76px;

  --display: "Space Grotesk", system-ui, sans-serif;
  --sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Thème clair (défaut) ─────────────────────────────────────────────────── */
:root, :root[data-theme="clair"] {
  --fond: #faf8f7;
  --fond-2: #ffffff;
  --surface: rgba(26, 21, 25, .035);
  --surface-survol: rgba(26, 21, 25, .05);
  --surface-2: linear-gradient(160deg, rgba(26, 21, 25, .045), rgba(26, 21, 25, .012));
  --bord: rgba(26, 21, 25, .13);
  --bord-vif: rgba(26, 21, 25, .28);
  --filet: rgba(26, 21, 25, .13);

  --encre: #161219;
  --gris-lecture: #544d52;
  --gris-libelle: #6b6266;

  --principale: #cf2d26;          /* corail assombri : tient 4,89:1 sur le fond */
  --principale-vive: #de524c;
  --principale-fonce: #b8332d;
  --accent: #2f6ea8;
  --prune: #736377;

  --entete-fond: rgba(250, 248, 247, .62);
  --entete-dense: rgba(250, 248, 247, .94);
  --entete-opaque: rgba(250, 248, 247, .98);
  --trame: rgba(26, 21, 25, .05);
  --piste: rgba(26, 21, 25, .07);
  --voile-1: rgba(250, 248, 247, .55);
  --voile-2: rgba(250, 248, 247, .96);
  --note-fond: rgba(250, 248, 247, .88);
  --voile-bande: linear-gradient(100deg, rgba(22, 18, 25, .92), rgba(44, 36, 45, .88) 55%, rgba(22, 18, 25, .82));
  --halo-1: rgba(222, 82, 76, .16);
  --halo-2: rgba(73, 143, 205, .12);
  --halo-3: rgba(115, 99, 119, .10);
  --degrade-accent: linear-gradient(96deg, #cf2d26 10%, #d9542a 90%);
  --grain-opacite: .032;
  --grain-fusion: multiply;
}

/* ── Thème sombre ─────────────────────────────────────────────────────────── */
:root[data-theme="sombre"] {
  --fond: #0b0910;
  --fond-2: #12101a;
  --surface: rgba(255, 255, 255, .045);
  --surface-survol: rgba(255, 255, 255, .06);
  --surface-2: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  --bord: rgba(255, 255, 255, .10);
  --bord-vif: rgba(255, 255, 255, .22);
  --filet: rgba(255, 255, 255, .10);

  --encre: #f5f2f7;
  --gris-lecture: #c2bbc9;
  --gris-libelle: #9990a2;

  --principale: #ff6f66;          /* corail éclairci : tient 7,28:1 sur la nuit */
  --principale-vive: #de524c;
  --principale-fonce: #b8332d;
  --accent: #63b0f5;
  --prune: #a794ae;

  --entete-fond: rgba(11, 9, 16, .52);
  --entete-dense: rgba(11, 9, 16, .92);
  --entete-opaque: rgba(11, 9, 16, .97);
  --trame: rgba(255, 255, 255, .035);
  --piste: rgba(255, 255, 255, .07);
  --voile-1: rgba(11, 9, 16, .55);
  --voile-2: rgba(11, 9, 16, .95);
  --note-fond: rgba(11, 9, 16, .72);
  --voile-bande: linear-gradient(100deg, rgba(11, 9, 16, .94), rgba(38, 31, 40, .9) 55%, rgba(11, 9, 16, .84));
  --halo-1: rgba(222, 82, 76, .22);
  --halo-2: rgba(73, 143, 205, .15);
  --halo-3: rgba(115, 99, 119, .18);
  --degrade-accent: linear-gradient(96deg, #ff6f66 10%, #ff9a6e 90%);
  --grain-opacite: .055;
  --grain-fusion: overlay;
}

/* Polices auto-hébergées : aucun appel tiers, pour le RGPD comme pour la vitesse. */
@font-face { font-family: "Raleway"; src: url("../fonts/raleway-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("../fonts/raleway-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t3);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.06; margin: 0; letter-spacing: -.022em; }
p { margin: 0 0 var(--e2); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--principale); color: #fff; }

/* Le grain : la texture est ce qui distingue une page travaillée d'un dégradé
   lisse. C'est le premier remède au « ça sent le généré ». */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: var(--grain-opacite); mix-blend-mode: var(--grain-fusion);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. UTILITAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 2.5rem, 860px); }
.conteneur--article { width: min(100% - 2.5rem, var(--largeur-article)); }

.section { padding-block: var(--e5); position: relative; }
.section + .section { padding-top: 0; }
/* Le bandeau de repères n'a pas de marge propre : sans cette règle il colle à
   la section suivante, les deux blocs se lisaient comme un seul. */
.section--reperes + .section { padding-top: var(--e5); }
.section--reperes { padding-block: 0; }
.section__pied { margin-top: var(--e3); }

/* Micro-libellés en capitales espacées : le registre de la baseline de marque
   « EXCELLENCE AND INNOVATION ». Ils ne servent plus dans la barre, qui est
   passée en casse normale, mais restent la signature des sections. */
.surtitre {
  display: inline-block; font-family: var(--display); font-weight: 500;
  font-size: var(--t4); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris-libelle); margin: 0;
}
.surtitre--corail { color: var(--principale); }
.surtitre--clair, .surtitre--sur-media { color: rgba(255, 255, 255, .88); }

.titre-section { font-size: var(--t1); max-width: 22ch; }
.titre-section--petit { font-size: var(--t2); }
.accent { font-style: normal; background: var(--degrade-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro { color: var(--gris-lecture); max-width: 52ch; }
.prose { color: var(--gris-lecture); }
.prose p:last-child { margin-bottom: 0; }

.entete-section {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--e4); margin-bottom: var(--e4); flex-wrap: wrap;
}
.entete-section > div { flex: 1 1 28rem; }
.entete-section .intro { flex: 0 1 28rem; padding-bottom: .4rem; }

.bouton {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.7rem; border-radius: 14px;
  font-family: var(--display); font-weight: 500; font-size: .95rem;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background-color .2s, border-color .2s;
}
.bouton svg { width: 1.1em; height: 1.1em; transition: transform .2s; }
.bouton:hover svg { transform: translateX(4px); }
.bouton--plein { background: var(--principale-fonce); color: #fff; box-shadow: 0 12px 34px -14px rgba(222, 82, 76, .8); }
.bouton--plein:hover { background: var(--principale-vive); box-shadow: 0 18px 44px -14px rgba(222, 82, 76, .95); }
.bouton--ligne { border-color: var(--bord); color: var(--encre); }
.bouton--compact { padding: .75rem 1.15rem; font-size: .88rem; border-radius: 12px; }
.bouton--ligne:hover { border-color: var(--bord-vif); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 500; color: var(--principale);
}
.lien-fleche svg { width: 1.15em; height: 1.15em; transition: transform .2s; }
.lien-fleche:hover svg { transform: translateX(4px); }
.lien-fleche--discret { font-size: var(--t4); letter-spacing: .16em; text-transform: uppercase; }

.icone { width: 1.5rem; height: 1.5rem; flex: none; }
.icone--pied { width: 1.15rem; height: 1.15rem; }

.message { padding: var(--e2) var(--e3); border-radius: 10px; margin-bottom: var(--e3); }
.message ul { list-style: disc; padding-left: 1.2rem; }
.message--succes { background: var(--surface); border-left: 3px solid var(--accent); }
.message--erreur { background: var(--surface); border-left: 3px solid var(--principale); }

.champ {
  width: 100%; padding: .85rem 1rem; font: inherit; color: var(--encre);
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 10px;
}
.champ:focus { border-color: var(--accent); }
.champ--zone { resize: vertical; min-height: 9rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vide {
  padding: var(--e4); border: 1px dashed var(--bord); border-radius: 16px;
  color: var(--gris-lecture); max-width: 48rem; background: var(--surface);
}

.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: var(--fond); padding: var(--e2) var(--e3); }
.lien-evitement:focus { left: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. MOTIF DE MARQUE ET MÉDIAS
   ═══════════════════════════════════════════════════════════════════════════ */

.motif { width: 100%; height: 100%; overflow: visible; color: var(--principale); }
.motif__traits .motif__arc:nth-child(3n+2) { stroke: var(--accent); opacity: .85; }
.motif__traits .motif__arc:nth-child(4n+3) { stroke: var(--prune); opacity: .65; }
.motif__noeud--plein { fill: currentColor; }
.motif__noeud--creux { fill: var(--fond); stroke: currentColor; stroke-width: 5; }
.motif__noeuds circle:nth-child(3n+2) { color: var(--accent); }
.motif__paquet { fill: var(--principale-vive); }
.motif__rotation { transform-origin: 50% 50%; animation: motif-tourner 90s linear infinite; }
@keyframes motif-tourner { to { transform: rotate(360deg); } }

/* Chaque arc se dessine lui-même : pathLength=1 rend la durée indépendante de
   la longueur réelle du tracé. */
.motif--anime .motif__arc { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: tracer 1.9s cubic-bezier(.35, 0, .15, 1) forwards; }
.motif--anime .motif__noeud { opacity: 0; animation: paraitre .6s ease forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes paraitre { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

.media { display: block; position: relative; overflow: hidden; isolation: isolate; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
/* Bichromie appliquée par le navigateur, jamais cuite dans le fichier : la photo
   que le client téléverse prend la teinte de la marque toute seule. La case
   « garder les couleurs d'origine » retire simplement cette classe. */
.media--bichromie img { filter: grayscale(1) contrast(1.12) brightness(.97); }
.media--bichromie::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, var(--principale-vive), var(--bleu-charte));
  mix-blend-mode: color; opacity: .7;
}
.media--bichromie::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .35;
  background: linear-gradient(150deg, rgba(222, 82, 76, .25), rgba(11, 9, 16, .35));
}
/* Emplacement d'image : trame en fond, mention en HTML posée en haut à gauche.
   Elle est en haut et non au centre pour ne jamais croiser la légende de la
   tuile, qui est ancrée en bas — c'est exactement le défaut de la version
   précédente, où les deux textes se superposaient. */
.emplacement { position: relative; display: block; width: 100%; height: 100%;
  min-height: 150px; background: var(--surface-2); overflow: hidden; }
.emplacement__trame { position: absolute; inset: 0; width: 100%; height: 100%; }
.emplacement__cadre { position: absolute; inset: 10px; border-radius: 12px;
  border: 1.5px dashed rgba(207, 45, 38, .38); pointer-events: none; }
.emplacement__mention { position: absolute; inset: auto auto 0 0; top: 0; height: max-content;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: calc(10px + var(--e2)) var(--e3); max-width: 100%; }
.emplacement__icone { width: 26px; height: 26px; color: var(--principale); }
.emplacement__titre { color: var(--encre); }
.emplacement__libelle { font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--encre); }
.emplacement__dimensions { font-size: .78rem; color: var(--gris-libelle); }
.carte-region { width: 100%; height: auto; }
.carte-region__onde { animation: onde 3.6s ease-out infinite; }
@keyframes onde { 0% { opacity: .5; transform: scale(.6); } 70% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   5. EN-TÊTE
   ═══════════════════════════════════════════════════════════════════════════ */

.entete {
  position: sticky; top: 0; z-index: 70;
  background: var(--entete-fond);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
/* Repli quand le navigateur ne sait pas flouter : fond quasi opaque, jamais de
   texte illisible par transparence. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete { background: var(--entete-opaque); }
}
.entete.est-dense { background: var(--entete-dense); border-bottom-color: var(--bord); }
.entete__interieur { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); min-height: var(--entete-hauteur); }

.logo { display: inline-flex; align-items: center; }
/* Les deux variantes du logo sont dans le HTML ; le thème en montre une.
   Le pied de page est clair depuis la refonte : le logo blanc y disparaissait. */
.logo__paire { display: inline-flex; align-items: center; }
.logo__image { width: auto; height: 40px; }
.logo__image--sombre { display: none; }
:root[data-theme="sombre"] .logo__image--clair { display: none; }
:root[data-theme="sombre"] .logo__image--sombre { display: block; }
.logo--pied .logo__image, .logo__paire--pied .logo__image { height: 50px; }

.navigation { display: flex; align-items: center; gap: var(--e4); }
.navigation__liste { display: flex; align-items: center; gap: 1.8rem; }
/* Barre « B » : libellés en casse normale. À taille égale ils se lisent plus
   vite qu'en capitales espacées ; les capitales restent le registre des
   surtitres à l'intérieur des pages. */
.navigation__lien {
  position: relative; display: inline-block; padding-block: .45rem;
  font-size: .97rem; font-weight: 600; color: var(--gris-lecture); transition: color .2s;
}
.navigation__lien::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--principale); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.navigation__lien:hover { color: var(--encre); }
.navigation__lien:hover::after, .navigation__lien.est-actif::after { transform: scaleX(1); }
.navigation__lien.est-actif { color: var(--principale); }

.entete__actions { display: flex; align-items: center; gap: .8rem; }

.theme { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--bord); color: var(--gris-lecture);
  transition: border-color .2s, color .2s; }
.theme:hover { border-color: var(--bord-vif); color: var(--encre); }
.theme svg { width: 17px; height: 17px; }
.theme__lune { display: none; }
:root[data-theme="clair"] .theme__lune { display: block; }
:root[data-theme="clair"] .theme__soleil { display: none; }

/* Segment de langue : les deux langues restent visibles en permanence, on voit
   d'un coup d'œil où l'on est et vers quoi on bascule. */
.segment { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--bord);
  border-radius: 999px; background: var(--surface); }
.segment__lien { padding: .34rem .82rem; border-radius: 999px; font-family: var(--display);
  font-weight: 500; font-size: .75rem; letter-spacing: .06em; color: var(--gris-libelle);
  transition: background-color .2s, color .2s; }
.segment__lien:hover { color: var(--encre); }
.segment__lien.est-actif { background: var(--principale-fonce); color: #fff; }

.bouton-entete { display: inline-flex; align-items: center; gap: .55rem; padding: .72rem 1.35rem;
  border-radius: 12px; background: var(--principale-fonce); color: #fff; font-weight: 600; font-size: .95rem;
  transition: background-color .2s, box-shadow .2s, transform .2s; }
.bouton-entete:hover { background: var(--principale-vive); transform: translateY(-1px);
  box-shadow: 0 12px 30px -12px rgba(222, 82, 76, .85); }

.bascule { display: none; align-items: center; gap: .6rem; background: none;
  border: 1px solid var(--bord); border-radius: 999px; padding: .5rem .9rem;
  color: var(--encre); font: inherit; font-family: var(--display); font-size: var(--t4);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.bascule__traits { display: grid; gap: 4px; }
.bascule__traits i { display: block; width: 16px; height: 1.5px; background: currentColor;
  transition: transform .3s; }
.bascule[aria-expanded="true"] .bascule__traits i:first-child { transform: translateY(2.75px) rotate(45deg); }
.bascule[aria-expanded="true"] .bascule__traits i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.hero { position: relative; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) var(--e5); overflow: hidden; }
.hero--accueil { min-height: calc(100svh - var(--entete-hauteur)); display: flex; align-items: center; }
.hero__halo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 50% at 74% 44%, var(--halo-1), transparent 70%),
              radial-gradient(45% 45% at 16% 82%, var(--halo-2), transparent 72%),
              radial-gradient(85% 55% at 50% -5%, var(--halo-3), transparent 72%); }
.hero__trame { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(var(--trame) 1px, transparent 1px),
                    linear-gradient(90deg, var(--trame) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(72% 68% at 62% 48%, #000, transparent 82%);
  -webkit-mask-image: radial-gradient(72% 68% at 62% 48%, #000, transparent 82%); }

.hero__motif { position: absolute; top: 50%; right: -6%;
  /* Le décalage de parallaxe passe par une variable : la règle mobile qui met
     transform à none reste gagnante, le script n'a rien à savoir de la largeur. */
  transform: translateY(calc(-50% + var(--py, 0px)));
  width: min(74vh, 760px); aspect-ratio: 1; z-index: 1; pointer-events: none;
  transition: transform .25s linear;
  /* Le texte prime : le motif s'efface là où il passerait sous les lettres. */
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 30%, #000 58%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 30%, #000 58%); }

.hero__contenu { position: relative; z-index: 2; }
.hero__contenu > * { max-width: 44rem; }
.hero__reperes { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; margin-bottom: var(--e3); }
.puce { display: inline-flex; align-items: center; gap: .55rem; }
.puce::before { content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--principale); animation: balise 2.4s ease-out infinite; }
@keyframes balise {
  0%   { box-shadow: 0 0 0 0 rgba(222, 82, 76, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(222, 82, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(222, 82, 76, 0); }
}
.hero__titre { font-size: var(--t-geant); max-width: min(56rem, 100%); margin-bottom: var(--e3); }
.hero__titre--fiche { font-size: var(--t1); max-width: 22ch; }
/* Révélation par ligne : le texte monte derrière un masque. */
.ligne-masque { display: block; overflow: hidden; }
.ligne-masque > span { display: inline-block; transform: translateY(105%);
  animation: monter .95s cubic-bezier(.16, 1, .3, 1) .15s forwards; }
@keyframes monter { to { transform: none; } }
.hero__chapo { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.5;
  color: var(--gris-lecture); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.hero--erreur { min-height: 60vh; display: grid; align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. BANDEAU DÉFILANT
   ═══════════════════════════════════════════════════════════════════════════ */

.ruban { border-block: 1px solid var(--bord); background: var(--surface); overflow: hidden; padding-block: .9rem; }
.ruban__piste { display: flex; gap: var(--e4); width: max-content; animation: glisser 38s linear infinite; }
@keyframes glisser { to { transform: translateX(-50%); } }
.ruban__mot { display: inline-flex; align-items: center; gap: var(--e4); white-space: nowrap;
  font-family: var(--display); font-weight: 500; font-size: var(--t4);
  letter-spacing: .22em; text-transform: uppercase; color: var(--gris-libelle); }
.ruban__mot::after { content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: var(--principale); opacity: .7; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. REPÈRES CHIFFRÉS
   ═══════════════════════════════════════════════════════════════════════════ */

.reperes { border-block: 1px solid var(--bord); }
.reperes__liste { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.reperes__element { padding: var(--e4) var(--e3); border-left: 1px solid var(--bord); }
.reperes__element:first-child { border-left: 0; padding-left: 0; }
.reperes__valeur { display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1; margin-bottom: .5rem;
  background: linear-gradient(180deg, var(--encre), var(--prune));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.reperes__libelle { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t4);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gris-libelle); line-height: 1.5; }
.reperes .surtitre { padding-top: var(--e4); display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. CARTES DE SERVICES
   ═══════════════════════════════════════════════════════════════════════════ */

.cartes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e2); }
.carte { position: relative; grid-column: span 2; display: block; padding: var(--e3);
  border-radius: 18px; background: var(--surface); border: 1px solid var(--bord); overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, background-color .35s; }
.carte:nth-child(1), .carte:nth-child(2) { grid-column: span 3; }
/* Le projecteur suit le curseur : le détail qui fait « fait main ». */
.carte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(222, 82, 76, .16), transparent 68%); }
.carte:hover::after { opacity: 1; }
/* Filet dégradé qui fait le tour de la carte : deux masques, seul le liseré reste. */
.carte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0%, var(--principale) 10%,
              var(--principale-vive) 20%, var(--accent) 32%, transparent 48%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; opacity: 0; transition: opacity .35s; pointer-events: none; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.carte:hover { transform: translateY(-6px); background: var(--surface-survol); border-color: transparent; }
.carte:hover::before { opacity: 1; animation: tourner 3s linear infinite; }
@keyframes tourner { to { --angle: 360deg; } }
.carte__lueur { position: absolute; inset: auto -30% -50% auto; width: 240px; height: 240px;
  border-radius: 999px; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(circle, rgba(222, 82, 76, .22), transparent 70%); }
.carte:hover .carte__lueur { opacity: 1; }
.carte__index { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t4);
  letter-spacing: .2em; color: var(--gris-libelle); }
.carte__icone { width: 44px; height: 44px; margin: var(--e3) 0 var(--e2); color: var(--principale); }
.carte__icone .trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.carte.est-visible .carte__icone .trace { animation: tracer 1.1s ease forwards; }
.carte:hover .carte__icone .trace { animation: tracer .85s ease forwards; }
.carte__titre { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t2);
  line-height: 1.1; margin-bottom: .6rem; letter-spacing: -.02em; }
.carte__texte { display: block; color: var(--gris-lecture); font-size: .98rem; }
.carte__lien { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--e3);
  font-family: var(--display); font-weight: 500; font-size: var(--t4); letter-spacing: .16em;
  text-transform: uppercase; color: var(--principale); }
.carte__lien svg { width: 1.2em; height: 1.2em; transition: transform .2s; }
.carte:hover .carte__lien svg { transform: translateX(5px); }

/* ═══════════════════════════════════════════════════════════════════════════
   10. GRILLE DE MÉDIAS
   ═══════════════════════════════════════════════════════════════════════════ */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: var(--e2); }
.tuile { position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--bord); background: var(--fond-2); }
.tuile__media { width: 100%; height: 100%; }
.tuile:hover .media img { transform: scale(1.05); }
.tuile--grande { grid-column: span 2; grid-row: span 2; }
.tuile--large { grid-column: span 2; }
.tuile--carte { grid-column: span 2; grid-row: span 2; display: grid; place-items: center;
  padding: var(--e2) var(--e3); background: linear-gradient(150deg, var(--halo-1), var(--halo-2)); }
.tuile--carte__interieur { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.tuile--carte svg { width: 100%; max-height: 200px; }
.tuile--citation { grid-column: span 2; display: flex; align-items: center; padding: var(--e3);
  background: var(--surface-2); }
.citation { font-family: var(--display); font-weight: 700; font-size: 1.28rem; line-height: 1.3; margin: 0; }
.tuile__legende { position: absolute; inset: auto 0 0; padding: var(--e2) var(--e3) var(--e3); z-index: 3;
  background: linear-gradient(transparent, rgba(11, 9, 16, .62) 58%, rgba(11, 9, 16, .93));
  display: flex; flex-direction: column; gap: .3rem; color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   11. BANDE PLEINE LARGEUR
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'image reste immobile pendant que la page glisse par-dessus.
   background-attachment: fixed est ignoré par Safari sur iPhone et iPad : on
   découpe le conteneur par clip-path, ce qui en fait le référentiel d'un fond
   en position fixed placé à l'intérieur. */
.bande { position: relative; isolation: isolate; clip-path: inset(0);
  min-height: clamp(340px, 62vh, 580px); display: grid; align-items: center;
  color: #fff; overflow: hidden; }
.bande__fond { position: fixed; inset: 0; z-index: -2; }
.bande__fond .media, .bande__fond .emplacement { width: 100%; height: 100%; }
.bande__voile { position: absolute; inset: 0; z-index: -1; background: var(--voile-bande); }
.bande__contenu { padding-block: var(--e5); }
.bande__titre { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); max-width: 20ch; margin-bottom: var(--e2); }
.bande .intro { color: rgba(255, 255, 255, .88); }
/* Sur la bande, le corail de la charte tombe à 1,14:1 : le voile est trop clair
   pour lui. Le surtitre y passe donc dans un corail éclairci, mesuré à l'écran. */
.bande .surtitre--corail { color: #ffb3ad; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .bande { clip-path: none; }
  .bande__fond { position: absolute; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. MÉTHODE EN RAIL
   ═══════════════════════════════════════════════════════════════════════════ */

.rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e3); margin-top: var(--e5); }
.rail::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 1px; background: var(--bord); }
.rail__progres { position: absolute; top: 11px; left: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--principale), var(--accent));
  transition: width 1.6s cubic-bezier(.2, .8, .2, 1); }
.rail.est-visible .rail__progres { width: 100%; }
.etape { position: relative; padding-top: var(--e4); }
.etape::before { content: ""; position: absolute; top: 5px; left: 0; width: 13px; height: 13px;
  border-radius: 999px; background: var(--fond); border: 1px solid var(--bord-vif);
  transition: border-color .3s, box-shadow .3s; }
.rail.est-visible .etape::before { border-color: var(--principale); box-shadow: 0 0 0 4px rgba(222, 82, 76, .14); }
.etape__index { font-family: var(--display); font-size: var(--t4); letter-spacing: .2em; color: var(--principale); }
.etape__titre { font-size: 1.2rem; margin: .5rem 0; }
.etape__texte { color: var(--gris-lecture); font-size: .95rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. SECTEURS
   ═══════════════════════════════════════════════════════════════════════════ */

.secteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.secteur { position: relative; display: block; padding: var(--e4) var(--e3); border-radius: 18px;
  overflow: hidden; border: 1px solid var(--bord); background: var(--surface-2);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s; }
.secteur:hover { transform: translateY(-6px); border-color: var(--bord-vif); }
.secteur__icone { width: 38px; height: 38px; color: var(--accent); margin-bottom: var(--e3); }
.secteur__titre { font-size: 1.28rem; margin-bottom: .5rem; }
.secteur__texte { color: var(--gris-lecture); font-size: .95rem; margin: 0 0 var(--e2); }

/* ═══════════════════════════════════════════════════════════════════════════
   14. LISTES EN LIGNES (pages intérieures)
   ═══════════════════════════════════════════════════════════════════════════ */

.lignes { border-top: 1px solid var(--bord); }
.lignes__element { border-bottom: 1px solid var(--bord); }
.ligne { display: grid; grid-template-columns: 4.5rem 1fr auto auto; align-items: center;
  gap: var(--e3); padding-block: var(--e3); transition: background-color .2s, padding-inline .2s; }
a.ligne:hover { background: var(--surface); padding-inline: var(--e2); }
.ligne__numero { font-family: var(--display); font-size: var(--t4); letter-spacing: .16em; color: var(--gris-libelle); }
.ligne__corps { display: block; }
.ligne__titre { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t2);
  line-height: 1.15; margin-bottom: .35rem; letter-spacing: -.02em; }
.ligne__texte { display: block; color: var(--gris-lecture); max-width: 62ch; }
.ligne__meta { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: .6rem; }
.ligne__icone { color: var(--prune); display: inline-flex; }
.ligne__icone .icone { width: 1.7rem; height: 1.7rem; }
.ligne__fleche { color: var(--principale); display: inline-flex; }
.ligne__fleche svg { width: 1.5rem; height: 1.5rem; transition: transform .2s; }
a.ligne:hover .ligne__fleche svg { transform: translateX(5px); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. MANIFESTE, SECTION SCINDÉE, CONVICTION
   ═══════════════════════════════════════════════════════════════════════════ */

.manifeste { padding-block: var(--e6); background: var(--surface); }
.manifeste__phrase { font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem); line-height: 1.2; text-align: center;
  text-wrap: balance; margin: 0 auto; max-width: 24ch; letter-spacing: -.022em; }
.manifeste__phrase--dense { font-size: clamp(1.5rem, 1rem + 1.9vw, 2.3rem); max-width: 32ch; }
/* Un paragraphe centré sous une phrase centrée forme un pâté illisible : la
   suite passe en deux colonnes alignées à gauche, sous un filet. */
.manifeste__suite { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--bord);
  columns: 2; column-gap: var(--e4); text-align: left; color: var(--gris-lecture); }
.manifeste__suite p { break-inside: avoid; }

.scindee { padding-block: var(--e5); }
.scindee__grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: center; }
.scindee--inverse .scindee__media { order: 2; }
.scindee__texte .titre-section { margin-block: var(--e2) var(--e3); }
.visuel { display: block; border-radius: 18px; overflow: hidden; }
.visuel--motif, .media--vide { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.visuel img, .media img { border-radius: inherit; }
.media-large { border-radius: 18px; overflow: hidden; }
.media-large img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.motif--large { aspect-ratio: 21 / 9; }
.motif--portrait { aspect-ratio: 1; }

.conviction { background: var(--principale-fonce); color: #fff; padding-block: var(--e5); }
.conviction .surtitre { color: rgba(255, 255, 255, .92); }   /* .8 ne donnait que 4,32:1 sur le corail foncé */
.conviction__titre { font-size: var(--t1); max-width: 20ch; margin-block: var(--e2) var(--e5); }
.conviction__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.conviction__point { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: var(--e2); }
.conviction__icone { display: block; margin-bottom: var(--e2); color: rgba(255, 255, 255, .9); }
.conviction__point-titre { font-size: var(--t3); font-family: var(--display); margin-bottom: .5rem; }
.conviction__point-texte { color: rgba(255, 255, 255, .94); margin: 0; font-size: .95rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   16. FIL, FICHES, ÉQUIPE, PARTENAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

.fil { border-block: 1px solid var(--bord); }
.fil__liste { display: flex; flex-wrap: wrap; gap: .6rem; padding-block: var(--e2);
  font-size: .85rem; color: var(--gris-lecture); }
.fil__element + .fil__element::before { content: "/"; margin-right: .6rem; color: var(--gris-libelle); }

.fiche-meta { display: flex; flex-wrap: wrap; gap: var(--e4); margin: 0 0 var(--e4);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--bord); }
.fiche-meta--colonne { flex-direction: column; gap: var(--e2); margin-top: var(--e4); }
.fiche-meta dt { font-family: var(--display); font-size: var(--t4); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris-libelle); margin-bottom: .3rem; }
.fiche-meta dd { margin: 0; font-weight: 600; }
.encadre { margin-top: var(--e4); padding: var(--e3); background: var(--surface);
  border-left: 3px solid var(--principale); border-radius: 0 12px 12px 0; }
.encadre p:last-child { margin-bottom: 0; }

.equipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.equipe__portrait { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px;
  margin-bottom: var(--e2); background: var(--surface); }
.equipe__portrait img { width: 100%; height: 100%; object-fit: cover; }
.equipe__nom { font-size: var(--t3); margin-bottom: .25rem; }
.equipe__bio { color: var(--gris-lecture); font-size: .95rem; margin-top: .6rem; }

.partenaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e3); }
.partenaires__element { display: grid; place-items: center; min-height: 100px; padding: var(--e2);
  border: 1px solid var(--bord); border-radius: 14px; background: var(--fond-2); }
.partenaires__nom { font-weight: 600; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   17. CONTACT
   ═══════════════════════════════════════════════════════════════════════════ */

.contact__grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--e5); align-items: start; }
.formulaire { margin-top: var(--e3); }
.formulaire__note { font-size: .85rem; color: var(--gris-libelle); }
.formulaire__ligne { margin-bottom: var(--e2); }
.formulaire__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.formulaire__libelle { display: block; font-family: var(--display); font-size: var(--t4);
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris-libelle); margin-bottom: .4rem; }
.formulaire .bouton { margin-top: var(--e2); }
.coordonnees { display: grid; gap: var(--e2); margin-block: var(--e3); }
.coordonnees li { display: flex; align-items: center; gap: var(--e2); }
.coordonnees svg { color: var(--principale); }
.contact__visuel { margin-top: var(--e3); }
.section__intro { color: var(--gris-lecture); margin-top: var(--e2); }
.section__entete { max-width: 46rem; margin-bottom: var(--e4); }

/* ═══════════════════════════════════════════════════════════════════════════
   18. DOUBLE APPEL
   ═══════════════════════════════════════════════════════════════════════════ */

.appel { padding-block: var(--e4) var(--e5); }
.appel__grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5);
  border: 1px solid var(--bord); border-radius: 22px; padding: var(--e5); background: var(--surface); }
.appel__colonne + .appel__colonne { border-left: 1px solid var(--bord); padding-left: var(--e5); }
.appel__titre { font-size: var(--t2); margin-bottom: var(--e2); }
.appel__texte { color: var(--gris-lecture); margin-bottom: var(--e3); }

/* ═══════════════════════════════════════════════════════════════════════════
   19. PIED DE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.pied { border-top: 1px solid var(--bord); background: var(--fond-2); padding-top: var(--e5); margin-top: var(--e5); }
.pied a:hover { color: var(--principale); }
.pied__haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--e4); padding-bottom: var(--e5); }
.pied__accroche { margin-top: var(--e2); max-width: 34ch; font-size: .95rem; color: var(--gris-lecture); }
.pied__titre { font-family: var(--display); font-size: var(--t4); font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--encre); margin-bottom: var(--e2); }
.pied__titre--reseaux { margin-top: var(--e3); }
.pied__liste { display: grid; gap: .55rem; font-size: .95rem; color: var(--gris-lecture); }
.pied__liste--contact li { display: flex; align-items: center; gap: .7rem; }
.pied__liste--contact svg { color: var(--principale); flex: none; }
.pied__texte { font-size: .95rem; color: var(--gris-lecture); }
.lettre__libelle { position: absolute; left: -9999px; }
.lettre__ligne { display: flex; gap: .5rem; flex-wrap: wrap; }
.lettre__ligne .champ { flex: 1 1 12rem; }
.reseaux { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Tuiles carrées pleines, glyphe blanc, dessinées en SVG dans le code. */
.reseaux__tuile { display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--principale-fonce); color: #fff; border-radius: 11px;
  transition: background-color .2s, transform .2s; }
.reseaux__tuile:hover { background: var(--principale-vive); transform: translateY(-3px); color: #fff; }
.reseaux__tuile svg { width: 19px; height: 19px; }
.pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e2); padding-block: var(--e3); border-top: 1px solid var(--bord);
  font-size: .82rem; color: var(--gris-libelle); }
.pied__bas p { margin: 0; }
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ═══════════════════════════════════════════════════════════════════════════
   20. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sans JavaScript, le contenu reste visible : la classe sans-js est posée dans
   le HTML et retirée par le script dès son exécution. */
[data-revele] { opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
[data-revele].est-visible { opacity: 1; transform: none; }
.sans-js [data-revele] { opacity: 1; transform: none; }
.sans-js .motif__arc { stroke-dashoffset: 0; animation: none; }
.sans-js .motif__noeud { opacity: 1; animation: none; }
.sans-js .ligne-masque > span { transform: none; animation: none; }
.sans-js .carte__icone .trace { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  [data-revele] { opacity: 1; transform: none; }
  .motif__arc { stroke-dashoffset: 0; }
  .motif__noeud { opacity: 1; }
  .ligne-masque > span { transform: none; }
  .carte__icone .trace { stroke-dashoffset: 0; }
  .logos__piste { animation: none; }
  .logos__fenetre { overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20 bis. PRODUITS, FORMULES, LOGOS
   Ajoutés le 18/08. Les produits se vendent sur formule et sur prix : leur
   traitement diffère volontairement des cartes de services, pour que le
   visiteur voie d'un coup d'œil que ce n'est pas la même façon d'acheter.
   ═══════════════════════════════════════════════════════════════════════════ */

.entete-section--simple { margin-bottom: var(--e3); }

.produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--e2); }
.produit { position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: var(--e3); border-radius: 18px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--bord);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, background-color .35s; }
.produit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(222, 82, 76, .16), transparent 68%); }
.produit:hover { transform: translateY(-6px); background: var(--surface-survol); border-color: var(--bord-vif); }
.produit:hover::after { opacity: 1; }
.produit__icone { width: 40px; height: 40px; color: var(--principale); margin-bottom: .4rem; }
.produit__titre { font-family: var(--display); font-weight: 700; font-size: var(--t2);
  line-height: 1.1; letter-spacing: -.02em; }
.produit__texte { color: var(--gris-lecture); font-size: .98rem; }
/* Le prix se détache : c'est l'information que le visiteur cherche ici. */
.produit__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
  margin-top: auto; padding-top: var(--e2); border-top: 1px solid var(--bord); }
.produit__prix strong { font-family: var(--display); font-weight: 700; font-size: var(--t2);
  color: var(--encre); letter-spacing: -.02em; }
.produit__periode { color: var(--gris-libelle); font-size: .9rem; }
.produit .carte__lien { margin-top: var(--e2); }

/* Bornée en haut : une formule unique étirée sur 1280 px ne ressemble plus à
   une carte de tarif. Trois formules remplissent la largeur, une seule non. */
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 23rem));
  justify-content: start; gap: var(--e2); align-items: start; }
.formule { position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: var(--e3); border-radius: 18px; background: var(--surface); border: 1px solid var(--bord); }
.formule--avant { border-color: var(--principale); background: var(--surface-2);
  box-shadow: 0 24px 60px -34px rgba(222, 82, 76, .55); }
.formule__ruban { position: absolute; top: -.75rem; left: var(--e3);
  padding: .3rem .8rem; border-radius: 999px; background: var(--principale-fonce); color: #fff; }
.formule__titre { font-size: var(--t3); margin: 0; }
.formule__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; margin: 0; }
/* Pas var(--t1) : à 54 px, « 15 000 F CFA » se coupe en deux dans une carte de
   23 rem. Le prix reste la plus grosse chose de la carte, sans la déborder. */
.formule__prix strong { font-family: var(--display); font-weight: 700;
  font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.25rem);
  line-height: 1.05; letter-spacing: -.03em; }
.formule__periode { color: var(--gris-libelle); font-size: .92rem; }
.formule__texte { color: var(--gris-lecture); font-size: .95rem; margin: 0; }
.formule__intitule { margin-top: .5rem; }
.formule__liste { display: grid; gap: .5rem; font-size: .95rem; color: var(--gris-lecture); }
.formule__liste li { display: flex; align-items: flex-start; gap: .6rem; }
.formule__coche { width: 17px; height: 17px; flex: none; margin-top: .18rem; color: var(--principale); }
.formule__action { margin-top: auto; justify-content: center; }
.formules__note { margin-top: var(--e3); font-size: .88rem; color: var(--gris-libelle); max-width: 60ch; }

/* Bande de logos : deux rangées à vitesses opposées. L'effet de profondeur vient
   de la différence de vitesse, pas d'un calcul au défilement — donc rien à
   recalculer pendant que la page bouge, et aucune saccade sur un téléphone. */
.logos { display: grid; gap: var(--e4); }
/* Le libellé de rangée est dans un conteneur pour s'aligner sur le texte de la
   page ; la piste, elle, va d'un bord à l'autre — c'est ce qui fait le défilé. */
.logos__rangee { display: grid; gap: var(--e2); }
.logos__libelle { display: block; color: var(--gris-libelle); }
.logos__fenetre { overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos__piste { display: flex; align-items: center; gap: var(--e5); width: max-content; padding-block: .5rem; }
.logos__rangee--aller  .logos__piste { animation: logos-aller 46s linear infinite; }
.logos__rangee--retour .logos__piste { animation: logos-retour 64s linear infinite; }
.logos:hover .logos__piste { animation-play-state: paused; }
/* La piste contient deux copies : translater d'exactement la moitié rend la
   reprise invisible. Changer la largeur d'un logo ne casse donc rien. */
@keyframes logos-aller  { to { transform: translateX(-50%); } }
@keyframes logos-retour { from { transform: translateX(-50%); } to { transform: none; } }
.logos__element { display: inline-flex; align-items: center; flex: none; }
.logos__image { height: 44px; width: auto; max-width: 190px; object-fit: contain;
  /* Un mur de logos multicolores écrase tout le reste de la page : ils sont
     désaturés au repos et reprennent leur couleur au survol. */
  filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s; }
:root[data-theme="sombre"] .logos__image { filter: grayscale(1) invert(1) brightness(1.7); opacity: .55; }
.logos__element:hover .logos__image { filter: none; opacity: 1; }
:root[data-theme="sombre"] .logos__element:hover .logos__image { filter: none; opacity: 1; }

/* Note de chantier : visible seulement pour une personne connectée à
   l'administration, elle explique pourquoi elle voit des cadres vides. */
.note-chantier { display: flex; align-items: center; gap: .7rem; margin-top: var(--e2);
  padding: .7rem 1rem; border-radius: 12px; font-size: .88rem; color: var(--gris-lecture);
  background: var(--surface-2); border: 1px dashed var(--bord-vif); }
.note-chantier__icone { width: 18px; height: 18px; flex: none; color: var(--principale); }
.tuile--chantier { border-style: dashed; }

.pied__intitule { margin-top: var(--e3); margin-bottom: .7rem; color: var(--gris-libelle); }

/* Carte de repérage — page Entreprise. Même traitement que la tuile qu'elle
   remplace sur l'accueil, mais en pleine largeur du conteneur. */
.carte-bloc { display: flex; flex-direction: column; gap: var(--e2); align-items: center;
  padding: var(--e4) var(--e3); border-radius: 18px; border: 1px solid var(--bord);
  background: linear-gradient(150deg, var(--halo-1), var(--halo-2)); text-align: center; }
.carte-bloc .carte-region { width: 100%; max-width: 780px; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   20 bis b. ACTUALITÉS EN CARTES
   Grille de trois sur grand écran. Sur téléphone : carrousel à défilement
   horizontal avec accroche, sans JavaScript. Un article sans image porte le
   motif de la charte, jamais un trou.
   ═══════════════════════════════════════════════════════════════════════════ */

.cartes-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.carte-article { position: relative; display: flex; flex-direction: column; border-radius: 18px;
  overflow: hidden; background: var(--surface-2); border: 1px solid var(--bord);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s; }
.carte-article:hover { transform: translateY(-6px); border-color: var(--bord-vif); }
.carte-article__visuel { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(150deg, var(--halo-1), var(--halo-2)); }
.carte-article__media { position: absolute; inset: 0; }
.carte-article__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.carte-article:hover .carte-article__media img { transform: scale(1.05); }
.carte-article__motif { position: absolute; inset: -30% -20% auto auto; width: 90%; aspect-ratio: 1;
  color: var(--principale); }
.carte-article__voile { position: absolute; inset: 0;
  background: linear-gradient(transparent 55%, rgba(22, 18, 25, .18)); pointer-events: none; }
.carte-article__corps { display: flex; flex-direction: column; gap: .55rem; padding: var(--e3);
  flex: 1; }
.carte-article__date { color: var(--gris-libelle); }
.carte-article__titre { font-family: var(--display); font-weight: 700; font-size: var(--t3);
  line-height: 1.15; letter-spacing: -.01em; }
.carte-article .lien-fleche { margin-top: auto; padding-top: var(--e2); }

/* ═══════════════════════════════════════════════════════════════════════════
   20 ter. RECHERCHE DE NOM DE DOMAINE
   Le champ est volontairement le plus gros élément de sa section : c'est une
   caisse, pas un formulaire. Les états libre / pris / à vérifier se distinguent
   d'abord par un libellé, la couleur ne fait que confirmer.
   ═══════════════════════════════════════════════════════════════════════════ */

.domaines { max-width: 56rem; }
.domaines--compact { max-width: none; padding: var(--e3); border-radius: 18px;
  background: var(--surface-2); border: 1px solid var(--bord); }
.domaines__etiquette { display: block; font-family: var(--display); font-weight: 700;
  font-size: var(--t2); letter-spacing: -.02em; margin-bottom: var(--e2); }
.domaines__ligne { display: flex; gap: .6rem; flex-wrap: wrap; }
.champ--domaine { flex: 1 1 16rem; font-family: var(--display); font-weight: 500;
  font-size: 1.15rem; padding: 1rem 1.2rem; }
.domaines__vedettes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2);
  font-size: .88rem; color: var(--gris-libelle); }
.domaines__vedette strong { color: var(--encre); font-family: var(--display); margin-left: .35rem; }

.domaines__resultats { display: grid; gap: .6rem; margin-top: var(--e3); }
.domaine { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center;
  gap: var(--e2); padding: .9rem 1.2rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--bord); }
.domaine__nom { font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  overflow-wrap: anywhere; }
.domaine__etat { font-family: var(--display); font-weight: 500; font-size: var(--t4);
  letter-spacing: .14em; text-transform: uppercase; }
.domaine--libre { border-color: rgba(47, 110, 74, .5); }
.domaine--libre .domaine__etat { color: var(--vert-etat, #2f6e4a); }
.domaine--pris { opacity: .62; }
.domaine--pris .domaine__etat { color: var(--gris-libelle); }
.domaine--a_verifier .domaine__etat { color: var(--principale); }
.domaine__prix { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.domaine__periode { color: var(--gris-libelle); font-weight: 400; font-size: .85rem; }
.domaine__delai { grid-column: 1 / -1; font-size: .82rem; color: var(--gris-libelle); }
.domaines__vide { color: var(--gris-lecture); }
.domaines__note { margin-top: var(--e3); font-size: .85rem; color: var(--gris-libelle); max-width: 60ch; }
:root { --vert-etat: #2f6e4a; }
:root[data-theme="sombre"] { --vert-etat: #7fd6a4; }

.grille-extensions { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--e2); }
.extension { display: flex; flex-direction: column; gap: .4rem; padding: var(--e3);
  border-radius: 18px; background: var(--surface); border: 1px solid var(--bord); }
.extension--avant { border-color: var(--principale); background: var(--surface-2); }
.extension__nom { font-family: var(--display); font-weight: 700; font-size: var(--t2); color: var(--principale); }
.extension__prix { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.extension__periode { color: var(--gris-libelle); font-weight: 400; font-size: .85rem; }
.extension__renouvellement, .extension__delai, .extension__note { font-size: .85rem; color: var(--gris-libelle); }

/* ═══════════════════════════════════════════════════════════════════════════
   21. ADAPTATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .cartes { grid-template-columns: repeat(4, 1fr); }
  .carte, .carte:nth-child(1), .carte:nth-child(2) { grid-column: span 2; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tuile--grande, .tuile--carte { grid-column: span 2; grid-row: span 2; }
  .reperes__liste { grid-template-columns: repeat(2, 1fr); }
  .reperes__element:nth-child(3) { border-left: 0; padding-left: 0; }
  .rail { grid-template-columns: repeat(2, 1fr); row-gap: var(--e4); }
  .secteurs { grid-template-columns: 1fr; }
  .conviction__grille { grid-template-columns: repeat(2, 1fr); }
  .equipe { grid-template-columns: repeat(2, 1fr); }
  .scindee__grille { grid-template-columns: 1fr; gap: var(--e3); }
  .scindee--inverse .scindee__media { order: 0; }
  .contact__grille { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .hero__motif { right: -24%; opacity: .6; }
}

@media (max-width: 1080px) {
  .formules { grid-template-columns: repeat(auto-fit, minmax(15rem, 23rem)); }
}

@media (max-width: 820px) {
  .produits, .formules { grid-template-columns: 1fr; }
  /* Le carrousel du téléphone : une carte presque pleine largeur, accroche au
     défilement, la suivante dépasse pour annoncer qu'il y en a d'autres. */
  .cartes-articles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--e2); margin-inline: calc(-1 * var(--e2)); padding-inline: var(--e2);
    padding-bottom: .5rem; scrollbar-width: none; }
  .cartes-articles::-webkit-scrollbar { display: none; }
  .carte-article { flex: 0 0 84%; scroll-snap-align: center; }
  .domaine { grid-template-columns: 1fr auto; row-gap: .4rem; }
  .domaine__action { grid-column: 1 / -1; justify-content: center; }
  .logos__image { height: 34px; max-width: 140px; }
  .logos__piste { gap: var(--e3); }

  :root { --entete-hauteur: 66px; }
  .entete__interieur { flex-wrap: wrap; }
  .logo__image { height: 34px; }
  .bascule { display: inline-flex; }

  /* Sans JavaScript, la navigation reste dépliée : jamais de menu inaccessible.
     Avec JavaScript, le panneau suit le thème — codé en dur, il restait sombre
     en thème clair, avec du texte sombre dessus. */
  .navigation { flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: var(--e2); padding-bottom: var(--e3); }
  html:not(.sans-js) .navigation { display: none; background: var(--fond); }
  html:not(.sans-js) .navigation.est-ouvert { display: flex; }
  .navigation__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .navigation__element { border-bottom: 1px solid var(--bord); }
  .navigation__lien { display: block; padding-block: 1rem; font-size: 1.05rem; }
  .navigation__lien::after { display: none; }
  .entete__actions { padding-top: var(--e2); flex-wrap: wrap; }
  .bouton-entete { flex: 1; justify-content: center; padding-block: .9rem; }

  .hero--accueil { min-height: auto; }
  .hero__motif { top: auto; bottom: -12%; right: -40%; transform: none; width: 120vw; opacity: .4; }
  .hero__reperes { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .cartes, .bento { grid-template-columns: 1fr; }
  .carte, .carte:nth-child(1), .carte:nth-child(2) { grid-column: span 1; }
  .tuile { grid-column: span 1 !important; grid-row: span 1 !important; min-height: 240px; }
  .tuile--grande { min-height: 340px; }
  .tuile--citation, .tuile--carte { min-height: 0; height: auto; }
  .reperes__liste { grid-template-columns: 1fr; }
  .reperes__element { border-left: 0; padding-left: 0; border-top: 1px solid var(--bord); }
  .reperes__element:first-child { border-top: 0; }
  .rail { grid-template-columns: 1fr; }
  .rail::before, .rail__progres { display: none; }
  .etape { padding-left: var(--e3); padding-top: 0; border-left: 1px solid var(--bord); }
  .etape::before { left: -7px; top: 2px; }
  .conviction__grille { grid-template-columns: 1fr; gap: var(--e3); }
  .equipe { grid-template-columns: 1fr; }
  .appel__grille { grid-template-columns: 1fr; gap: var(--e4); padding: var(--e4); }
  .appel__colonne + .appel__colonne { border-left: 0; border-top: 1px solid var(--bord);
    padding-left: 0; padding-top: var(--e4); }
  .ligne { grid-template-columns: 2.6rem 1fr auto; gap: var(--e2); }
  .ligne__icone { display: none; }
  .manifeste__suite { columns: 1; }
  .formulaire__duo { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; gap: var(--e4); }
  .pied__bas { flex-direction: column; align-items: flex-start; }
}