/* ==========================================================================
   Coquille FixFlow — feuille SOURCE.
   dist/style.css est une COPIE, ecrasee a chaque rendu : ne jamais l editer.

   Huit jetons de couleur, aucun autre, poses par render.mjs dans un
   <style> de page : --marque --accent --fond --fond-2 --texte --texte-doux
   --bordure --sur-marque. --sur-marque est CALCULEE, jamais choisie.
   Aucun hex en dur ici : les voiles passent tous par color-mix().

   Convention de la coquille : les panneaux PLEINS sont --marque et leur
   encre est --sur-marque ; --accent ne sert qu aux petites marques
   (etiquette, soulignement, rang, coche, etoile, pastille).

   Le modele tient en trois formes : la PILULE (boutons, jetons, champs,
   facettes), le CARRE ARRONDI a 16 (panneaux et vignettes), et le FILET
   (separations, tetes de section, chronologie).
   ========================================================================== */

:root {
  --max: 1200px;
  --gout: 24px;
  --r-pi: 999px;
  --r-ca: 16px;
  --r-gr: 28px;
  --tr: .24s cubic-bezier(.4, 0, .2, 1);
  --sec-y: 104px;
  --voile-1: color-mix(in srgb, var(--texte) 6%, transparent);
  --voile-2: color-mix(in srgb, var(--texte) 12%, transparent);
  --sur-voile-1: color-mix(in srgb, var(--sur-marque) 12%, transparent);
  --sur-voile-2: color-mix(in srgb, var(--sur-marque) 24%, transparent);
  --ombre: 0 24px 60px color-mix(in srgb, var(--texte) 12%, transparent);
  --ombre-pt: 0 10px 26px color-mix(in srgb, var(--texte) 10%, transparent);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--pol, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.62;
  color: var(--texte);
  background: var(--fond);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
summary::-webkit-details-marker { display: none; }

/* Cache a l oeil, garde pour l assistance : jamais display:none, qui
   sortirait le champ du parcours au clavier. */
.ff-vis {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.ff-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gout);
}

.ff-sec { padding: var(--sec-y) 0; background: var(--fond); }
.ff-sec--cl { background: var(--fond-2); }
.ff-sec--fin { padding: 40px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.ff-sec--pl { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.ff-sec--pl a { color: inherit; }

/* --------------------------------------------------------------------------
   1. Briques de texte
   -------------------------------------------------------------------------- */

/* L etiquette du modele : trait court, puis le mot en capitales. */
.ff-eb {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.ff-eb i { width: 22px; height: 2px; flex: none; background: currentColor; border-radius: var(--r-pi); }
.ff-eb--sur { color:var(--sur-bande,var(--sur-marque)); opacity: .92; }
/* Sur un panneau plein (--marque), l accent ne se lit pas (« Avis clients » bronze sur vert sombre,
   ratio 2.4, Angouleme 10 sept 2026) : l etiquette prend l encre du panneau. */
.ff-sec--pl .ff-eb { color:var(--sur-bande,var(--sur-marque)); opacity: .92; }

.ff-h { font-size: clamp(28px, 3.4vw, 42px); }
.ff-h--md { font-size: clamp(26px, 2.9vw, 34px); }
.ff-h--gr { font-size: clamp(30px, 4vw, 50px); }
.ff-h--xl { font-size: clamp(38px, 6vw, 78px); line-height: 1.02; letter-spacing: -.035em; }

/* Signature typographique du modele : le segment d accent porte un
   soulignement epais, la suite revient sur sa propre ligne. */
.ff-h__a {
  font-style: normal;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% .14em;
  padding-bottom: .04em;
}
.ff-sec--pl .ff-h__a, .ff-hero .ff-h__a { background-image: linear-gradient(var(--sur-marque), var(--sur-marque)); }
.ff-h__s { display: block; margin-top: .18em; font-weight: 400; opacity: .78; }

.ff-cp { margin-top: 20px; max-width: 62ch; color: var(--texte-doux); font-size: 17px; }
.ff-sec--pl .ff-cp { color: inherit; opacity: .84; }
.ff-tx { margin-top: 16px; color: var(--texte-doux); }
.ff-sec--pl .ff-tx { color: inherit; opacity: .84; }
.ff-mn { margin-top: 14px; font-size: 13px; color: var(--texte-doux); }
.ff-mn--ce { text-align: center; margin-top: 28px; }

/* Points coches : deux colonnes des qu il y a la place. */
.ff-co { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.ff-co > li {
  display: flex; align-items: flex-start; gap: 10px;
  flex: 1 1 44%; min-width: 0;
  font-size: 15px; color: var(--texte-doux);
}
.ff-co--se > li { flex: 1 1 100%; }
/* SIGNATURE — la coche n est pas une pastille pleine : c est un ANNEAU
   ouvert, entaille en haut a droite par un masque radial, la coche
   sortant par la breche. Aucune autre marque de la coquille n est evidee. */
.ff-co > li > i {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  border-radius: var(--r-pi);
  border: 1.6px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  -webkit-mask-image: radial-gradient(circle 7px at 88% 12%, transparent 0 100%, #000 100%);
  mask-image: radial-gradient(circle 7px at 88% 12%, transparent 0 100%, #000 100%);
  position: relative;
}
.ff-co > li > i::after {
  content: ""; position: absolute; left: 5px; top: 3px;
  width: 7px; height: 12px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(42deg);
}
.ff-co--sur > li, .ff-sec--pl .ff-co > li { color: inherit; opacity: .9; }
.ff-co--sur > li > i, .ff-sec--pl .ff-co > li > i { background: var(--sur-voile-2); }
.ff-co--sur > li > i::after, .ff-sec--pl .ff-co > li > i::after { border-color:var(--sur-bande,var(--sur-marque)); }

.ff-tg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ff-tg > li {
  padding: 6px 14px;
  border: 1px solid var(--bordure); border-radius: var(--r-pi);
  font-size: 13px; color: var(--texte-doux); background: var(--fond);
}
.ff-sec--pl .ff-tg > li, .ff-sb__ct .ff-tg > li {
  border-color: var(--sur-voile-2); background: transparent; color: inherit;
}

.ff-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: var(--r-pi);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 19px; line-height: 1;
}
.ff-sec--pl .ff-ic { background: var(--sur-voile-2); color: inherit; }

.ff-et { display: inline-flex; gap: 4px; }
.ff-et i { width: 13px; height: 13px; border-radius: 3px; }
.ff-et__p { background: var(--accent); }
.ff-et__v { background: var(--voile-2); }

/* --------------------------------------------------------------------------
   2. Boutons et liens
   -------------------------------------------------------------------------- */

/* La PILULE est l unite de forme du modele : rayon plein, pastille ronde
   a fleche en fermeture, hauteur constante. */
.ff-bt {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 51px;
  padding: 6px 6px 6px 24px;
  border: 1px solid transparent; border-radius: var(--r-pi);
  font-size: 15px; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
}
.ff-bt__l { white-space: nowrap; }
.ff-bt__a {
  width: 37px; height: 37px; flex: none;
  border-radius: var(--r-pi);
  background: color-mix(in srgb, var(--fond) 22%, transparent);
  position: relative;
}
.ff-bt__a::after {
  content: ""; position: absolute; left: 13px; top: 14px;
  width: 8px; height: 8px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
/* SIGNATURE — la pilule pleine porte une LUEUR INTERNE en tete, jamais
   une ombre portee : le relief vient du dedans, releve neuf fois sur le
   modele. Le contour reste net, aucun halo autour du bouton. */
.ff-bt--pl, .ff-bt--tel {
  box-shadow: inset 0 4px 7px color-mix(in srgb, var(--sur-marque) 34%, transparent);
}
.ff-bt:hover { transform: translateY(-1px); }
.ff-bt--inerte { cursor: default; }
.ff-bt--min { min-height: 44px; padding-left: 18px; font-size: 14px; }
.ff-bt--min .ff-bt__a { width: 32px; height: 32px; }
.ff-bt--min .ff-bt__a::after { left: 11px; top: 12px; }
.ff-bt--large { width: 100%; justify-content: space-between; }

/* Plein : le bouton principal du modele. */
.ff-bt--pl { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.ff-bt--pl:hover { background: color-mix(in srgb, var(--marque) 86%, var(--texte)); }
.ff-bt--pl .ff-bt__a { background: var(--sur-voile-2); }

/* Contour : le second bouton de l affiche, sur fond plein. */
.ff-bt--tr { border-color: var(--sur-voile-2); color:var(--sur-bande,var(--sur-marque)); background: transparent; }
.ff-bt--tr:hover { background: var(--sur-voile-1); }
.ff-bt--tr .ff-bt__a { background: var(--sur-voile-2); }
/* Le contour est pense pour un panneau plein (encre --sur-marque). Pose sur un fond CLAIR (formulaire de
   contact, section claire), il prend l encre de la page — « Nous appeler » blanc sur creme etait invisible
   (recherche-de-fuite-angouleme.fr/contact/, 10 sept 2026). */
.ff-sec--cl .ff-bt--tr, .ff-cf .ff-bt--tr, .ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-bt--tr { color: var(--texte); border-color: color-mix(in srgb, var(--texte) 35%, transparent); }
.ff-sec--cl .ff-bt--tr .ff-bt__a, .ff-cf .ff-bt--tr .ff-bt__a, .ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-bt--tr .ff-bt__a { background: color-mix(in srgb, var(--texte) 12%, transparent); }
.ff-sec--pl .ff-bt--tr, .ff-hero .ff-bt--tr { color:var(--sur-bande,var(--sur-marque)); border-color: var(--sur-voile-2); }
/* Bande CTA AVEC photo (voile de marque sombre) : le contour reste clair. */
.ff-sec .ff-cb--ph .ff-bt--tr.ff-bt { color:var(--sur-bande,var(--sur-marque)); border-color: var(--sur-voile-2); }
.ff-sec .ff-cb--ph .ff-bt--tr.ff-bt .ff-bt__a { background: var(--sur-voile-2); }

/* Inverse : pose sur un panneau plein, il reprend le fond de page. */
.ff-bt--iv { background: var(--fond); color: var(--texte); }
.ff-bt--iv .ff-bt__a { background: var(--voile-2); }

/* Le bouton d entete porte une pastille d appel devant l intitule. */
.ff-bt--tel { padding-left: 20px; }

.ff-ln {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--accent);
}
.ff-ln i {
  width: 18px; height: 1.5px; flex: none; background: currentColor;
  position: relative; transition: width var(--tr);
}
.ff-ln:hover i { width: 26px; }

/* --------------------------------------------------------------------------
   3. Images et cadres
   -------------------------------------------------------------------------- */

.ff-ph {
  display: block; position: relative; overflow: hidden;
  width: 100%;
  border-radius: var(--r-ca);
  background: var(--fond-2);
}
.ff-ph img { width: 100%; height: 100%; object-fit: cover; }

/* Sans fichier, le cadre garde la place et affiche son intitule : la
   coquille n embarque aucune photo, mais ne laisse jamais un trou muet. */
.ff-ph--nu {
  background-image:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--texte) 5%, transparent) 0 2px,
      transparent 2px 13px);
  border: 1px solid var(--bordure);
}
.ff-ph__hc {
  position: absolute; inset: 14px;
  border: 1px dashed color-mix(in srgb, var(--texte) 16%, transparent);
  border-radius: calc(var(--r-ca) - 6px);
}
.ff-ph__nom {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 48px);
  text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--texte) 52%, transparent);
}

/* --------------------------------------------------------------------------
   4. Tete de section fendue
   -------------------------------------------------------------------------- */

.ff-te {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px;
  margin-bottom: 56px;
}
.ff-te__g { flex: 1 1 58%; min-width: 0; }
.ff-te__d { flex: 0 1 auto; }
.ff-te--ce { flex-direction: column; align-items: center; text-align: center; }
.ff-te--ce .ff-te__g { flex: 1 1 100%; max-width: 720px; }
.ff-te--ce .ff-cp { margin-left: auto; margin-right: auto; }
.ff-te--ce .ff-eb { justify-content: center; }
.ff-te--sur .ff-h { color: inherit; }

/* --------------------------------------------------------------------------
   5. Barre d annonce, entete, volets
   -------------------------------------------------------------------------- */

.ff-hd { position: absolute; left: 0; right: 0; top: 0; z-index: 90; }
body[data-tete="marine"] .ff-hd { color:var(--sur-bande,var(--sur-marque)); }
body[data-tete="plat"] .ff-hd {
  position: relative;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}
.ff-hd[data-hd="colle"] {
  position: fixed;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  border-bottom-color: transparent;
  box-shadow: var(--ombre-pt);
  animation: ff-descend .3s ease;
}
@keyframes ff-descend { from { transform: translateY(-100%); } to { transform: none; } }
.ff-hd[data-hd="colle"] .ff-an { display: none; }

/* La barre d annonce : coordonnees et disponibilite, filets entre elles. */
.ff-an { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.ff-an__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px;
  min-height: 42px;
  font-size: 13.5px;
}
.ff-an__in > * { display: inline-flex; align-items: center; text-decoration: none; opacity: .88; }
.ff-an__in > * + *::before {
  content: ""; width: 1px; height: 13px; margin-right: 26px;
  background: color-mix(in srgb, currentColor 32%, transparent);
}

.ff-hd__bx { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ff-hd__in {
  display: flex; align-items: center; gap: 28px;
  min-height: 82px;
  position: relative; z-index: 3;
}
.ff-hd__mq {
  display: inline-flex; align-items: center; gap: 10px;
  flex: none;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-decoration: none;
}
.ff-hd__so {
  width: 26px; height: 26px; flex: none;
  border-radius: 8px 2px 8px 2px;
  background: var(--accent);
}
.ff-hd__nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.ff-hd__ac { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.ff-hd__bg { display: none; }

/* Contrat du volet deroulant :
   - le panneau est colle sous son lien par un PADDING, jamais une marge,
     pour que le curseur ne traverse aucun vide en descendant ;
   - le lien qui l ouvre porte une petite fleche vers le bas ;
   - le panneau est large et porte une VITRINE illustree sur le cote ;
   - en version compacte il se replie a plat dans le flux. */
.ff-nv { position: relative; }
.ff-nv__t {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px;
  border-radius: var(--r-pi);
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background var(--tr);
}
.ff-nv__t:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ff-nv__t--volet::after {
  content: "";
  width: 6px; height: 6px; flex: none; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--tr), margin var(--tr);
}
.ff-nv:hover > .ff-nv__t--volet::after,
.ff-nv:focus-within > .ff-nv__t--volet::after { transform: rotate(-135deg); margin-top: 2px; }

.ff-nv__v {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  padding-top: 16px;               /* le pont : jamais une marge */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--tr), visibility var(--tr);
  z-index: 70;
}
.ff-nv:hover > .ff-nv__v,
.ff-nv:focus-within > .ff-nv__v { opacity: 1; visibility: visible; pointer-events: auto; }

.ff-nv__vin {
  display: flex; gap: 30px;
  min-width: 600px;
  padding: 26px;
  border: 1px solid var(--bordure); border-radius: var(--r-gr);
  background: var(--fond); color: var(--texte);
  box-shadow: var(--ombre);
}
.ff-nv__cols { display: flex; flex-wrap: wrap; gap: 22px 34px; flex: 1 1 auto; min-width: 0; }
.ff-nv__col { flex: 1 1 44%; min-width: 0; }
.ff-nv__ct {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux);
}
.ff-nv__col li + li { margin-top: 2px; }
.ff-nv__col a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; margin-left: -10px;
  border-radius: 10px;
  font-size: 14.5px; text-decoration: none;
  transition: background var(--tr), color var(--tr);
}
.ff-nv__col a i { width: 5px; height: 5px; flex: none; border-radius: var(--r-pi); background: var(--accent); }
.ff-nv__col a:hover { background: var(--fond-2); color: var(--accent); }

.ff-nv__vit {
  flex: none; width: 244px;
  padding: 16px;
  border-radius: var(--r-ca);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
}
.ff-nv__ph { height: 122px; margin-bottom: 14px; border-radius: 10px; }
.ff-nv__vtx .ff-eb { margin-bottom: 8px; }
.ff-nv__vtx strong { display: block; font-size: 16px; line-height: 1.25; }
.ff-nv__vtx p { margin-top: 8px; font-size: 13.5px; opacity: .85; }
.ff-nv__vtx .ff-bt { margin-top: 14px; }

@media (max-width: 1180px) {
  .ff-nv__vin { min-width: 500px; }
  .ff-nv__vit { width: 208px; }
  .ff-hd__in { gap: 18px; }
}

/* --------------------------------------------------------------------------
   6. Affiche
   -------------------------------------------------------------------------- */

.ff-hero {
  position: relative; isolation: isolate;
  padding: 210px 0 92px;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  overflow: hidden;
}
.ff-hero__fd {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0; border: 0;
  z-index: -2;
}
/* Voile de lecture : le texte de l affiche reste lisible quelle que soit
   la photo posee derriere. */
.ff-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--marque) 0%,
    color-mix(in srgb, var(--marque) 88%, transparent) 46%,
    color-mix(in srgb, var(--marque) 52%, transparent) 100%);
}
.ff-hero__in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 44px; }
.ff-hero__ct { flex: 1 1 56%; min-width: 0; }
.ff-hero__so { margin-top: 26px; max-width: 54ch; font-size: 18px; opacity: .86; }
.ff-hero__ac { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* La pastille de preuve, en verre, posee sous les boutons. */
.ff-hero__pv {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 40px; padding: 12px 22px 12px 12px;
  border: 1px solid var(--sur-voile-2); border-radius: var(--r-pi);
  background: var(--sur-voile-1);
  backdrop-filter: blur(6px);
}
.ff-hero__av { display: inline-flex; }
.ff-hero__av i {
  width: 30px; height: 30px;
  border-radius: var(--r-pi);
  border: 2px solid var(--marque);
  background: var(--sur-voile-2);
}
.ff-hero__av i + i { margin-left: -12px; }
.ff-hero__pv strong { display: block; font-size: 17px; line-height: 1.2; }
.ff-hero__pv span { font-size: 13px; opacity: .82; }

/* Le panneau clair en bas a droite reprend les atouts en rangee. */
.ff-hero__pn {
  flex: 1 1 30%; min-width: 0;
  padding: 24px;
  border-radius: var(--r-gr);
  background: var(--fond); color: var(--texte);
  box-shadow: var(--ombre);
}
.ff-hero__pt { display: block; margin-bottom: 16px; font-size: 17px; }
.ff-hero__bd > li { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.ff-hero__bd > li + li { border-top: 1px solid var(--bordure); }
.ff-hero__bd strong { display: block; font-size: 15px; }
.ff-hero__bd span { font-size: 13.5px; color: var(--texte-doux); }
.ff-hero__bd .ff-ic { width: 38px; height: 38px; font-size: 16px; }
/* Un atout peut porter une ligne d explication ET des points : ils
   s empilent sous l intitule au lieu de se chasser l un l autre. */
.ff-hero__bd .ff-hero__bp { display: block; margin-top: 4px; opacity: .84; }

/* --------------------------------------------------------------------------
   7. Fil d ariane
   -------------------------------------------------------------------------- */

.ff-fa { padding: 22px 0; background: var(--fond-2); border-bottom: 1px solid var(--bordure); }
body[data-tete="marine"] .ff-fa { padding-top: 138px; }
.ff-fa ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texte-doux); }
.ff-fa a { text-decoration: none; }
.ff-fa a:hover { color: var(--accent); }
.ff-fa li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.ff-fa li[aria-current] { color: var(--texte); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Grilles — NORME COQUILLE R3 : le nombre de colonnes se DECLARE en
   pistes comptees, jamais deduit du remplissage. Un flex-basis en
   pourcentage porte un flex-grow implicite : dans une rangee incomplete,
   la derniere carte orpheline s etire pour manger le reste — largeur
   inegale. `repeat(N, minmax(0,1fr))` ferme la piste : chaque carte garde
   exactement 1/N, remplie ou pas. Le nombre de pistes se declare a chaque
   palier de media query au lieu de se deviner (voir la fin de la feuille).
   min-width:0 empeche un enfant long de pousser sa piste.
   -------------------------------------------------------------------------- */

.ff-gr { display: grid; gap: 26px; }
.ff-gr > * { min-width: 0; }
.ff-gr--pd, .ff-gr--ma { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ff-gr--sb, .ff-gr--re, .ff-gr--av, .ff-gr--zo,
.ff-gr--ai, .ff-gr--ta, .ff-gr--mi, .ff-gr--bl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ff-gr--ab { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   9. Intro, blocs SEO, expertise
   -------------------------------------------------------------------------- */

.ff-in2 { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.ff-in2__g { flex: 1 1 42%; min-width: 0; }
.ff-in2__d { flex: 1 1 48%; min-width: 0; }
.ff-in2__d .ff-tx:first-child { margin-top: 0; }
.ff-in2__d .ff-bt { margin-top: 28px; }

/* Les blocs SEO : quatre au minimum sur home, service, categorie, zone et
   subcity — le controle est fait en erreur franche par le moteur.
   L alternance est imposee ici, jamais par les donnees. */
.ff-bs { display: flex; flex-direction: column; gap: 86px; }
.ff-bs__it { display: flex; flex-wrap: wrap; align-items: center; gap: 34px 60px; }
.ff-bs__it[data-cote="droite"] { flex-direction: row-reverse; }
.ff-bs__vi { flex: 1 1 44%; min-width: 0; }
.ff-bs__ct { flex: 1 1 44%; min-width: 0; }
.ff-bs__ph { height: 420px; border-radius: var(--r-gr); }
.ff-bs__ct .ff-bt { margin-top: 30px; }

/* L expertise : photo a gauche, onglets soulignes a droite. Les onglets
   sont des boutons radio caches — aucun JavaScript, aucun etat perdu. */
.ff-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 60px; }
.ff-ex__vi { flex: 1 1 44%; min-width: 0; }
.ff-ex__ct { flex: 1 1 44%; min-width: 0; }
.ff-ex__ph { height: 460px; border-radius: var(--r-gr); }
.ff-ex__ba {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  margin-top: 30px;
  border-bottom: 1px solid var(--bordure);
}
.ff-ex__og {
  padding: 12px 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 600; color: var(--texte-doux);
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr);
}
.ff-ex__og:hover { color: var(--texte); }
.ff-ex__vs { position: relative; }
.ff-ex__vo { display: none; align-items: flex-start; gap: 16px; padding-top: 26px; }
.ff-ex__vo p { color: var(--texte-doux); }
.ff-ex__ct .ff-bt { margin-top: 30px; }

#ff-og-0:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(1),
#ff-og-1:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(2),
#ff-og-2:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(3),
#ff-og-3:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(4),
#ff-og-4:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(5),
#ff-og-5:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(6) {
  color: var(--accent); border-bottom-color: var(--accent);
}
#ff-og-0:checked ~ .ff-ex .ff-ex__vs > .ff-ex__vo:nth-child(1),
#ff-og-1:checked ~ .ff-ex .ff-ex__vs > .ff-ex__vo:nth-child(2),
#ff-og-2:checked ~ .ff-ex .ff-ex__vs > .ff-ex__vo:nth-child(3),
#ff-og-3:checked ~ .ff-ex .ff-ex__vs > .ff-ex__vo:nth-child(4),
#ff-og-4:checked ~ .ff-ex .ff-ex__vs > .ff-ex__vo:nth-child(5),
#ff-og-5:checked ~ .ff-ex .ff-ex__vs > .ff-ex__vo:nth-child(6) { display: flex; }
.ff-ex__og:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. Services : liste a gauche, vitrines a droite
   -------------------------------------------------------------------------- */

.ff-sv { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.ff-sv__ls { flex: 1 1 28%; min-width: 0; align-self: flex-start; }
.ff-sv__ls > li + li { border-top: 1px solid var(--bordure); }
.ff-sv__li {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 4px;
  text-decoration: none;
  transition: padding var(--tr), color var(--tr);
}
.ff-sv__li:hover { padding-left: 12px; color: var(--accent); }
.ff-sv__nu { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .06em; }
.ff-sv__lb { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; }
.ff-sv__li > i {
  width: 9px; height: 9px; flex: none;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
/* NORME COQUILLE, R3 — pistes comptees : le nombre de colonnes se
   declare, il ne se devine jamais d une base en pourcentage. Sans cela,
   une carte esseulee en fin de grille (nombre d elements impair) herite
   du `flex-grow` de ses voisines et s etire seule sur toute la largeur. */
.ff-sv__gr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; flex: 1 1 62%; min-width: 0; }
.ff-sv__ca {
  position: relative; overflow: hidden;
  border-radius: var(--r-gr);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  isolation: isolate;
}
.ff-sv__ph { position: absolute; inset: 0; height: 100%; border-radius: 0; border: 0; z-index: -2; }
.ff-sv__ca::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    var(--marque) 24%,
    color-mix(in srgb, var(--marque) 66%, transparent) 100%);
}
.ff-sv__ct { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px; min-height: 300px; }
.ff-sv__ct h3 { margin-top: auto; font-size: 20px; }
.ff-sv__ct p { font-size: 14.5px; opacity: .86; }
.ff-sv__ct .ff-ic { background: var(--sur-voile-2); color: inherit; }
.ff-sv__ct .ff-bt--pl { background: var(--fond); color: var(--texte); }
.ff-sv__ct .ff-bt--pl .ff-bt__a { background: var(--voile-2); }

/* --------------------------------------------------------------------------
   11. Facettes, produits, fiche, caracteristiques
   -------------------------------------------------------------------------- */

.ff-fc { display: flex; flex-wrap: wrap; gap: 10px; }
.ff-fc__it {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--bordure); border-radius: var(--r-pi);
  background: var(--fond);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.ff-fc__it:hover { border-color: var(--accent); color: var(--accent); }
.ff-fc__it--on { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); border-color: transparent; }
.ff-fc__it--on:hover { color:var(--sur-bande,var(--sur-marque)); }

.ff-pd {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bordure); border-radius: var(--r-gr);
  background: var(--fond);
}
.ff-pd__vi { position: relative; }
/* SIGNATURE — la vignette qui COIFFE une carte n arrondit que ses deux
   coins hauts et vient mordre les bords : elle se lit comme un couvercle,
   jamais comme une image posee dans une marge. */
.ff-pd__ph { height: 210px; border-radius: var(--r-ca) var(--r-ca) 0 0; border: 0; }
.ff-pr__ph { border-radius: var(--r-ca) var(--r-ca) 0 0; }
.ff-pd__px {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 8px 16px;
  border-radius: var(--r-pi);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  font-size: 16px; font-weight: 700;
}
.ff-pd__px small { font-size: 12px; font-weight: 500; opacity: .8; }
.ff-pd__ct { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px; }
.ff-pd__ct h3 { font-size: 18px; }
.ff-pd__ct p { margin-top: 10px; font-size: 14.5px; color: var(--texte-doux); }
.ff-pd__ct .ff-co { margin-top: 16px; }
.ff-pd__ct .ff-bt { margin-top: auto; align-self: flex-start; }
.ff-pd__ct .ff-co + .ff-bt { margin-top: 20px; }

.ff-fi { display: flex; flex-wrap: wrap; gap: 44px 56px; }
.ff-fi__vi { flex: 1 1 46%; min-width: 0; }
.ff-fi__ct { flex: 1 1 42%; min-width: 0; }
.ff-fi__ph { height: 520px; border-radius: var(--r-gr); }
.ff-fi__px { margin-top: 26px; font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.ff-fi__px small { margin-left: 8px; font-size: 15px; font-weight: 500; color: var(--texte-doux); }
.ff-fi__ct .ff-bt { margin-top: 30px; }

.ff-sp { display: flex; flex-wrap: wrap; gap: 0 60px; }
.ff-sp__li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  flex: 1 1 44%; min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--bordure);
}
.ff-sp__lb { font-size: 14.5px; color: var(--texte-doux); }
.ff-sp__va { font-size: 15px; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   12. Chronologie, chiffres, atouts
   -------------------------------------------------------------------------- */

/* La chronologie du modele : un axe vertical central, les cartes qui
   alternent de part et d autre, une pastille cochee posee sur l axe. */
.ff-pr { position: relative; padding: 8px 0; }
/* SIGNATURE — le fil de la chronologie s ETEINT vers le bas au lieu de
   s arreter net : masque en degre, le trait se dissout sous la derniere
   etape. Voile decoratif, donc pointer-events: none. */
.ff-pr::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px;
  background: var(--bordure);
  -webkit-mask-image: linear-gradient(180deg, #000 0 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 76%, transparent 100%);
  pointer-events: none;
}
.ff-pr__et { position: relative; display: flex; padding: 0 0 34px; }
.ff-pr__et[data-cote="gauche"] { justify-content: flex-start; padding-right: 50%; }
.ff-pr__et[data-cote="droite"] { justify-content: flex-end; padding-left: 50%; }
.ff-pr__pt {
  position: absolute; left: 50%; top: 26px;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: var(--r-pi);
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--fond-2);
}
.ff-pr__pt::after {
  content: ""; position: absolute; left: 9px; top: 7px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--fond); border-bottom: 2px solid var(--fond);
  transform: rotate(42deg);
}
.ff-pr__ca {
  position: relative;
  width: 100%; max-width: 480px;
  padding: 28px 30px;
  border-radius: var(--r-gr);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
}
.ff-pr__et[data-cote="gauche"] .ff-pr__ca { margin-right: 44px; }
.ff-pr__et[data-cote="droite"] .ff-pr__ca { margin-left: 44px; }
/* SIGNATURE — le numero d etape est ECRIT EN ACCENT et en tres grand,
   au-dessus du titre : c est lui qui ouvre la carte, pas le titre. */
.ff-pr__nu {
  display: block; margin-bottom: 10px;
  font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: var(--accent);
}
.ff-pr__ca h3 { font-size: 21px; }
.ff-pr__ca p { margin-top: 12px; font-size: 14.5px; opacity: .86; }
/* Une etape peut porter sa vignette et ses points : la photo coiffe la
   carte, les points ferment le pave, tous deux dans l encre du panneau. */
.ff-pr__ph { height: 170px; margin-bottom: 18px; border-radius: var(--r-ca); }
.ff-pr__ca .ff-co { margin-top: 16px; }
.ff-pr__ca .ff-co > li { font-size: 14px; color:var(--sur-bande,var(--sur-marque)); opacity: .86; }
.ff-pr__ca .ff-co > li > i { background: var(--sur-voile-2); }

/* Les chiffres : quatre colonnes NUES, filets entre elles, aucune carte.
   Le role ne se rend pas si aucun chiffre n est donne — jamais de bande
   remplie de valeurs fabriquees. */
.ff-ch { display: flex; flex-wrap: wrap; gap: 32px 0; }
.ff-ch__it { flex: 1 1 22%; min-width: 0; padding: 0 28px; border-left: 1px solid var(--bordure); }
.ff-ch__it:first-child { border-left: 0; padding-left: 0; }
.ff-ch__it strong {
  display: block;
  font-size: clamp(38px, 4.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.045em;
}
.ff-ch__it span { display: block; margin-top: 12px; font-size: 14.5px; color: var(--texte-doux); }

.ff-wy { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 60px; }
.ff-wy__vi { position: relative; flex: 1 1 42%; min-width: 0; }
.ff-wy__ph { height: 500px; border-radius: var(--r-gr); }
/* La pastille de lecture posee sur la photo — decorative, sans texte. */
.ff-wy__pl {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: var(--r-pi);
  background: var(--fond);
  box-shadow: var(--ombre-pt);
}
.ff-wy__pl::after {
  content: ""; position: absolute; left: 30px; top: 25px;
  border-left: 16px solid var(--accent);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.ff-wy__ls { flex: 1 1 46%; min-width: 0; }
.ff-wy__it { display: flex; gap: 20px; padding: 24px 0; }
.ff-wy__it + .ff-wy__it { border-top: 1px solid var(--bordure); }
.ff-wy__it > div { min-width: 0; }
.ff-wy__it h3 { font-size: 19px; }
.ff-wy__it p { margin-top: 10px; font-size: 14.5px; color: var(--texte-doux); }
.ff-wy__it .ff-co { margin-top: 14px; }
.ff-wy__pa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-pi);
  border: 1px solid var(--bordure);
  color: var(--accent); font-size: 19px;
}

/* --------------------------------------------------------------------------
   13. Secteurs, certifications, realisations
   -------------------------------------------------------------------------- */

.ff-sb__it {
  position: relative; display: flex; overflow: hidden; isolation: isolate;
  min-height: 420px;
  border-radius: var(--r-gr);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
}
.ff-sb__ph { position: absolute; inset: 0; height: 100%; border-radius: 0; border: 0; z-index: -2; }
.ff-sb__it::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    var(--marque) 30%,
    color-mix(in srgb, var(--marque) 60%, transparent) 100%);
}
.ff-sb__ct { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 28px; width: 100%; }
.ff-sb__mq {
  align-self: flex-start;
  padding: 6px 15px;
  border: 1px solid var(--sur-voile-2); border-radius: var(--r-pi);
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.ff-sb__ct h3 { font-size: 22px; }
.ff-sb__ct p { font-size: 14.5px; opacity: .86; }
/* La carte est posee sur sa photo voilee de marque : les points prennent
   l encre du panneau, pas celle du corps de page. */
.ff-sb__ct .ff-co { margin-top: 0; gap: 8px; }
.ff-sb__ct .ff-co > li { font-size: 14px; color:var(--sur-bande,var(--sur-marque)); opacity: .88; }
.ff-sb__ct .ff-co > li > i { background: var(--sur-voile-2); }

.ff-ce { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.ff-ce__g { flex: 1 1 36%; min-width: 0; }
.ff-ce__d { display: flex; flex-wrap: wrap; gap: 24px; flex: 1 1 54%; min-width: 0; }
.ff-ce__it {
  flex: 1 1 44%; min-width: 0;
  padding: 26px;
  border: 1px solid var(--bordure); border-radius: var(--r-gr);
  background: var(--fond);
}
.ff-ce__it h3 { margin-top: 18px; font-size: 17px; }
.ff-ce__it p { margin-top: 10px; font-size: 14px; color: var(--texte-doux); }

.ff-re__vi { position: relative; }
.ff-re__ph { height: 300px; border-radius: var(--r-gr); }
.ff-re__me {
  position: absolute; left: 16px; top: 16px;
  padding: 6px 15px;
  border-radius: var(--r-pi);
  background: var(--fond); color: var(--texte);
  font-size: 12.5px; font-weight: 600;
}
.ff-re__it h3 { margin-top: 20px; font-size: 19px; }
.ff-re__it p { margin-top: 10px; font-size: 14.5px; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   14. Avant / apres INTERACTIF
   Les deux photos sont superposees, la decoupe se fait par --pos, et un
   curseur en surimpression la commande a la souris, au doigt et au
   clavier. Deux vignettes cote a cote ne satisferaient pas le contrat.
   -------------------------------------------------------------------------- */

.ff-ab__fg {
  position: relative; margin: 0; overflow: hidden;
  height: 380px;
  border-radius: var(--r-gr);
  background: var(--fond-2);
  touch-action: pan-y;
}
.ff-ab__av, .ff-ab__ap { position: absolute; inset: 0; display: block; }
.ff-ab__ap { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ff-ab__ph { height: 100%; border-radius: 0; border: 0; }
.ff-ab__lb {
  position: absolute; left: 16px; top: 16px;
  padding: 6px 14px;
  border-radius: var(--r-pi);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.ff-ab__lb--d { left: auto; right: 16px; background: var(--fond); color: var(--texte); }
/* La barre de separation suit --pos ; elle est decorative, la commande
   reste l input. */
.ff-ab__ba {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; margin-left: -1.5px;
  background: var(--fond);
}
.ff-ab__ba i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: var(--r-pi);
  background: var(--fond);
  box-shadow: var(--ombre-pt);
}
.ff-ab__ba i::before, .ff-ab__ba i::after {
  content: ""; position: absolute; top: 17px;
  width: 8px; height: 8px;
  border-top: 1.8px solid var(--texte); border-right: 1.8px solid var(--texte);
}
.ff-ab__ba i::before { left: 11px; transform: rotate(-135deg); }
.ff-ab__ba i::after { right: 11px; transform: rotate(45deg); }
.ff-ab__i {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
/* poignee FINE (7 sept 2026) : une poignee large decale la valeur du pointeur sur une piste
   etroite (80 % du bloc -> 86 % a 390) ; la piste couvre le cadre, tout reste saisissable. */
.ff-ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; cursor: ew-resize; }
.ff-ab__i::-moz-range-thumb { width: 2px; height: 380px; border: 0; opacity: 0; cursor: ew-resize; }
.ff-ab__i:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; opacity: 1; }
.ff-ab__ct h3 { margin-top: 24px; font-size: 20px; }
.ff-ab__ct p { margin-top: 10px; font-size: 14.5px; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   15. Avis, marques
   -------------------------------------------------------------------------- */

.ff-av__it {
  display: flex; flex-direction: column;
  padding: 30px;
  border-radius: var(--r-gr);
  background: var(--fond); color: var(--texte);
}
.ff-av__it h3 { margin-top: 20px; font-size: 18px; }
.ff-av__it p { margin-top: 12px; font-size: 15px; color: var(--texte-doux); }
.ff-av__pd { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bordure); }
.ff-av__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-pi);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-weight: 700;
}
.ff-av__id { display: flex; flex-direction: column; min-width: 0; }
.ff-av__id strong { font-size: 15px; }
.ff-av__id small { font-size: 13px; color: var(--texte-doux); }
.ff-av__pg { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.ff-av__pg i { width: 8px; height: 8px; border-radius: var(--r-pi); background: var(--sur-voile-2); }
.ff-av__pg .ff-av__pu--on { width: 26px; background: var(--sur-marque); }

/* La piste de marques deborde volontairement : c est une piste, pas une
   grille. Le faux positif est connu des gates. */
.ff-mq { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.ff-mq__lb { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.ff-mq__ls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; flex: 1 1 0; min-width: 0; }
.ff-mq__ls > li { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--texte); opacity: .42; }

/* --------------------------------------------------------------------------
   16. Local : zones, reperage, urgence
   -------------------------------------------------------------------------- */

.ff-zo__it { display: block; position: relative; overflow: hidden; border-radius: var(--r-gr); text-decoration: none; }
.ff-zo__ph { height: 230px; border-radius: 0; border: 0; }
.ff-zo__ct {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--bordure); border-top: 0;
  border-radius: 0 0 var(--r-gr) var(--r-gr);
  background: var(--fond);
}
.ff-zo__ct small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ff-zo__ct strong { display: block; margin-top: 6px; font-size: 17px; }
.ff-zo__it:hover .ff-zo__ct { background: var(--fond-2); }

.ff-ul { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 60px; }
.ff-ul__vi { flex: 1 1 50%; min-width: 0; }
.ff-ul__ct { flex: 1 1 38%; min-width: 0; }
.ff-ul__ph { height: 400px; border-radius: var(--r-gr); }
.ff-ul__ad { margin-top: 24px; }
.ff-ul__ad span { display: block; font-size: 15.5px; color: var(--texte-doux); }
.ff-ul__ct .ff-bt { margin-top: 26px; }

.ff-ur { display: flex; flex-wrap: wrap; align-items: center; gap: 34px 60px; }
.ff-ur__g { flex: 1 1 46%; min-width: 0; }
.ff-ur__d { flex: 1 1 38%; min-width: 0; }
.ff-ur__tx { margin-top: 20px; opacity: .86; }
.ff-ur__tel {
  display: inline-block;
  font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.03em;
  text-decoration: none;
}
.ff-ur__d .ff-bt { margin-top: 26px; }

/* --------------------------------------------------------------------------
   17. Aides, matieres, offres
   -------------------------------------------------------------------------- */

.ff-ai__it {
  position: relative;
  padding: 30px;
  border: 1px solid var(--bordure); border-radius: var(--r-gr);
  background: var(--fond);
}
.ff-ai__nu {
  display: block; margin-bottom: 14px;
  font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.ff-ai__it h3 { font-size: 19px; }
.ff-ai__it p { margin-top: 12px; font-size: 14.5px; color: var(--texte-doux); }
/* La mention des aides ferme la grille : sans ses conditions, un montant
   annonce serait une promesse. */
.ff-ai__me { margin-top: 24px; font-size: 13px; line-height: 1.7; color: var(--texte-doux); }

.ff-ma__it { overflow: hidden; border-radius: var(--r-gr); border: 1px solid var(--bordure); background: var(--fond); }
.ff-ma__ph { height: 200px; border-radius: 0; border: 0; }
.ff-ma__ct { padding: 22px; }
.ff-ma__ct h3 { font-size: 17px; }
.ff-ma__ct p { margin-top: 10px; font-size: 14px; color: var(--texte-doux); }

.ff-ta__it {
  display: flex; flex-direction: column;
  padding: 32px;
  border: 1px solid var(--bordure); border-radius: var(--r-gr);
  background: var(--fond);
}
.ff-ta__hd { display: flex; align-items: center; gap: 14px; }
.ff-ta__hd h3 { font-size: 19px; }
.ff-ta__px { margin-top: 22px; font-size: 38px; font-weight: 700; letter-spacing: -.035em; }
.ff-ta__px small { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--texte-doux); }
.ff-ta__tx { margin-top: 12px; font-size: 14.5px; color: var(--texte-doux); }
.ff-ta__it .ff-co { flex: 1 1 auto; }
.ff-ta__it .ff-bt { margin-top: 28px; }

/* --------------------------------------------------------------------------
   18. Questions, maillage, appels, contact
   -------------------------------------------------------------------------- */

.ff-fq { max-width: 860px; margin: 0 auto; }
.ff-fq__it { border-bottom: 1px solid var(--bordure); }
.ff-fq__it summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  font-size: 17px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.ff-fq__it summary i {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-pi); border: 1px solid var(--bordure);
  position: relative;
  transition: background var(--tr), border-color var(--tr);
}
.ff-fq__it summary i::before, .ff-fq__it summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor;
}
.ff-fq__it summary i::before { width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; }
.ff-fq__it summary i::after { width: 1.8px; height: 12px; margin: -6px 0 0 -.9px; transition: transform var(--tr); }
.ff-fq__it[open] summary i { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); border-color: transparent; }
.ff-fq__it[open] summary i::after { transform: scaleY(0); }
.ff-fq__r { padding: 0 60px 26px 0; }
.ff-fq__r p { color: var(--texte-doux); }
/* L encart de relance ferme l accordeon, sur la meme laisse de 860px. */
.ff-fq__en {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 20px;
  max-width: 860px; margin: 36px auto 0;
  padding: 30px 34px;
  border-radius: var(--r-gr);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); text-align: center;
}
.ff-fq__en strong { flex: 1 1 100%; min-width: 0; font-size: 20px; }
.ff-fq__en p { flex: 1 1 100%; min-width: 0; font-size: 14.5px; opacity: .86; }
.ff-fq__en .ff-bt { margin-top: 10px; }

.ff-mi__it {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bordure); border-radius: var(--r-gr);
  background: var(--fond);
  text-decoration: none;
  transition: border-color var(--tr), transform var(--tr);
}
.ff-mi__it:hover { border-color: var(--accent); transform: translateY(-2px); }
.ff-mi__ct { padding: 26px; flex: 1 1 auto; }
.ff-mi__me { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ff-mi__ct h3 { margin-top: 12px; font-size: 19px; }
.ff-mi__ct p { margin-top: 10px; font-size: 14.5px; color: var(--texte-doux); }
.ff-mi__ph { height: 180px; border-radius: 0; border: 0; border-top: 1px solid var(--bordure); }

/* L appel du modele : panneau clair arrondi, titre a gauche, champs en
   pilule et bouton a droite. */
.ff-cb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px;
  padding: 48px;
  border-radius: var(--r-gr);
  background: var(--fond-2);
}
/* Avec une photo, elle passe en fond sous un voile de marque : la bande
   garde son image, le texte garde son contraste. */
.ff-cb--ph { position: relative; overflow: hidden; color:var(--sur-bande,var(--sur-marque)); }
.ff-cb__fd { position: absolute; inset: 0; width: 100%; border-radius: inherit; }
.ff-cb--ph::after {
  content: ''; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--marque) 86%, transparent);
}
.ff-cb--ph > .ff-cb__g, .ff-cb--ph > .ff-cb__d { position: relative; z-index: 1; }
.ff-cb--ph .ff-h { color:var(--sur-bande,var(--sur-marque)); }
.ff-cb--ph .ff-cp { color:var(--sur-bande,var(--sur-marque)); opacity: .86; }
.ff-cb--ph .ff-eb { color:var(--sur-bande,var(--sur-marque)); }
.ff-cb__g { flex: 1 1 42%; min-width: 0; }
.ff-cb__d { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 1 1 46%; min-width: 0; }
.ff-cb__ch { flex: 1 1 44%; min-width: 0; }
.ff-cb__ch--l { flex: 1 1 100%; }
.ff-cb__ch input {
  width: 100%; min-height: 51px;
  padding: 0 20px;
  border: 1px solid var(--bordure); border-radius: var(--r-pi);
  background: var(--fond); color: var(--texte);
  font: inherit; font-size: 15px;
}
.ff-cb__d .ff-bt { flex: 1 1 100%; justify-content: space-between; }
input::placeholder, textarea::placeholder { color: var(--texte-doux); opacity: .85; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ff-cf { display: flex; flex-wrap: wrap; gap: 44px 60px; }
.ff-cf__g { flex: 1 1 52%; min-width: 0; }
.ff-cf__d { flex: 1 1 34%; min-width: 0; }
/* NORME COQUILLE, R3 — memes pistes comptees que .ff-sv__gr : deux
   colonnes declarees, le champ long occupe les deux. */
.ff-cf__fo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.ff-cf__ch { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ff-cf__ch--l { grid-column: 1 / -1; }
.ff-cf__ch > span { font-size: 13.5px; font-weight: 600; color: var(--texte-doux); }
.ff-cf__ch input, .ff-cf__ch textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--bordure); border-radius: var(--r-ca);
  background: var(--fond); color: var(--texte);
  font: inherit; font-size: 15px;
  resize: vertical;
}
.ff-cf__ch input { min-height: 51px; border-radius: var(--r-pi); }
.ff-cf__fo .ff-bt, .ff-cf__fo .ff-mn { grid-column: 1 / -1; }
.ff-cf__co { display: flex; gap: 16px; padding: 22px 0; }
.ff-cf__co + .ff-cf__co { border-top: 1px solid var(--bordure); }
.ff-cf__co > div { min-width: 0; }
.ff-cf__co strong { display: block; font-size: 16px; }
.ff-cf__co a, .ff-cf__co span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--texte-doux); text-decoration: none; }
.ff-cf__co a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   19. Journal et mentions
   -------------------------------------------------------------------------- */

/* Le pied de carte s ecrit avant la vue : la mise en page le renvoie
   dessous, l image garde la tete du cadre. */
.ff-bl__it {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-gr);
  border: 1px solid var(--bordure);
  background: var(--fond);
  transition: border-color var(--tr);
}
.ff-bl__it:hover { border-color: var(--accent); }
.ff-bl__ph { order: 1; height: 268px; border-radius: 0; border: 0; }
.ff-bl__pd { order: 2; margin: 0; padding: 30px; }
.ff-bl__dt { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.ff-bl__ti { margin: 12px 0 0; }
.ff-bl__ti h3 { font-size: 19px; line-height: 1.25; }
/* Le lien reste porte par le titre seul : une surface etendue par-dessus
   la carte recouvrirait la date et le chapo. */
.ff-bl__lk { color: inherit; text-decoration: none; }
.ff-bl__lk:hover { color: var(--accent); }
.ff-bl__cp { margin: 10px 0 0; font-size: 14.5px; color: var(--texte-doux); }
.ff-bl__ap { margin-top: 44px; text-align: center; }

.ff-ar { max-width: 980px; margin: 0 auto; }
.ff-ar__me { margin-top: 20px; font-size: 14px; color: var(--texte-doux); }
.ff-ar__une { height: 420px; margin-top: 34px; border-radius: var(--r-gr); }
.ff-ar__cr { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 48px; }
.ff-ar__so {
  flex: 1 1 26%; min-width: 0; align-self: flex-start;
  position: sticky; top: 110px;
  padding: 24px;
  border: 1px solid var(--bordure); border-radius: var(--r-gr);
  background: var(--fond-2);
}
.ff-ar__st { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.ff-ar__so li + li { margin-top: 8px; }
.ff-ar__so a { font-size: 14.5px; text-decoration: none; }
.ff-ar__so a:hover { color: var(--accent); }
.ff-ar__tx { flex: 1 1 62%; min-width: 0; }
.ff-ar__tx > :first-child { margin-top: 0; }
.ff-ar__h2 { margin-top: 40px; font-size: 26px; }
.ff-ar__h3 { margin-top: 30px; font-size: 20px; }
.ff-ar__en {
  margin-top: 30px; padding: 24px 28px;
  border-left: 3px solid var(--accent); border-radius: 0 var(--r-ca) var(--r-ca) 0;
  background: var(--fond-2);
}
.ff-ar__en strong { display: block; margin-bottom: 8px; font-size: 17px; }
.ff-ar__fg { margin: 34px 0 0; }
.ff-ar__ph { height: 340px; border-radius: var(--r-ca); }
.ff-ar__fg figcaption { margin-top: 12px; font-size: 13px; color: var(--texte-doux); }

.ff-lg { max-width: 900px; margin: 0 auto; }
.ff-lg__mj { margin-top: 18px; font-size: 14px; color: var(--texte-doux); }
.ff-lg__cr { margin-top: 44px; }
.ff-lg__bl + .ff-lg__bl { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--bordure); }
.ff-lg__bl h2 { font-size: 22px; }

/* --------------------------------------------------------------------------
   20. Pied
   -------------------------------------------------------------------------- */

.ff-ft { padding: 88px 0 34px; background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.ff-ft a { color: inherit; text-decoration: none; }
/* Bandeau d appel en tete : le propos tient la largeur, l action file a
   l extreme droite. */
.ff-ft__ba {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  margin-bottom: 62px;
}
.ff-ft__ap { flex: 1 1 52%; min-width: 0; margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.22; }
.ff-ft__bt { flex: none; }
.ff-ft__rg { display: flex; flex-wrap: wrap; gap: 44px 40px; }
.ff-ft__ru { flex: 1 1 18%; min-width: 0; }
.ff-ft__mq { flex: 1 1 30%; min-width: 0; }
.ff-ft__mq strong { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; letter-spacing: -.02em; }
.ff-ft__mq p { margin-top: 18px; font-size: 14.5px; opacity: .82; max-width: 40ch; }
.ff-ft__rx { display: flex; gap: 10px; margin-top: 26px; }
.ff-ft__rx i { width: 38px; height: 38px; border-radius: var(--r-pi); border: 1px solid var(--sur-voile-2); }
.ff-ft__ct { display: block; margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ff-ft__ru li + li { margin-top: 10px; }
.ff-ft__ru a { font-size: 14.5px; opacity: .86; }
.ff-ft__ru a:hover { opacity: 1; }
.ff-ft__nl { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; opacity: .86; }
.ff-ft__nl .ff-ic { width: 30px; height: 30px; font-size: 14px; background: var(--sur-voile-2); color: inherit; }
/* Le credit court sur toute la largeur, sans filet ni colonne en vis-a-vis. */
.ff-ft__cr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin-top: 62px;
  font-size: 13.5px; opacity: .74;
}
.ff-ft__liens { display: flex; flex-wrap: wrap; gap: 22px; }
.ff-ft__liens a { opacity: .74; }
.ff-ft__liens a:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   21. Largeurs intermediaires et compactes
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --sec-y: 78px; }
  .ff-bs__ph, .ff-ex__ph, .ff-wy__ph, .ff-fi__ph, .ff-ul__ph { height: 380px; }
  .ff-sv__ls { flex: 1 1 100%; }
  .ff-sv__gr { flex: 1 1 100%; }
  .ff-gr--pd, .ff-gr--ma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* NORME COQUILLE T5 : a 1024px la piste « tarifs » retombe a ~242px de
     texte utile (308px de carte - 32px*2 de fond - 2px de bordure) ; un
     prix a corps 38 y descend a 6.4em, sous le plancher. On resserre le
     corps a ce seul palier plutot que de retoucher la piste elle-meme. */
  .ff-ta__px { font-size: 32px; }
  .ff-cb { padding: 36px; }
}

/* Sous 900px : la nav passe en panneau lateral pilote par une case a
   cocher (aucun JavaScript), et chaque volet se replie A PLAT dans le
   flux — plus de panneau flottant, plus de decalage --dx. */
@media (max-width: 900px) {
  .ff-hd { position: relative; background: var(--fond); color: var(--texte); border-bottom: 1px solid var(--bordure); }
  body[data-tete="marine"] .ff-hd { color: var(--texte); }
  .ff-hd[data-hd="colle"] { position: fixed; background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
  body[data-tete="marine"] .ff-hd[data-hd="colle"] { color:var(--sur-bande,var(--sur-marque)); }
  .ff-hero { padding-top: 84px; }
  body[data-tete="marine"] .ff-fa { padding-top: 22px; }

  .ff-hd__in { min-height: 68px; gap: 12px; }
  .ff-hd__bg {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; flex: none;
    border: 1px solid currentColor; border-radius: var(--r-pi);
    cursor: pointer;
  }
  .ff-hd__bg i { display: block; height: 1.8px; background: currentColor; border-radius: var(--r-pi); }
  .ff-hd__bg i:nth-child(2) { width: 70%; }

  .ff-hd__nav {
    position: fixed; left: 0; right: 0; top: 0; bottom: 0;
    display: block; margin: 0;
    padding: 96px var(--gout) 48px;
    background: var(--fond); color: var(--texte);
    overflow-y: auto;
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--tr), visibility var(--tr);
    z-index: 2;
  }
  .ff-hd__bx:checked ~ .ff-wrap .ff-hd__nav { transform: none; visibility: visible; }
  .ff-an { position: relative; z-index: 3; }

  .ff-nv { width: 100%; }
  .ff-nv__t { width: 100%; justify-content: space-between; padding: 15px 0; font-size: 16.5px; border-radius: 0; border-bottom: 1px solid var(--bordure); }
  .ff-nv__t:hover { background: none; }
  .ff-nv__v {
    position: static; transform: none;
    padding-top: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .ff-nv__vin { display: block; min-width: 0; padding: 14px 0 18px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .ff-nv__cols { display: block; }
  .ff-nv__col { width: 100%; }
  .ff-nv__col + .ff-nv__col { margin-top: 18px; }
  .ff-nv__vit { width: 100%; margin-top: 16px; }
  .ff-nv__ph { height: 140px; }
  /* Deux boutons dans la barre mobile : l appel devient un glyphe telephone, le devis garde un
     libelle court « Devis » (le libelle complet reste lu par les lecteurs d ecran). Avant : deux
     fleches identiques sans texte, ou 390 px de boutons sur 360 (Angouleme, 10 sept 2026). */
  .ff-hd__ac .ff-bt--tel .ff-bt__l { display: none; }
  .ff-hd__ac .ff-bt--tel { padding: 6px; }
  .ff-hd__ac .ff-bt--tel[href^="tel:"] .ff-bt__a::after { content: "\260F\FE0E"; border: 0; transform: none; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
  .ff-hd__ac .ff-bt--tel[href^="/contact"] { padding: 6px 6px 6px 14px; }
  .ff-hd__ac .ff-bt--tel[href^="/contact"] .ff-bt__l { display: inline-block; font-size: 0; }
  .ff-hd__ac .ff-bt--tel[href^="/contact"] .ff-bt__l::before { content: "Devis"; font-size: 14px; font-weight: 700; }

  .ff-hero__pn { flex: 1 1 100%; }
  .ff-ex__vi, .ff-ex__ct, .ff-wy__vi, .ff-wy__ls,
  .ff-ul__vi, .ff-ul__ct, .ff-fi__vi, .ff-fi__ct,
  .ff-in2__g, .ff-in2__d, .ff-ce__g, .ff-ce__d,
  .ff-cf__g, .ff-cf__d, .ff-cb__g, .ff-cb__d,
  .ff-ur__g, .ff-ur__d, .ff-ar__so, .ff-ar__tx { flex: 1 1 100%; }
  .ff-ar__so { position: static; }
  .ff-bs__vi, .ff-bs__ct { flex: 1 1 100%; }
  .ff-bs { gap: 60px; }
  .ff-gr--sb, .ff-gr--re, .ff-gr--av, .ff-gr--zo,
  .ff-gr--ai, .ff-gr--ta, .ff-gr--mi, .ff-gr--bl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* La chronologie repasse sur un axe a gauche : l alternance n a plus de
     place, mais le fil et les rangs restent. */
  .ff-pr::before { left: 13px; margin-left: 0; }
  .ff-pr__et[data-cote="gauche"], .ff-pr__et[data-cote="droite"] { justify-content: flex-start; padding: 0 0 26px 48px; }
  .ff-pr__pt { left: 13px; top: 22px; margin-left: -13px; }
  .ff-pr__et[data-cote="gauche"] .ff-pr__ca, .ff-pr__et[data-cote="droite"] .ff-pr__ca { margin: 0; max-width: none; }

  .ff-ch__it { flex: 1 1 40%; }
  .ff-ch__it:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ff-fq__r { padding-right: 0; }
}

/* Sous 640px : toutes les bases en pourcentage reviennent a 100%.
   Une base en pourcentage ne passe JAMAIS a la ligne d elle-meme : sans
   cette remise a plat, deux colonnes de 46% resteraient cote a cote a
   360px et deborderaient. */
@media (max-width: 640px) {
  :root { --gout: 18px; --sec-y: 60px; }
  .ff-te { margin-bottom: 38px; }
  .ff-te__g, .ff-te__d { flex: 1 1 100%; }
  .ff-hero { padding: 76px 0 60px; }
  .ff-hero__ct { flex: 1 1 100%; }
  .ff-hero__ac .ff-bt { flex: 1 1 100%; justify-content: space-between; }
  .ff-hero__pv { width: 100%; }

  .ff-gr { grid-template-columns: minmax(0, 1fr); }
  .ff-sv__gr { grid-template-columns: minmax(0, 1fr); }
  .ff-ce__it { flex: 1 1 100%; }
  .ff-co > li { flex: 1 1 100%; }
  .ff-sp__li { flex: 1 1 100%; }
  .ff-ch__it { flex: 1 1 100%; border-left: 0; padding-left: 0; }
  .ff-cb__ch { flex: 1 1 100%; }
  .ff-cf__fo { grid-template-columns: minmax(0, 1fr); }
  .ff-nv__col { flex: 1 1 100%; }
  .ff-ft__ru, .ff-ft__mq, .ff-ft__ap { flex: 1 1 100%; }

  .ff-cb { padding: 26px 20px; }
  .ff-bs__ph, .ff-ex__ph, .ff-wy__ph, .ff-fi__ph, .ff-ul__ph, .ff-ar__une { height: 260px; }
  .ff-ab__fg { height: 300px; }
  .ff-ab__i::-moz-range-thumb { height: 300px; }
  .ff-sb__it { min-height: 340px; }
  .ff-av__it, .ff-ta__it, .ff-ai__it { padding: 24px; }
  .ff-ft__ap { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* contraste-source — bandes sombres : chacune declare son encre (--sur-bande) ; marque en texte : --encre-marque. */

/* contraste-bandes (14/09/2026) — l'ACCENT COMME ENCRE, et l'encre du bouton inverse.

   1. Six textes de cette coquille s'ecrivent en --accent sur un sol CLAIR : l'oeil de section
      (.ff-eb), le nom de departement d'une tuile de zone, le numero d'etape (.ff-sv__nu), la meta
      d'une carte de maillage (.ff-mi__me) et l'onglet actif du comparatif. Orange sur blanc = 3,06,
      sur --fond-2 = 2,74, il en faut 4,5. Ils passent a --encre-accent (meme teinte, assombrie
      jusqu'au seuil — jeton pose par render.mjs). Le scope est celui que la feuille emploie deja
      elle-meme pour dire « sol clair » (ligne 232) : les bandes .ff-sec--pl et .ff-hero gardent
      l'accent brut, qui s'y lit, et .ff-eb y a de toute facon son encre de bande (ligne 97). */
.ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-eb,
.ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-sv__nu,
.ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-mi__me,
.ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-zo__ct small,
.ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-bl__dt,
.ff-sec:not(.ff-sec--pl):not(.ff-hero) .ff-fi__px { color: var(--encre-accent, var(--accent)); }
/* L'onglet ACTIF du comparatif est pose par six selecteurs a specificite d'ID : on les reprend a
   l'identique pour ne changer QUE l'encre. Le filet sous l'onglet garde l'accent brut (un trait
   n'est pas du texte). */
#ff-og-0:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(1),
#ff-og-1:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(2),
#ff-og-2:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(3),
#ff-og-3:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(4),
#ff-og-4:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(5),
#ff-og-5:checked ~ .ff-ex .ff-ex__ba > .ff-ex__og:nth-child(6) { color: var(--encre-accent, var(--accent)); }
/* 2. Le bouton INVERSE pose une plaque blanche et declare son encre sombre (ligne 240), mais dans la
      bande pleine la regle generale « tout lien herite de l'encre de bande » (ligne 80) la battait en
      specificite : libelle blanc sur plaque blanche, ratio 1. On lui rend l'encre qu'il declare. */
.ff-sec--pl .ff-bt--iv { color: var(--texte); }

/* >>> NORME COQUILLE — cadre vide (pose par _lib/poser-cadre-vide.mjs) */
/* ============================================================
   NORME COQUILLE — LE CADRE VIDE PORTE SON ENCRE (R4b)
   ------------------------------------------------------------
   R4 dit depuis toujours que le cadre VIDE et le cadre REMPLI sont deux
   etats TENABLES. Seule la moitie basse etait mesuree : « le cadre vide ne
   s effondre pas sous 24 px ». Personne ne mesurait la moitie haute : « le
   cadre vide reste tenable quand il est GRAND ».

   C est la faute qu Angelo a vue le 22 aout 2026. Il n a pas vu une
   composition fausse — les bandes de reference le prouvent : le hero de
   roofer est bien une photo plein cadre avec le texte ecrit dessus, et le
   cadre de plumbfixx mesure 5,5 colonnes sur 12 la ou le modele en prend 7.
   Il a vu l ETAT VIDE : un mur blanc de 800 x 750 px portant une lettre
   perdue. La coquille n embarque aucune photo — c est la regle — donc l
   etat vide n est pas un accident de fixture, c est l etat NORMAL d une
   coquille au repos. Il devait etre dessine, il ne l avait jamais ete.

   Ce fichier le dessine, UNE fois, pour toutes les coquilles. Il ne touche
   ni `display`, ni `position`, ni `overflow`, ni aucune boite : la
   geometrie de chaque modele est deja jugee par F1/F2 et par R2/R3, on n y
   revient pas. Il ne pose que de la peinture et de l encre.

   Le crochet est volontairement AGRAMMATICAL : `[data-slot]` sans image
   dedans. Les sept coquilles nomment leur cadre `kr-vue--nue`, `pf-ph--nu`,
   `ig--nu`, ou ne le nomment pas du tout — s appuyer sur ces noms, c est
   ecrire sept correctifs a la main, puis trente-sept. `data-slot` est pose
   par R1 sur TOUS les cadres de TOUTES les coquilles : c est le seul point
   d appui qui passe a l echelle.

   Les quatre couleurs sont des variables : la fabrique les change comme elle
   change une palette.

   LA TEINTE SE DECIDE PAR CADRE, PAS PAR COQUILLE. C est la faute qu Angelo
   a vue le 22 aout 2026 sur plumfixx : la coquille avait ete teintee SOMBRE
   en bloc, parce que son hero ecrit en blanc — sauf que ce blanc repose sur
   l aplat bleu de la SECTION, pas sur le cadre. Le placeholder lateral, qui
   ne porte aucune encre, devenait une dalle noire de 800 x 750 px au milieu
   d une page claire. Un placeholder qui ne porte rien n a aucune raison
   d etre sombre.

   Le defaut est donc CLAIR : un emplacement en attente se lit comme une
   carte grise, c est la convention de tout le metier, et c est la version
   qu Angelo avait validee. Seuls les cadres PORTEURS — ceux sur lesquels de
   l encre repose vraiment, hero pleine fenetre sous son voile — prennent la
   teinte que leur encre exige. Ces cadres-la sont trouves par la MESURE, pas
   a la main : `_lib/teinter-cadres.mjs` ouvre les pages rendues, regarde
   quelle encre tombe dans quel cadre, et ecrit la liste en queue du
   `style.css` de la coquille. R4b verifie ensuite le resultat sur les pixels.
   ============================================================ */

:root {
  --cadre-vide-fond: #e6e9ec;
  --cadre-vide-trame: rgba(0, 0, 0, .045);
  --cadre-vide-encre: rgba(17, 22, 28, .68);
  --cadre-vide-filet: rgba(0, 0, 0, .10);
}

[data-slot]:not(:has(img)):not(:has(video)) {
  background-color: var(--cadre-vide-fond);
  /* Une trame diagonale : sans elle un aplat sombre se lit comme une panne
     d affichage. Avec elle, il se lit comme un emplacement en attente. */
  background-image: repeating-linear-gradient(135deg,
    transparent 0 13px, var(--cadre-vide-trame) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--cadre-vide-filet);
  color: var(--cadre-vide-encre);
  /* SEULE propriete de boite de cette feuille, et elle ne vit que sur l etat
     VIDE : elle disparait des que la fabrique injecte une photo. Elle sert a
     une chose — permettre a la legende de savoir si son cadre est assez large
     pour la porter (voir le @container plus bas). Sans elle, la meme legende
     s ecrit dans une pastille de zone de 28 px et dans un hero de 800 px. */
  container-type: inline-size;
}

/* L intitule. Les gabarits y mettent tantot l alt complet, tantot la seule
   initiale du sujet — et cette initiale, dans un cadre de hero, sort a
   78 px : une lettre geante a la derive, c est ce qui faisait « casse ».
   On la ramene a la taille d une legende, quelle que soit la taille du
   cadre : une legende ne grandit pas avec son cadre.

   Et par defaut elle se TAIT. Un cadre ne porte une legende que s il est
   assez large pour l ecrire sur une ligne lisible : une pastille de zone de
   28 px, un cadre de maillage de 84 px, ne portent pas de phrase — ils
   tiennent leur aplat. Ecrite quand meme, la legende s y empile en colonne
   d une lettre : c est exactement ce que T5 appelle un serrage, et la pose
   du cadre vide en avait fabrique 306 sur heatfix2, 256 sur roofivo, 220 sur
   electria. Le libelle n est pas perdu pour autant : les gabarits le portent
   deja en `aria-label`, il reste lu par les lecteurs d ecran et par le gate.

   Le seuil est en unites de conteneur, pas de fenetre : c est la largeur du
   CADRE qui decide, pas celle de l ecran. Un hero garde sa legende a 390 px
   de fenetre ; une pastille ne l a jamais, meme a 1440. */
[data-slot]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cadre-vide-encre);
  -webkit-text-fill-color: var(--cadre-vide-encre);
  opacity: 1;
  max-width: 34ch;
  text-align: center;
  text-shadow: none;
}

/* 260 px : en dessous, une legende de 34ch a 11 px ne tient pas deux mots par
   ligne — le seuil est celui de T5, pas un gout. Au-dessus, elle s ecrit. */
@container (min-width: 260px) {
  [data-slot]:not(:has(img)):not(:has(video)) > * {
    font-size: clamp(11px, .95vw, 14px) !important;
  }
}
/* <<< NORME COQUILLE — cadre vide */

/* >>> NORME COQUILLE — teinte des cadres porteurs (pose par _lib/teinter-cadres.mjs) */
/* Cadres PORTEURS : de l encre claire repose reellement dessus (mesure du
   2026-09-15 sur 12 page(s), 1440 et 390 px). Leur etat vide prend
   le sol de leur section, assombri d un cran, pour que cette encre reste
   lisible sans plaquer une dalle etrangere a la palette ; tous les autres
   cadres gardent le clair par defaut. Ne pas editer a la main : remesurer.

   Un cadre porteur SE TAIT. Sa legende est centree ; de l encre repose
   deja dessus, par definition — l ecrire, c est la poser en travers du
   titre. C est la collision qu on voyait sur le hero pleine fenetre de
   template-14 : « EMPLACEMENT VISUEL — ... » ecrit sur le paragraphe.
   Le libelle reste porte en aria-label, il n est pas perdu.

   Et il se tait EN ENTIER : une legende dessinee en pastille (fond, padding,
   ombre) laissait, a font-size 0, une plaquette claire vide sur le cadre
   sombre, lue 2,07 puis 4,40 par le gate voile (template-1, 14 et 15 sept).
   Seuls les enfants qui portent du texte perdent leur habillage : la trame
   et les decors vides du cadre restent. */
[data-slot="ff-hero__fd"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #11273a;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="ff-hero__fd"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="ff-hero__fd"]:not(:has(img)):not(:has(video)) > *:not(:empty) {
  background: transparent !important;
  padding: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-slot="ff-sb__ph"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #11273a;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="ff-sb__ph"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="ff-sb__ph"]:not(:has(img)):not(:has(video)) > *:not(:empty) {
  background: transparent !important;
  padding: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-slot="ff-sv__ph"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #11273a;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="ff-sv__ph"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="ff-sv__ph"]:not(:has(img)):not(:has(video)) > *:not(:empty) {
  background: transparent !important;
  padding: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */