/* ════════════════════════════════════════════════════════════════════════
   FFPLUM — version créative. Univers « le vol » : légèreté, altitude,
   ciel partagé, fédération de membres.
   PALETTE : bleu fédéral #1E5AA8, bleu nuit #0A1B36, blanc ciel #F2F6FB,
   rouge du logo tricolore #C8323F, lumière d'aube (ambre) #F4B860 sur fond
   sombre uniquement.
   VOIX : Geologica (titres, axe de pente « slnt » : la lettre penche comme
   une aile en virage) ; Spectral italique pour le lapsus, la voix humaine
   dans le texte technique ; Plus Jakarta Sans pour le texte et l'interface ;
   B612 Mono pour les données d'instrument — B612 a été dessinée pour les
   écrans de cockpit Airbus.
   CONTRASTES (outils/palette.py, calculés avant construction) :
     encre #0B1A2E / blanc ciel #F2F6FB ........ 16,11:1
     encre-2 #33445C / blanc ciel ..............  9,12:1
     encre-3 #52627A / blanc ciel ..............  5,71:1  (5,20 sur #E4ECF6)
     bleu fédéral #1E5AA8 / blanc ciel .........  6,28:1  (5,72 sur #E4ECF6)
     blanc / bleu fédéral (boutons) ............  6,81:1
     ambre #F4B860 / bleu nuit #0A1B36 .........  9,71:1
     brume #A9B8CC / bleu nuit .................  8,52:1
     rouge #C8323F / blanc ciel ................  4,86:1
     bleu clair #8FB6EA / bleu nuit ............  8,22:1
   ════════════════════════════════════════════════════════════════════════ */
@import url('../polices/polices.css');

.v6 {
  --papier: #F2F6FB;
  --papier-2: #E4ECF6;
  --voile: #FBFDFF;
  --encre: #0B1A2E;
  --encre-2: #33445C;
  --encre-3: #52627A;
  --filet: rgba(11, 26, 46, .12);
  --filet-fort: rgba(11, 26, 46, .28);
  --fonce: #1E5AA8;
  --fonce-2: #0A1B36;
  --nuit: #06101F;
  --accent: #1E5AA8;
  --accent-vif: #1E5AA8;
  --clair: #F4B860;
  --brume: #A9B8CC;
  --rouge: #C8323F;
  --ciel: #8FB6EA;
  --police-display: 'Geologica', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --police-lapsus: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --police-texte: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --police-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --police-instru: 'B612 Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --dpl-poids: 640;
  --dpl-axes: "slnt" 0;
  --dpl-approche: -0.035em;
  --lapsus-poids: 400;
  --lapsus-axes: normal;
  --lapsus-approche: -0.012em;
  --lapsus-taille: 1.02em;
  --lapsus-taille-grand: .98em;
  --lueur-couleur: rgba(190, 215, 250, .45);
}
/* ════════════════════════════════════════════════════════════════════════
   SOCLE v6 — « haute finition ». Piloté par variables : chaque maquette
   ne définit que sa palette, ses polices et sa signature.
   Techniques : papier fibré, grain photographique, typo display serrée à
   axe variable, lapsus italique, encre qui se répand sous les boutons,
   révélations en rideau, lueur de curseur, marges annotées.
   Variables attendues sur .v6 :
     --papier --papier-2 --voile --encre --encre-2 --encre-3 --filet
     --filet-fort --fonce --fonce-2 --nuit --accent --accent-vif --clair
     --brume --police-display --police-texte --dpl-wdth
   ════════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }   /* height:auto : une image importée avec width/height (photos Joomla) garde ses proportions quand elle est réduite */
a { color: inherit; }

.v6 {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-doux: cubic-bezier(0.65, 0, 0.35, 1);
  background-color: var(--papier);
  /* fibre du papier — à peine perceptible, mais c'est elle qui enlève le « plat » */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.125rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Remise à zéro des titres SANS poids (:where) : toute classe de titre qui fixe ses marges l'emporte.
   Écrite « .v6 h2 », elle pesait plus qu'une classe seule (.fl-cr-titre, .fl-pr-h2…) et annulait leurs marges :
   titres collés aux blocs voisins (comités régionaux, certificats médicaux…), demande du 10/10/2026. */
:where(.v6) :where(h1, h2, h3, h4) { margin: 0; text-wrap: balance; }
.v6 p { text-wrap: pretty; }
.v6 ::selection { background: var(--fonce); color: var(--voile); }
.v6 :focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 3px; border-radius: 3px; }
.v6 .v6-sombre :focus-visible { outline-color: var(--clair); }

/* ─────────────── Typographie ─────────────── */

.v6-display {
  font-family: var(--police-display);
  font-weight: var(--dpl-poids, 600);
  font-variation-settings: var(--dpl-axes, "wdth" 100);
  font-optical-sizing: auto;
  letter-spacing: var(--dpl-approche, -0.036em);
  line-height: 0.92;
}
.v6-titre-heros { font-size: clamp(3rem, 0.7rem + 5.7vw, 6.6rem); line-height: 0.88; }
.v6-titre-xxl   { font-size: clamp(2.9rem, 0.9rem + 7vw, 8.2rem); line-height: 0.86; }
.v6-titre-xl    { font-size: clamp(2.4rem, 1rem + 4.6vw, 5.4rem); line-height: 0.92; }
.v6-titre-l     { font-size: clamp(2.05rem, 1.15rem + 2.7vw, 3.9rem); line-height: 0.96; letter-spacing: -0.03em; }
.v6-titre-m     { font-size: clamp(1.55rem, 1.2rem + 1vw, 2.2rem); line-height: 1.05; letter-spacing: -0.022em; }
.v6-titre-s     { font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.55rem); line-height: 1.14; letter-spacing: -0.016em; font-weight: 600; }

/* Le lapsus : un segment bascule dans l'autre voix (serif italique, accent) */
.v6-lapsus {
  font-family: var(--police-lapsus, var(--police-texte));
  font-style: var(--lapsus-style, italic);
  font-weight: var(--lapsus-poids, 400);
  font-variation-settings: var(--lapsus-axes, normal);
  letter-spacing: var(--lapsus-approche, -0.018em);
  color: var(--accent-vif);
  font-size: var(--lapsus-taille, 0.9em);   /* la voix italique pèse plus à corps égal */
  padding-right: 0.04em;
}
.v6-titre-heros .v6-lapsus, .v6-titre-xxl .v6-lapsus, .v6-titre-xl .v6-lapsus { font-size: var(--lapsus-taille-grand, 0.86em); }
.v6-sombre .v6-lapsus { color: var(--clair); }
.v6-exposant {
  position: relative; top: -0.68em; font-size: 0.5em; line-height: 0;
  vertical-align: baseline; letter-spacing: 0; margin-left: 0.03em;
}
.v6-chiffres { font-variant-numeric: tabular-nums lining-nums; }

.v6-legende {
  font-family: var(--police-ui, var(--police-display));
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.014em; line-height: 1.4;
}
.v6-surtitre {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--accent-vif); text-transform: none;
}
.v6-surtitre::before {
  content: ""; flex: none; width: 0.5rem; height: 0.62rem; background: currentColor;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;   /* une goutte */
}
.v6-sombre .v6-surtitre { color: var(--clair); }
.v6-vertical {
  writing-mode: vertical-rl; transform: rotate(180deg);
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.66rem;
  font-family: var(--police-ui, var(--police-display)); font-weight: 600;
  font-variation-settings: normal; white-space: nowrap; margin: 0;
}
.v6-corps { font-size: clamp(1.07rem, 1.02rem + 0.2vw, 1.16rem); line-height: 1.68; color: var(--encre-2); }
.v6-chapo { font-size: clamp(1.18rem, 1.05rem + 0.48vw, 1.42rem); line-height: 1.52; color: var(--encre-2); }
.v6-sombre .v6-corps, .v6-sombre .v6-chapo { color: var(--brume); }
.v6-prose a {
  color: var(--accent-vif); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklab, currentColor 38%, transparent);
  transition: text-decoration-color .3s, text-decoration-thickness .3s;
}
.v6-prose a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.v6-prose strong { font-weight: 600; color: var(--encre); }
.v6-sombre .v6-prose strong { color: var(--voile); }

/* ─────────────── Mise en page ─────────────── */

.v6-zone { max-width: 1440px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); width: 100%; }
/* Rythme vertical (demande du 10/10/2026, « trop de vide à certains endroits ») : 11rem en haut ET en bas laissaient
   jusqu'à 350 px de vide entre deux blocs de contenu. Marge ramenée à 7rem au plus ; et entre deux sections qui
   partagent le même fond (aucune des deux n'est colorée), la seconde ne rajoute qu'une demi-marge en haut.
   Poids d'UNE classe (:where) : toute section qui fixe ses propres marges (.fl-page, bandeaux…) garde la main. */
.v6-section { padding: clamp(3.25rem, 6vw, 7rem) 0; position: relative; }
.v6-section-serree { padding: clamp(3rem, 5vw, 5.5rem) 0; }
:where(.v6-section:not(.v6-papier-2, .v6-papier, .v6-sombre)) + .v6-section:where(:not(.v6-papier-2, .v6-papier, .v6-sombre)),
:where(.v6-section:not(.v6-papier-2, .v6-papier, .v6-sombre)) + :where(link, style, script) + .v6-section:where(:not(.v6-papier-2, .v6-papier, .v6-sombre)) { padding-top: clamp(1.75rem, 3.5vw, 3.25rem); }   /* feuille de style d'un module glissée entre deux sections */
.v6-duo { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.v6-duo-haut { align-items: start; }
@media (min-width: 960px) {
  .v6-duo { grid-template-columns: 1.05fr 1fr; }
  .v6-duo-inverse { grid-template-columns: 1fr 1.05fr; }
  .v6-duo-inverse > :first-child { order: 2; }
}
.v6-trio { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 2.4vw, 2.2rem); }
@media (min-width: 760px)  { .v6-trio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .v6-trio { grid-template-columns: repeat(3, 1fr); } }
.v6-quatuor { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2vw, 2rem); }
@media (min-width: 1080px) { .v6-quatuor { grid-template-columns: repeat(4, 1fr); } }
.v6-filet-haut { border-top: 1px solid var(--filet); }
.v6-filet-bas  { border-bottom: 1px solid var(--filet); }
.v6-sombre .v6-filet-haut, .v6-sombre .v6-filet-bas { border-color: rgba(255,255,255,.15); }

/* ─────────────── Surfaces ─────────────── */

.v6-sombre {
  color: var(--voile);
  background-color: var(--fonce-2);
  background-image:
    radial-gradient(90% 70% at 12% 0%, color-mix(in oklab, var(--accent) 42%, transparent), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, color-mix(in oklab, var(--nuit) 85%, transparent), transparent 70%);
  isolation: isolate;
}
.v6-sombre .v6-display, .v6-sombre h2, .v6-sombre h3 { color: var(--voile); }
.v6-papier-2 { background-color: var(--papier-2); }
.v6-voile { background-color: var(--voile); }

/* Photographies : cadre net, grain, zoom lent au survol */
.v6-photo { position: relative; overflow: hidden; background-color: var(--papier-2); isolation: isolate; }
.v6-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.v6-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .46 0 0 0 0 .44 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
a:hover .v6-photo img, a:focus-visible .v6-photo img { transform: scale(1.045); }
.v6-portrait { aspect-ratio: 4 / 5; }
.v6-carre { aspect-ratio: 1; }
.v6-paysage { aspect-ratio: 16 / 10; }

/* ─────────────── Boutons : l'encre se répand du point de survol ─────────────── */

.v6-bouton {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 3.25rem; padding: .85rem 1.6rem; border: 0; border-radius: 999px;
  font-family: var(--police-ui, var(--police-display)); font-size: 1rem; font-weight: 600;
  letter-spacing: .004em; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: color .45s var(--ease), box-shadow .45s var(--ease);
}
.v6-bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--survol, var(--encre));
  clip-path: circle(0% at var(--mx) var(--my));
  transition: clip-path .7s var(--ease);
}
.v6-bouton:hover::before, .v6-bouton:focus-visible::before { clip-path: circle(150% at var(--mx) var(--my)); }
.v6-bouton-plein { background: var(--fonce); color: var(--voile); --survol: var(--encre); }
.v6-bouton-ligne { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-fort); --survol: var(--encre); }
.v6-bouton-ligne:hover, .v6-bouton-ligne:focus-visible { color: var(--voile); }
.v6-bouton-clair { background: var(--voile); color: var(--fonce); --survol: var(--clair); }
.v6-bouton-clair:hover, .v6-bouton-clair:focus-visible { color: var(--nuit); }
.v6-bouton-ligne-clair { background: transparent; color: var(--voile); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); --survol: var(--voile); }
.v6-bouton-ligne-clair:hover, .v6-bouton-ligne-clair:focus-visible { color: var(--fonce); }
.v6-fleche { flex: none; transition: transform .55s var(--ease); }
a:hover .v6-fleche, button:hover .v6-fleche, a:focus-visible .v6-fleche { transform: translateX(5px); }

/* Liens : le souligné se retire d'un côté et revient de l'autre */
.v6-lien {
  font-family: var(--police-ui, var(--police-display)); font-weight: 600;
  color: var(--accent-vif);
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
}
.v6-sombre .v6-lien { color: var(--clair); }
.v6-souligne {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 100% 100%; background-repeat: no-repeat;
  padding-bottom: .08em; transition: background-size .6s var(--ease);
}
a:hover .v6-souligne, a:focus-visible .v6-souligne, button:hover .v6-souligne { animation: v6-trait .75s var(--ease); }
@keyframes v6-trait {
  0%   { background-size: 100% 1px; background-position: 100% 100%; }
  45%  { background-size: 0% 1px;   background-position: 100% 100%; }
  46%  { background-size: 0% 1px;   background-position: 0% 100%; }
  100% { background-size: 100% 1px; background-position: 0% 100%; }
}
.v6-souligne-survol {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .55s var(--ease);
}
a:hover .v6-souligne-survol, a:focus-visible .v6-souligne-survol,
[aria-current="page"] .v6-souligne-survol { background-size: 100% 1px; }

/* Le titre d'une ligne bascule dans l'italique au survol */
.v6-glisse { display: inline-block; transition: transform .6s var(--ease); }
.v6-glisse-alt { display: none; }
@media (hover: hover) {
  a:hover .v6-glisse, a:focus-visible .v6-glisse { transform: translateX(.35rem); }
  a:hover .v6-glisse-norm, a:focus-visible .v6-glisse-norm { display: none; }
  a:hover .v6-glisse-alt, a:focus-visible .v6-glisse-alt { display: inline; }
}

/* ─────────────── En-tête ─────────────── */

.v6-tete {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow .35s var(--ease);
}
/* Cartes Leaflet (Où voler, terrains, régions, Challenge…) : leurs calques ont des z-index de 400 à 1000 qui passaient
   AU-DESSUS de l'en-tête collant (z-index 60) et de ses menus au défilement. Chaque carte devient son propre contexte
   d'empilement : l'ordre interne (tuiles, repères, bulles, contrôles) ne change pas, mais rien n'en sort. */
.leaflet-container { isolation: isolate; }
.v6-tete.reduite { box-shadow: 0 14px 40px -24px rgba(0,0,0,.5); }
.v6-tete .v6-zone { display: flex; align-items: center; gap: 1.4rem; height: 5.1rem; transition: height .4s var(--ease); }
.v6-tete.reduite .v6-zone { height: 4.2rem; }
.v6-marque { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.v6-marque-goutte { flex: none; width: 1.55rem; height: 1.9rem; color: var(--fonce); }
.v6-marque-goutte svg { width: 100%; height: 100%; fill: currentColor; }
.v6-marque b {
  display: block; font-family: var(--police-display); font-weight: 600;
  font-variation-settings: "wdth" 94; font-size: 1.22rem; letter-spacing: -.02em;
  line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v6-marque span {
  display: block; font-family: var(--police-texte); font-style: italic;
  font-size: .8rem; color: var(--encre-3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v6-nav { display: none; margin-left: auto; align-items: center; gap: 1.7rem; }
@media (min-width: 1060px) { .v6-nav { display: flex; } }
.v6-nav a:not(.v6-bouton) {
  font-family: var(--police-ui, var(--police-display)); font-weight: 600; font-size: .97rem;
  color: var(--encre-2); text-decoration: none;
  transition: color .3s;
}
.v6-nav a:not(.v6-bouton):hover, .v6-nav a[aria-current="page"] { color: var(--encre); }
.v6-tel {
  font-family: var(--police-ui, var(--police-display)); font-weight: 600; font-size: .97rem;
  color: var(--encre); text-decoration: none; font-variant-numeric: tabular-nums;
}
.v6-burger {
  margin-left: auto; display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--filet-fort);
  background: transparent; color: var(--encre); cursor: pointer;
}
@media (min-width: 1060px) { .v6-burger { display: none; } }
.v6-menu { display: none; }
.v6-menu.ouvert {
  display: grid; gap: .2rem; padding: 1rem clamp(1.25rem, 4vw, 3.5rem) 1.8rem;
  border-bottom: 1px solid var(--filet); background: var(--papier);
}
.v6-menu a { padding: .75rem 0; text-decoration: none; font-family: var(--police-display); font-weight: 600; }
.v6-menu .v6-bouton { margin-top: .8rem; justify-self: start; }

/* ─────────────── Héros éditorial ─────────────── */

.v6-heros { position: relative; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 6rem); }
.v6-heros-grille { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .v6-heros-grille { grid-template-columns: 1.02fr 1fr; } }
.v6-photos { position: relative; overflow: hidden; isolation: isolate; background-color: var(--papier-2); aspect-ratio: 4 / 5; }
.v6-diapo {
  position: absolute; inset: 0; opacity: 0; transform: translate3d(3.5%, 0, 0);
  transition: opacity 1s var(--ease-doux), transform 1.2s var(--ease);
}
.v6-diapo.est-active { opacity: 1; transform: none; }
.v6-diapo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 9s cubic-bezier(.2,.6,.35,1); }
.v6-diapo.est-active img { transform: none; }
.v6-heros-pied { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }
.v6-index { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: none; border: 0; padding: 0; cursor: pointer; }
.v6-index > span { position: relative; display: block; width: 1.8rem; height: 1px; overflow: hidden; background: var(--filet-fort); }
.v6-index > span > span { position: absolute; inset: 0; background: var(--accent-vif); transform-origin: left; transform: scaleX(0); }
.v6-index[aria-current="true"] > span > span { animation: v6-progression var(--duree, 7000ms) linear both; }
.v6-en-pause .v6-index[aria-current="true"] > span > span { animation-play-state: paused; }
@keyframes v6-progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.v6-pause {
  margin-left: auto; display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
  border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--filet-fort);
  background: transparent; color: var(--encre-2); cursor: pointer; transition: color .3s, box-shadow .3s;
}
.v6-pause:hover { color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.v6-romain { font-family: var(--police-texte); font-style: italic; font-size: 1.05rem; color: var(--encre-2); }

/* ─────────────── Listes de sections en grandes lignes ─────────────── */

.v6-lignes { display: grid; }
.v6-ligne { border-top: 1px solid var(--filet); }
.v6-lignes > :last-child { border-bottom: 1px solid var(--filet); }
.v6-sombre .v6-ligne, .v6-sombre .v6-lignes > :last-child { border-color: rgba(255,255,255,.15); }
.v6-ligne > a, .v6-ligne > div {
  display: grid; grid-template-columns: 1fr; gap: .7rem 2rem; align-items: center;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) 0; text-decoration: none;
}
@media (min-width: 900px) { .v6-ligne > a, .v6-ligne > div { grid-template-columns: 1.05fr 1.15fr auto; } }
.v6-ligne-titre { font-family: var(--police-display); font-weight: var(--dpl-poids, 600); font-variation-settings: var(--dpl-axes, "wdth" 100);
  font-size: clamp(1.9rem, 1.1rem + 2.1vw, 3rem); line-height: .98; letter-spacing: var(--dpl-approche, -.034em); }
.v6-ligne p { margin: 0; color: var(--encre-2); font-size: 1.03rem; line-height: 1.6; }
.v6-sombre .v6-ligne p { color: var(--brume); }
.v6-ligne-prix { font-family: var(--police-ui, var(--police-display)); font-weight: 600; font-size: 1.05rem; color: var(--accent-vif); white-space: nowrap; }
.v6-rond {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; flex: none;
  box-shadow: inset 0 0 0 1px var(--filet-fort); color: var(--accent-vif);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s;
}
.v6-ligne > a:hover .v6-rond { background: var(--accent-vif); color: var(--voile); box-shadow: none; }
.v6-sombre .v6-rond { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: var(--clair); }
.v6-sombre .v6-ligne > a:hover .v6-rond { background: var(--clair); color: var(--nuit); }

/* ─────────────── Cartes ─────────────── */

.v6-carte {
  display: flex; flex-direction: column; background: var(--voile);
  border-radius: 1.6rem; padding: clamp(1.7rem, 2.4vw, 2.4rem);
  box-shadow: inset 0 0 0 1px var(--filet);
  transition: box-shadow .55s var(--ease), transform .55s var(--ease);
}
.v6-carte:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1.5px var(--accent-vif), 0 50px 80px -60px rgba(0,0,0,.55);
}
.v6-carte-vedette { box-shadow: inset 0 0 0 1.5px var(--accent-vif); }
.v6-pastille {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem;
  border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor;
  font-family: var(--police-ui, var(--police-display)); font-size: .78rem; font-weight: 700; line-height: 1;
}
.v6-etiquette {
  display: inline-block; padding: .45rem .9rem; border-radius: 999px;
  background: var(--accent-vif); color: var(--voile);
  font-family: var(--police-ui, var(--police-display)); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}

/* ─────────────── Révélations ─────────────── */

@keyframes v6-entree { from { opacity: 0; transform: translate3d(0, .6em, 0); } to { opacity: 1; transform: none; } }
@keyframes v6-rideau {
  from { clip-path: inset(0 0 100% 0); transform: translate3d(0, .25em, 0); }
  to   { clip-path: inset(-.3em -.3em -.4em -.3em); transform: none; }
}
.v6-entree { animation: v6-entree 1.2s var(--ease) both; animation-delay: calc(var(--delai, 0) * 1ms); }
.v6-entree-rideau { animation: v6-rideau 1.4s var(--ease) both; animation-delay: calc(var(--delai, 0) * 1ms); }
.js [data-v6-reveal] {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), clip-path 1.4s var(--ease);
  transition-delay: calc(var(--delai, 0) * 1ms);
}
/* jamais entièrement fermé : l'observateur doit voir l'élément */
.js [data-v6-reveal="rideau"] { opacity: 0; clip-path: inset(0 0 62% 0); transform: translate3d(0, .35em, 0); }
.js [data-v6-reveal="image"] { opacity: 1; transform: none; clip-path: inset(18% 0 0 0); }
.js [data-v6-reveal="image"] img { transform: scale(1.14); transition: transform 1.8s var(--ease); }
.js [data-v6-reveal].v6-visible { opacity: 1; transform: none; }
.js [data-v6-reveal="rideau"].v6-visible { clip-path: inset(-.3em -.3em -.45em -.3em); }
.js [data-v6-reveal="image"].v6-visible { clip-path: inset(0 0 0 0); }
.js [data-v6-reveal="image"].v6-visible img { transform: none; }

/* Lueur qui suit le curseur (bureau seulement) */
.v6-lueur {
  position: fixed; left: 0; top: 0; z-index: 45; width: 36rem; height: 36rem;
  margin: -18rem 0 0 -18rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--lueur-couleur, rgba(255,235,225,.5)), transparent 100%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .8s var(--ease); will-change: transform;
}
.v6-lueur.est-active { opacity: 1; }
@media (hover: none) { .v6-lueur { display: none; } }

/* ─────────────── Questions (FAQ native animée) ─────────────── */

.v6-faq { border-top: 1px solid var(--filet); }
.v6-faq:last-of-type { border-bottom: 1px solid var(--filet); }
.v6-faq > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; font-family: var(--police-display); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -.018em;
}
.v6-faq > summary::-webkit-details-marker { display: none; }
.v6-faq .v6-signe {
  position: relative; flex: none; margin-left: auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--filet-fort);
  transition: transform .55s var(--ease), background-color .4s, box-shadow .4s, color .4s;
}
.v6-faq .v6-signe::before, .v6-faq .v6-signe::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .85rem; height: 1.5px;
  margin: -.75px 0 0 -.425rem; background: currentColor;
}
.v6-faq .v6-signe::after { transform: rotate(90deg); }
.v6-faq[open] .v6-signe { transform: rotate(45deg); background: var(--fonce); color: var(--voile); box-shadow: none; }
.v6-faq > summary:hover .v6-signe { box-shadow: inset 0 0 0 1px var(--accent-vif); }
.v6-faq-corps { padding: 0 4rem 1.8rem 0; color: var(--encre-2); max-width: 62ch; }
.v6-faq::details-content { transition: height .55s var(--ease), content-visibility .55s allow-discrete; height: 0; overflow: clip; }
.v6-faq[open]::details-content { height: auto; }
@supports (interpolate-size: allow-keywords) { .v6 { interpolate-size: allow-keywords; } }

/* ─────────────── Formulaires ─────────────── */

.v6-champ { display: grid; gap: .55rem; }
.v6-champ > span {
  font-family: var(--police-ui, var(--police-display)); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
}
/* Cases à cocher et boutons radio exclus (sans poids : :where) : ils prenaient 100 % de large, 52 px de haut et un cadre
   (« Disponibles seulement » de la boutique en double case) — audit d'affichage du 11/10/2026. */
.v6 input:not(:where([type="checkbox"], [type="radio"])), .v6 select, .v6 textarea {
  width: 100%; min-height: 3.25rem; padding: .85rem 1.05rem; border: 0; border-radius: .9rem;
  background: var(--voile); color: var(--encre); font: inherit; font-size: 1.02rem;
  box-shadow: inset 0 0 0 1px var(--filet-fort); transition: box-shadow .3s;
}
.v6 textarea { min-height: 8rem; resize: vertical; }
.v6 input:focus, .v6 select:focus, .v6 textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent-vif); }
.v6-note-demo { font-size: .95rem; color: var(--accent-vif); font-weight: 600; }
.v6-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ─────────────── Pied de page ─────────────── */

.v6-pied { background: var(--nuit); color: var(--voile); }
.v6-pied .v6-zone { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: 2.2rem; }
.v6-pied-grille { display: grid; grid-template-columns: 1fr; gap: 2.6rem; }
@media (min-width: 860px) { .v6-pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.v6-pied h4, .v6-pied .v6-pied-titre {
  font-family: var(--police-ui, var(--police-display)); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--clair); margin: 0 0 1.1rem;
}
.v6-pied p, .v6-pied li { color: var(--brume); font-size: 1rem; line-height: 1.75; margin: 0 0 .5rem; }
.v6-pied ul { list-style: none; margin: 0; padding: 0; }
.v6-pied a { color: inherit; text-decoration: none; }
.v6-pied a:hover { color: var(--voile); }
.v6-mentions {
  margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.16); font-size: .82rem; line-height: 1.8; color: var(--brume);
}
.v6-mentions .demo { color: var(--clair); font-weight: 600; }

/* Appel flottant */
.v6-appel {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 55;
  display: grid; place-items: center; width: 3.7rem; height: 3.7rem; border-radius: 50%;
  background: var(--fonce); color: var(--voile); text-decoration: none;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6);
  transition: transform .35s var(--ease);
}
.v6-appel:hover { transform: scale(1.08); }
.v6-appel svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────── Mouvement réduit ─────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-v6-reveal], .js [data-v6-reveal="rideau"], .js [data-v6-reveal="image"] {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .js [data-v6-reveal="image"] img, .v6-diapo img, .v6-diapo.est-active img { transform: none !important; }
  .v6-diapo { transform: none; }
  .v6-lueur { display: none; }
}


/* ─── Correctifs relevés par l'audit (tous sites) ─── */
/* Les mentions en marge sont en marge NÉGATIVE : elles poussent la page dès
   que la colonne se resserre. Sous 1080 px, elles disparaissent. */
@media (max-width: 1080px) { .v6-vertical { display: none !important; } }
/* Les blocs de prose sont espacés par `gap` : la marge par défaut des
   paragraphes s'y ajoutait et doublait l'interligne. */
.v6-prose p, .v6-corps > p { margin: 0; }
/* Alertes sécurité de la fédération (bandeau au-dessus de l'en-tête) */
/* Bandeau d'alerte sécurité en haut des pages (js/site.js). Classes propres au bandeau : la liste des alertes de la rubrique
   Sécurité (.fl-alertes, .fl-alerte) a les siennes. Couleurs de la charte : rouge (urgente), noir d'aniline (vigilance), bleu Klein (information). */
.fl-bandeau-alertes { display: grid; margin: 0; padding: 0; }
.fl-bandeau-alerte { position: relative; z-index: 61; margin: 0; padding: 0; color: #fff; background: #120D16; }
.fl-bandeau-alerte-urgent { background: #C8131F; }
.fl-bandeau-alerte-information { background: #001CA8; }
.fl-bandeau-alerte + .fl-bandeau-alerte { border-top: 1px solid rgba(255, 255, 255, .25); }
.fl-bandeau-alerte-zone { max-width: 80rem; margin: 0 auto; padding: .7rem clamp(1rem, 4vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .2rem 1rem; align-items: center; }
.fl-bandeau-alerte-sur { grid-column: 1; margin: 0; font: 700 .7rem/1.3 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.fl-bandeau-alerte-titre { grid-column: 1; margin: 0; font-size: .95rem; line-height: 1.45; }
.fl-bandeau-alerte-lien { grid-column: 2; grid-row: 1 / span 2; color: #fff; font-weight: 700; white-space: nowrap; }
.fl-bandeau-alerte-fermer { grid-column: 3; grid-row: 1 / span 2; border: 0; background: rgba(255, 255, 255, .16); color: #fff; width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fl-bandeau-alerte-fermer:focus-visible, .fl-bandeau-alerte-lien:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) { .fl-bandeau-alerte-zone { grid-template-columns: minmax(0, 1fr) auto; } .fl-bandeau-alerte-lien { grid-column: 1; grid-row: auto; } .fl-bandeau-alerte-fermer { grid-column: 2; grid-row: 1 / span 3; } }

/* ─────────────── Téléphone : zone de sécurité et menu (demande d'Alexis du 11/10/2026) ───────────────
   Zone de sécurité (encoche et barre d'accueil de l'iPhone) : la page s'étend sous l'encoche (viewport-fit=cover, socle.mjs),
   les contenus restent hors de l'encoche en paysage, les boutons flottants au-dessus de la barre d'accueil.
   Menu du téléphone : « Licence 2026 » garde ses marges intérieures (le lien du menu les lui retirait), le bas du menu laisse
   la place des boutons flottants et de la barre d'accueil, et « Une question ? » s'efface tant que le menu est ouvert. */
.v6-zone { padding-left: max(clamp(1.25rem, 4vw, 3.5rem), env(safe-area-inset-left, 0px)); padding-right: max(clamp(1.25rem, 4vw, 3.5rem), env(safe-area-inset-right, 0px)); }
.v6-menu.ouvert { padding-left: max(clamp(1.25rem, 4vw, 3.5rem), env(safe-area-inset-left, 0px)); padding-right: max(clamp(1.25rem, 4vw, 3.5rem), env(safe-area-inset-right, 0px));
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.v6-menu a.v6-bouton { padding: .95rem 1.5rem; margin-top: 1.2rem; }
html.fl-menu-ouvert .fl-ab-bouton, html.fl-menu-ouvert .fl-ab-pan { display: none !important; }