/* ==========================================================================
   Sorein : feuille de style commune du site vitrine
   Charte (CLAUDE.md §4) et composants (§5), d'après la planche
   reference/signature-cran/Main.dc.html.
   Règle : aucun style écrit dans les balises (style="…"). Tout passe par ici.
   ========================================================================== */


/* 1. Variables de la charte
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --marine: #13144B;          /* titres, en-tête, pied de page, parties sombres */
  --indigo: #3B2C9E;          /* boutons principaux, liens */
  --indigo-clair: #5A4CC4;    /* pictogrammes */
  --indigo-pastel: #8C82DE;   /* pictogrammes, chevrons discrets */
  --cyan: #2BC6DE;            /* accent, soulignement des liens d'action */
  --cyan-clair: #CDF2F9;      /* survol des boutons blancs et tuiles outils */
  --vert: #1F9D6B;            /* uniquement écoresponsable et « ● En stock » */
  --blanc: #FFFFFF;           /* fond de page */
  --fond-bloc: #F5F6FA;       /* fond des blocs de contenu */
  --survol: #ECEAF8;          /* survol des tuiles */
  --survol-secondaire: #EEECF9; /* survol du bouton secondaire */
  --filet: #E3E5EE;           /* filet des tuiles de logos */
  --texte: #3A3D5C;           /* texte courant */
  --texte-discret: #5F6380;   /* texte discret */
  --texte-sur-sombre: #CFD1E6; /* texte courant sur fond marine */

  /* Polices */
  --police-titre: "Sora", "Figtree", system-ui, sans-serif;
  --police-texte: "Figtree", system-ui, sans-serif;
  --police-code: "IBM Plex Mono", ui-monospace, monospace;

  /* Le cran Sorein et le rayon unique */
  --rayon: 4px;
  --cran-btn: 12px;
  --cran-btn-petit: 9px;
  --cran-bloc: 20px;
  --cran-large: 28px;

  /* Mise en page */
  --hauteur-bandeau: clamp(300px, 34vw, 560px);
  --largeur-max: 1360px;              /* conteneur des maquettes */
  --gouttiere: clamp(16px, 3vw, 40px);
}


/* 2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: 400 16px/1.55 var(--police-texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--marine);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1 { font-size: 44px; line-height: 1.1; }
h2 { font-size: 28px; }
h3 { font-size: 20px; line-height: 1.3; }

p { margin: 0; }

a { color: var(--indigo); }
a:hover { color: var(--marine); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

code, .ref {
  font-family: var(--police-code);
  font-weight: 500;
}

/* Contour de focus visible partout */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}


/* 3. Le cran Sorein
   -------------------------------------------------------------------------- */
.cran       { clip-path: polygon(0 0, calc(100% - var(--cran-bloc)) 0, 100% var(--cran-bloc), 100% 100%, 0 100%); }
.cran-btn   { clip-path: polygon(0 0, calc(100% - var(--cran-btn)) 0, 100% var(--cran-btn), 100% 100%, 0 100%); }
.cran-large { clip-path: polygon(0 0, calc(100% - var(--cran-large)) 0, 100% var(--cran-large), 100% 100%, 0 100%); }

/* Le cran coupe le contour de focus : le ramener à l'intérieur */
[class*="cran"]:focus-visible,
.btn-principal:focus-visible,
.btn-blanc:focus-visible,
.btn-icone:focus-visible,
.tuile-famille:focus-visible,
.tuile-outil:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: -4px;
}


/* 4. Mise en page
   -------------------------------------------------------------------------- */
.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.section { padding: 64px 0; }
.section-grise { background: var(--fond-bloc); }
.section-sombre { background: var(--marine); color: var(--texte-sur-sombre); }
.section-sombre h1,
.section-sombre h2,
.section-sombre h3 { color: var(--blanc); }

.empile { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.grille-2       { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.grille-familles{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grille-marques { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.grille-produits{ display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grille-outils  { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.texte-discret { color: var(--texte-discret); }


/* 5. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px 0 20px;
  border: 0;
  border-radius: var(--rayon);
  font: 600 15px/1 var(--police-texte);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* Tailles */
.btn-grand { height: 52px; padding: 0 26px 0 24px; font-size: 16px; }
.btn-petit { height: 36px; padding: 0 14px; font-size: 14px; gap: 8px; }
.btn-large { width: 100%; }

/* Principal : indigo plein, cran, survol marine */
.btn-principal {
  background: var(--indigo);
  color: var(--blanc);
  clip-path: polygon(0 0, calc(100% - var(--cran-btn)) 0, 100% var(--cran-btn), 100% 100%, 0 100%);
}
.btn-principal:hover { background: var(--marine); color: var(--blanc); }

/* Principal sur fond sombre : blanc, cran, survol cyan clair */
.btn-blanc {
  background: var(--blanc);
  color: var(--marine);
  clip-path: polygon(0 0, calc(100% - var(--cran-btn)) 0, 100% var(--cran-btn), 100% 100%, 0 100%);
}
.btn-blanc:hover { background: var(--cyan-clair); color: var(--marine); }

/* Petits boutons : cran 9 px */
.btn-principal.btn-petit,
.btn-blanc.btn-petit {
  clip-path: polygon(0 0, calc(100% - var(--cran-btn-petit)) 0, 100% var(--cran-btn-petit), 100% 100%, 0 100%);
}

/* Secondaire : contour indigo 1,5 px, sans cran */
.btn-secondaire {
  background: transparent;
  color: var(--indigo);
  box-shadow: inset 0 0 0 1.5px var(--indigo);
}
.btn-secondaire:hover { background: var(--survol-secondaire); color: var(--indigo); }

/* Secondaire sur fond sombre : contour blanc */
.btn-secondaire-sombre {
  background: transparent;
  color: var(--blanc);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75);
}
.btn-secondaire-sombre:hover { background: rgba(255, 255, 255, .1); color: var(--blanc); }

/* Bouton icône (44 px) */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--indigo);
  color: var(--blanc);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cran-btn-petit)) 0, 100% var(--cran-btn-petit), 100% 100%, 0 100%);
  transition: background-color .15s;
}
.btn-icone:hover { background: var(--marine); }
.btn-icone svg { width: 20px; height: 20px; }

/* Lien d'action (remplace « En savoir plus ») */
.lien-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 2px solid var(--cyan);
  color: var(--indigo);
  font: 600 15px/1 var(--police-texte);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.lien-action:hover { color: var(--marine); border-color: var(--indigo); }
.lien-action svg { width: 16px; height: 16px; flex: none; }

/* Lien d'action sur fond sombre */
.lien-action-sombre { color: var(--blanc); border-color: var(--cyan); }
.lien-action-sombre:hover { color: var(--cyan-clair); border-color: var(--blanc); }


/* 6. Blocs et cartes
   -------------------------------------------------------------------------- */

/* Bloc de contenu : fond plein, sans contour ni ombre */
.bloc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 28px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
/* Sur une section déjà grise, la carte passe en blanc */
.section-grise .bloc { background: var(--blanc); }
.bloc .picto { width: 48px; height: 48px; }

/* Carte cliquable (famille, service…) : cran 20 px */
.bloc.cran { text-decoration: none; color: var(--texte); }
a.bloc { transition: background-color .15s; }
a.bloc:hover { background: var(--survol); color: var(--texte); }

/* Bandeau sombre (bloc d'appel) : marine, cran 28 px */
.bandeau-sombre {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 40px;
  background: var(--marine);
  border-radius: var(--rayon);
  color: var(--texte-sur-sombre);
  clip-path: polygon(0 0, calc(100% - var(--cran-large)) 0, 100% var(--cran-large), 100% 100%, 0 100%);
}
.bandeau-sombre h2,
.bandeau-sombre h3 { color: var(--blanc); }
.bandeau-sombre .ligne { margin-top: 8px; }

/* Tuile famille : 72 px, picto 40 px, chevron indigo, cran au survol */
.tuile-famille {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  color: var(--marine);
  font: 600 15px/1.3 var(--police-texte);
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
  transition: background-color .15s, clip-path .2s;
}
.tuile-famille:hover {
  background: var(--survol);
  color: var(--marine);
  clip-path: polygon(0 0, calc(100% - var(--cran-bloc)) 0, 100% var(--cran-bloc), 100% 100%, 0 100%);
}
.tuile-famille .picto { width: 40px; height: 40px; flex: none; }
.tuile-famille .chevron { margin-left: auto; width: 18px; height: 18px; flex: none; color: var(--indigo); }
.section-grise .tuile-famille { background: var(--blanc); }
.section-grise .tuile-famille:hover { background: var(--survol); }

/* Tuile de logo de marque : fond blanc + filet 1 px, sans cran, 84 px.
   Aucun nom écrit sous le logo : le nom est dans l'attribut alt. */
.tuile-marque {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 14px 18px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--texte-discret);
  font: 700 16px/1 var(--police-texte);
  text-decoration: none;
  transition: border-color .15s;
}
.tuile-marque:hover { border-color: var(--indigo); color: var(--marine); }
.tuile-marque img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
/* Marque sans logo : le nom est centré dans la tuile, jamais sous le logo. */
.tuile-marque-nom {
  display: block;
  width: 100%;
  text-align: center;
  font: 600 14px/1.3 var(--police-texte);
  color: var(--texte-discret);
}

/* Carte produit : sans cadre, la zone photo porte le cran */
.carte-produit { display: flex; flex-direction: column; gap: 12px; }
.carte-produit .photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  padding: 20px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  clip-path: polygon(0 0, calc(100% - var(--cran-bloc)) 0, 100% var(--cran-bloc), 100% 100%, 0 100%);
}
.carte-produit .photo img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.carte-produit .marque { font: 600 13px/1 var(--police-texte); color: var(--texte-discret); }
.carte-produit h3 { font-size: 17px; line-height: 1.35; }
.carte-produit .ref { font-size: 13px; color: var(--texte-discret); }

/* Information utile : texte vert précédé d'un point, sans fond */
.info-stock { color: var(--vert); font-size: 14px; font-weight: 600; }
.info-stock::before { content: "● "; }

/* Produit du mois : seul le début du titre en indigo */
.produit-du-mois-titre .debut { color: var(--indigo); }

/* Tuile outil : blanche sur bandeau marine, survol cyan clair */
.tuile-outil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  padding: 24px;
  background: var(--blanc);
  border-radius: var(--rayon);
  color: var(--texte);
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--cran-bloc)) 0, 100% var(--cran-bloc), 100% 100%, 0 100%);
  transition: background-color .15s;
}
.tuile-outil:hover { background: var(--cyan-clair); color: var(--texte); }
.tuile-outil .titre { font: 600 17px/1.3 var(--police-titre); color: var(--marine); }
.tuile-outil .description { font-size: 14px; line-height: 1.5; }
.tuile-outil .ouvrir {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--indigo);
  font: 600 15px/1 var(--police-texte);
}
.tuile-outil .ouvrir svg { width: 16px; height: 16px; }

.bandeau-outils { padding: 24px; background: var(--marine); border-radius: var(--rayon); }

/* Menu « Catégories » (principe Rexel) : lignes 48 px */
.menu-categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 340px;
  max-width: 100%;
  padding: 12px;
  background: var(--blanc);
}
.menu-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--rayon);
  color: var(--marine);
  font: 500 15px/1.2 var(--police-texte);
  text-decoration: none;
}
.menu-ligne:hover { background: var(--fond-bloc); color: var(--indigo); }
.menu-ligne .picto { width: 28px; height: 28px; flex: none; }
.menu-ligne .chevron { margin-left: auto; width: 16px; height: 16px; color: var(--indigo-pastel); }
.menu-ligne[aria-current="true"] { background: var(--fond-bloc); color: var(--indigo); font-weight: 600; }
.menu-ligne[aria-current="true"] .chevron { color: var(--indigo); }

/* Emplacement sans photo validée : case grisée hachurée + commentaire */
.photo-a-venir {
  display: flex;
  align-items: flex-end;
  min-height: 240px;
  padding: 20px;
  border-radius: var(--rayon);
  background: repeating-linear-gradient(-45deg, var(--fond-bloc) 0 12px, var(--filet) 12px 14px);
  color: var(--texte-discret);
  font: 500 13px/1.5 var(--police-code);
}


/* 7. Écrans étroits (téléphone, 390 px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .section { padding: 44px 0; }
  .bloc { padding: 22px; }
  .bandeau-sombre { padding: 28px 22px; }
  .btn { white-space: normal; text-align: center; }
}


/* 8. En-tête commun
   -------------------------------------------------------------------------- */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 20px;
  background: var(--indigo);
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus { left: 0; color: var(--blanc); }

.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.conteneur-large {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* Pleine largeur : barre supérieure, en-tête, panneaux déroulants du menu,
   bande de réassurance et pied de page. Fond ET contenu vont jusqu'aux bords,
   seul le padding latéral les en éloigne. Aucune bande blanche sur les côtés.
   Le contenu des pages, lui, reste dans le conteneur centré de 1360 px.
   RÈGLE IMPÉRATIVE, redemandée par le propriétaire du projet le 10 octobre
   2026 : la maquette du nouveau pied de page centrait son contenu dans
   1360 px, c'est la pleine largeur qui a été retenue. Ne pas y revenir. */
.entete .conteneur-large,
.reassurance-contenu,
.pied .conteneur-large {
  max-width: none;
}

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
  color: var(--marine);
}

/* Barre supérieure */
.entete-barre {
  background: var(--fond-bloc);
  border-bottom: 1px solid var(--filet);
}
.entete-barre-contenu {
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 24px;
  font-size: 13.5px;
  color: var(--texte);
}
.entete-barre-contenu strong { color: var(--marine); font-weight: 600; }
.entete-barre-contenu a { color: var(--marine); text-decoration: none; }
.entete-barre-contenu a:hover { color: var(--indigo); text-decoration: underline; }

/* Offre de bienvenue, à gauche. Texte courant, pas de flex : sinon l'exposant
   « 1re » devient un élément à part et se détache du chiffre. */
.entete-offre { line-height: 1.4; }
.entete-offre-code {
  font: 600 13.5px/1 var(--police-code);
  color: var(--indigo);
  letter-spacing: .02em;
}
/* lien d'action compact, à la hauteur de la barre */
.entete-offre-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  vertical-align: -3px;
  padding: 2px 0;
  border-bottom: 2px solid var(--cyan);
  color: var(--indigo);
  font-weight: 600;
  transition: color .15s, border-color .15s;
}
.entete-barre-contenu .entete-offre-lien { color: var(--indigo); text-decoration: none; }
.entete-barre-contenu .entete-offre-lien:hover { color: var(--marine); border-color: var(--indigo); text-decoration: none; }
.entete-offre-lien svg { width: 14px; height: 14px; flex: none; }

/* Coordonnées, à droite */
.entete-coordonnees { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.entete-coordonnees > span + span::before { content: "·"; margin: 0 10px; color: #9A9CB8; }

/* Ligne principale */
.entete-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 12px;
}

/* Sans la barre de recherche, la rangée se tasse à gauche et laisse un grand
   vide à droite : c'est la recherche, en flex: 1, qui poussait « Nos agences »
   et les boutons de compte vers le bord. Quand elle n'est pas affichée (voir
   « webshopRecherche » dans site.json), « Nos agences » reprend ce rôle.
   La règle ne s'applique que lorsque la barre est absente : dès qu'elle
   revient, la rangée retrouve exactement sa disposition d'origine. */
.entete-principal:not(:has(.entete-recherche)) .entete-agence { margin-left: auto; }

.entete-logo { display: flex; align-items: center; margin-right: 4px; text-decoration: none; }
.entete-logo img { height: 38px; width: auto; }

.pied-logo { height: 36px; width: auto; }

.entete-produits {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--indigo);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--marine);
  font: 600 15px/1 var(--police-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s;
}
.entete-produits:hover { background: var(--survol-secondaire); color: var(--marine); }
.entete-produits svg { width: 16px; height: 16px; flex: none; }

.entete-recherche {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 4px 0 22px;
  background: #F1F2F6;
  border-radius: var(--rayon);
}
.entete-recherche input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  font: 400 15px var(--police-texte);
  color: var(--marine);
}
.entete-recherche-bouton {
  flex: none;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--marine);
  cursor: pointer;
}
.entete-recherche-bouton:hover { color: var(--indigo); }
.entete-recherche-bouton svg { width: 20px; height: 20px; }

.entete-agence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 6px;
  color: var(--marine);
  font: 600 15px/1 var(--police-texte);
  text-decoration: none;
  white-space: nowrap;
}
.entete-agence:hover { color: var(--indigo); }
.entete-agence svg { width: 18px; height: 18px; flex: none; }

.entete-compte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Menu principal */
.entete-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 32px;
}
.entete-nav-bouton,
.entete-nav-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 3px 0 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--marine);
  font: 600 15px/1 var(--police-titre);
  text-decoration: none;
  cursor: pointer;
}
.entete-nav-bouton:hover,
.entete-nav-lien:hover { color: var(--indigo); }
.entete-nav-bouton svg { width: 16px; height: 16px; transition: transform .15s; }
.entete-nav-bouton[aria-expanded="true"] { border-bottom-color: var(--indigo); color: var(--indigo); }
.entete-nav-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.entete-nav-lien.actif { border-bottom-color: var(--indigo); color: var(--indigo); }

/* Panneaux déroulants */
.entete-panneau {
  background: var(--fond-bloc);
  border-top: 1px solid var(--filet);
  padding: 20px 0 24px;
}
.entete-panneau-cadre {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px;
  background: var(--blanc);
  border-radius: var(--rayon);
}
.entete-panneau-appel {
  flex: 1 1 260px;
  max-width: 340px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--rayon);
  color: var(--blanc);
}
.entete-panneau-appel--marine { background: var(--marine); }
.entete-panneau-appel--indigo { background: var(--indigo); }
.entete-panneau-appel .titre { font: 600 25px/1.2 var(--police-titre); }
.entete-panneau-appel .texte { flex: 1; font-size: 15px; line-height: 1.5; color: #DCDDF0; }
.entete-panneau-appel .btn { align-self: flex-start; }

.entete-panneau-liens {
  flex: 999 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 4px 20px;
  align-content: start;
}
.entete-panneau-liens a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: var(--rayon);
  color: var(--marine);
  text-decoration: none;
  transition: background-color .15s;
}
.entete-panneau-liens a:hover { background: var(--survol); color: var(--marine); }
.entete-panneau-liens img { flex: none; width: 48px; height: 48px; }
.entete-panneau-liens span { display: flex; flex-direction: column; gap: 2px; }
.entete-panneau-liens .titre { font-weight: 600; font-size: 16px; }
.entete-panneau-liens .desc { font-size: 14px; line-height: 1.45; color: var(--texte); }


/* 9. Bandeau de réassurance et pied de page
   --------------------------------------------------------------------------
   LA GRILLE EST LE POINT IMPORTANT. Les quatre rangées du pied de page
   partagent la MÊME grille de 12 colonnes et le même espacement de 32 px :
   c'est elle, et rien d'autre, qui met le formulaire à l'aplomb de
   « Catalogue » et les réseaux à l'aplomb de « Nos marchés ». Remplacer une
   rangée par un flex casserait cet alignement d'une rangée à l'autre. */
.pied-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
}
.pied-s4 { grid-column: span 4; }
.pied-s2 { grid-column: span 2; }

/* Bandeau blanc des engagements. Pas de filet vertical entre les trois :
   la grille suffit à les séparer. */
.reassurance {
  margin-top: 64px;
  background: var(--blanc);
  border-top: 1px solid var(--filet);
}
.reassurance-contenu { padding-top: 28px; padding-bottom: 28px; }
.reassurance-item { display: flex; align-items: flex-start; gap: 16px; }
.reassurance-item img { flex: none; width: 44px; height: 44px; }
.reassurance-item strong {
  display: block;
  margin: 2px 0 4px;
  font: 600 16px/1.3 var(--police-texte);
  color: var(--marine);
}
.reassurance-item span { display: block; font-size: 15px; line-height: 1.5; color: var(--texte-discret); }

/* Bloc marine. Le cran de 28 px vient de .cran-large ; sous 600 px il passe à
   20 px en redéfinissant la variable pour ce bloc seulement (voir § 10). */
.pied { background: var(--marine); color: #C9CBE3; }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: var(--blanc); }
/* Les deux boutons gardent leurs couleurs propres : la règle de zone ci-dessus
   les écraserait, défaut déjà survenu deux fois (CLAUDE.md § 3 bis). */
.pied a.btn-blanc { color: var(--marine); }
.pied a.btn-blanc:hover { background: var(--cyan-clair); color: var(--marine); }
.pied a.btn-secondaire-sombre { color: var(--blanc); }
.pied a.btn-secondaire-sombre:hover { background: rgba(255, 255, 255, .1); color: var(--blanc); }

/* Les filets s'arrêtent aux mêmes marges que le contenu, jamais bord à bord.
   Le padding latéral étant porté par le conteneur, un simple border-bottom
   irait d'un bord à l'autre de l'écran : d'où ce trait posé en absolu. */
.pied-lettre,
.pied-base > .conteneur-large { position: relative; }
.pied-lettre::after,
.pied-base > .conteneur-large::before {
  content: "";
  position: absolute;
  left: var(--gouttiere);
  right: var(--gouttiere);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* a. Lettre d'information et réseaux sociaux */
.pied-lettre {
  align-items: start;
  padding-top: 56px;
  /* 49 et non 48 : dans la maquette le filet est un border-bottom, qui occupe
     1 px de hauteur. Ici il est pose en absolu pour s'arreter aux marges du
     contenu, et ne prend aucune place : ce pixel-la le remplace, sans quoi
     tout ce qui suit remonterait de 1 px par rapport a la maquette. */
  padding-bottom: 49px;
}
.pied-lettre::after { bottom: 0; }
.pied-lettre-titre { margin: 0 0 10px; font: 600 24px/1.25 var(--police-titre); color: var(--blanc); }
.pied-lettre-texte { margin: 0; max-width: 380px; font-size: 16px; line-height: 1.55; color: #C9CBE3; }
.pied-lettre-label {
  display: block;
  margin: 0 0 10px;
  font: 600 15px/1.3 var(--police-texte);
  color: var(--blanc);
}
.pied-champ { display: flex; height: 52px; }
.pied-champ input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  border-radius: var(--rayon) 0 0 var(--rayon);
  padding: 0 16px;
  font: 400 16px var(--police-texte);
  color: var(--marine);
  background: var(--blanc);
}
.pied-champ input::placeholder { color: var(--texte-discret); }
.pied-champ button {
  flex: none;
  height: 52px;
  border: 0;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 0 22px;
  font: 600 15px var(--police-texte);
  color: var(--marine);
  background: var(--cyan);
  cursor: pointer;
}
.pied-champ button:hover { background: var(--cyan-clair); }
/* Le message n'apparaît qu'après un clic avec une adresse valide : vide, il ne
   doit prendre aucune place. */
.pied-lettre-message {
  margin: 10px 0 0;
  font: 600 14px/1.45 var(--police-texte);
  color: var(--blanc);
}
.pied-lettre-message:empty { display: none; }
.pied-rgpd { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #B9BCD6; }
.pied-rgpd a { color: var(--blanc); border-bottom: 1px solid var(--cyan); }

.pied-reseaux { display: flex; gap: 10px; }
.pied-reseaux a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  color: var(--blanc);
}
.pied-reseaux a:hover { box-shadow: inset 0 0 0 1.5px var(--cyan); color: var(--cyan); }
.pied-reseaux svg { width: 22px; height: 22px; }

/* c. Rangée principale */
.pied-principal { align-items: start; padding-top: 52px; padding-bottom: 52px; }
.pied-logo { height: 38px; width: auto; display: block; margin-bottom: 18px; }
.pied-public { margin: 0 0 28px; font-size: 16px; line-height: 1.55; color: #C9CBE3; }
/* « Conseil et devis » est en Figtree : la police à chasse fixe est réservée
   aux références et aux codes (charte § 4). */
/* line-height: normal, et non celle du corps de page : sur un libelle d'une
   seule ligne, la hauteur de ligne du site ajoutait 4 px sous le mot. */
.pied-contact-intitule { display: block; margin-bottom: 4px; font-size: 14px; line-height: normal; color: #B9BCD6; }
.pied-telephone { display: block; margin-bottom: 6px; font: 600 24px/1.2 var(--police-titre); color: var(--blanc); }
.pied-contact-suite { margin: 0; font-size: 15px; line-height: 1.6; color: #C9CBE3; }
.pied-contact-suite a { color: var(--blanc); }
.pied-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.pied-titre { margin: 4px 0 18px; font: 600 15px/1.3 var(--police-titre); color: var(--blanc); }
/* La hauteur de ligne est posee sur la liste, pas sur le lien : un lien est en
   ligne, c'est la puce qui commande la hauteur de sa ligne. Posee sur le seul
   lien, celle du corps de page reprenait le dessus et chaque rubrique gagnait
   4 px par entree. */
.pied-colonne ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 15px;
  line-height: 1.35;
}
.pied-colonne a { color: #C9CBE3; }
.pied-colonne a:hover { color: var(--cyan); }

/* d. et e. Les deux barres du bas */
.pied-base > .conteneur-large {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 32px;
  padding-top: 20px;
  padding-bottom: 22px;
  font-size: 14px;
  /* comme dans la maquette : la hauteur de ligne du corps de page ajoutait
     5 px a chacune des deux barres du bas */
  line-height: normal;
  color: #B9BCD6;
}
.pied-base > .conteneur-large::before { top: 0; }
.pied-base a:hover { color: var(--blanc); }
.pied-agences-ligne strong { color: var(--blanc); font-weight: 600; margin-right: 10px; }
.pied-agences-lien { color: var(--blanc); border-bottom: 1px solid var(--cyan); margin-left: 12px; }
.pied-bas-mentions { display: flex; flex-wrap: wrap; gap: 6px 28px; }
/* La signature de l'agence doit se voir comme un lien, pas comme du texte. */
.pied-agence-web { color: var(--blanc); border-bottom: 1px solid var(--cyan); }
.pied-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; }


/* 10. En-tête et pied de page sur écran étroit
   -------------------------------------------------------------------------- */
/* Écran étroit : la barre ne garde que le numéro, centré (§9). */
@media (max-width: 767px) {
  .entete-offre,
  .entete-mail,
  .entete-horaires { display: none; }
  .entete-barre-contenu { justify-content: center; }
  .entete-coordonnees { justify-content: center; }
}

@media (max-width: 760px) {
  .entete-principal { gap: 10px; }
  .entete-recherche { order: 5; flex: 1 1 100%; }
  .entete-compte { order: 6; flex: 1 1 100%; }
  .entete-compte .btn { flex: 1; }
  .entete-nav { gap: 0 20px; }
  .entete-panneau-appel { max-width: none; min-height: 0; }
}


/* 11. Hauteur propre a chaque logo de marque (reprise des maquettes validees)
   -------------------------------------------------------------------------- */
.tuile-marque img.logo-lenovo { max-height: 40px; }
.tuile-marque img.logo-hpe { max-height: 44px; }
.tuile-marque img.logo-dell { max-height: 36px; }
.tuile-marque img.logo-supermicro { max-height: 50px; }
.tuile-marque img.logo-hp { max-height: 50px; }
.tuile-marque img.logo-microsoft { max-height: 36px; }
.tuile-marque img.logo-juniper { max-height: 40px; }
.tuile-marque img.logo-alcatel-lucent { max-height: 36px; }
.tuile-marque img.logo-huawei { max-height: 60px; }
.tuile-marque img.logo-ruckus { max-height: 56px; }
.tuile-marque img.logo-allied-telesis { max-height: 44px; }
.tuile-marque img.logo-zyxel { max-height: 40px; }
.tuile-marque img.logo-ubiquiti { max-height: 52px; }
.tuile-marque img.logo-mikrotik { max-height: 36px; }
.tuile-marque img.logo-tp-link { max-height: 40px; }
.tuile-marque img.logo-planet { max-height: 34px; }
.tuile-marque img.logo-raisecom { max-height: 26px; }
.tuile-marque img.logo-qnap { max-height: 26px; }
.tuile-marque img.logo-synology { max-height: 30px; }
.tuile-marque img.logo-proxmox { max-height: 30px; }
.tuile-marque img.logo-veeam { max-height: 24px; }
.tuile-marque img.logo-netwrix { max-height: 30px; }
.tuile-marque img.logo-semperis { max-height: 52px; }
.tuile-marque img.logo-barracuda { max-height: 32px; }
.tuile-marque img.logo-sophos { max-height: 24px; }
.tuile-marque img.logo-bitdefender { max-height: 40px; }
.tuile-marque img.logo-trend-micro { max-height: 40px; }
.tuile-marque img.logo-harden-ad { max-height: 44px; }
.tuile-marque img.logo-yealink { max-height: 30px; }
.tuile-marque img.logo-fanvil { max-height: 32px; }
.tuile-marque img.logo-yeastar { max-height: 36px; }
.tuile-marque img.logo-poly { max-height: 36px; }
.tuile-marque img.logo-ag-neovo { max-height: 34px; }
.tuile-marque img.logo-mimo { max-height: 36px; }
.tuile-marque img.logo-chief { max-height: 30px; }
.tuile-marque img.logo-socamont { max-height: 56px; }
.tuile-marque img.logo-acome { max-height: 24px; }
.tuile-marque img.logo-draka { max-height: 32px; }
.tuile-marque img.logo-excel { max-height: 40px; }
.tuile-marque img.logo-waytex { max-height: 32px; }
.tuile-marque img.logo-eaton { max-height: 30px; }
.tuile-marque img.logo-brady { max-height: 30px; }
.tuile-marque img.logo-veex { max-height: 46px; }
.tuile-marque img.logo-trend-networks { max-height: 28px; }
.tuile-marque img.logo-dahua { max-height: 34px; }
.tuile-marque img.logo-hikvision { max-height: 24px; }
.tuile-marque img.logo-vigi-tp-link { max-height: 46px; }
.tuile-marque img.logo-ajax { max-height: 46px; }
.tuile-marque img.logo-ezviz { max-height: 36px; }


/* 12. Page d'accueil
   -------------------------------------------------------------------------- */
.bloc-accueil { margin-top: 56px; }

.entete-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 24px;
  margin-bottom: 20px;
}
.entete-section h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.15; }

.fleche { width: 16px; height: 16px; flex: none; }
/* #9A9CB8 ne tenait que 2,49:1 sur le fond gris : couleur de la charte à 5,43:1 */
.chevron-texte { margin-left: auto; color: var(--texte-discret); font-size: 18px; }

/* À la une */
.une { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.une-carte {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  overflow: hidden;
}
.une-carte--large { flex: 2 1 560px; }
.une-photo { width: 100%; height: 280px; object-fit: cover; }
.une-produit {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.une-produit img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.une-texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 22px;
}
.une-texte h1 { font-size: clamp(23px, 2.1vw, 28px); }
.une-texte h2 { font-size: clamp(22px, 1.9vw, 26px); }
.une-texte p { max-width: 620px; font-size: 16px; line-height: 1.5; }
.une-texte .btn { margin-top: auto; align-self: flex-start; height: 44px; }

/* Bandeau services */
.bandeau-services {
  display: flex;
  flex-wrap: wrap;
  margin-top: 32px;
  background: var(--marine);
  border-radius: var(--rayon);
  overflow: hidden;
}
.bandeau-services-photo {
  flex: 1 1 300px;
  min-width: 0;
  width: 300px;
  height: 248px;
  object-fit: cover;
  object-position: 70% center;
}
.bandeau-services-cyan,
.bandeau-services-marine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 32px 36px;
}
.bandeau-services-cyan { flex: 3 1 420px; min-width: 0; background: var(--cyan); }
.bandeau-services-cyan h2 { font-size: clamp(23px, 2.2vw, 30px); color: var(--marine); }
.bandeau-services-cyan p { max-width: 560px; font-size: 17px; line-height: 1.5; color: var(--marine); }
.bandeau-services-marine { flex: 2 1 300px; min-width: 0; background: var(--marine); gap: 10px; }
.bandeau-services-marine .titre { font: 600 clamp(23px, 2.2vw, 30px)/1.3 var(--police-titre); color: var(--blanc); }
.bandeau-services-marine p { font-size: 16px; line-height: 1.5; color: #C9CBE3; }

/* Bouton marine, réservé au bandeau cyan */
.btn-marine {
  background: var(--marine);
  color: var(--blanc);
  height: 44px;
  align-self: flex-start;
  clip-path: polygon(0 0, calc(100% - var(--cran-btn)) 0, 100% var(--cran-btn), 100% 100%, 0 100%);
}
.btn-marine:hover { background: var(--indigo); color: var(--blanc); }

.lien-cyan {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--cyan);
  font: 600 16px/1 var(--police-texte);
  text-decoration: none;
}
.lien-cyan:hover { color: var(--cyan-clair); }

/* Familles de produits */
.grille-univers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 16px;
}
.univers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 10px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
.univers-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--marine);
  text-decoration: none;
}
.univers-titre img { flex: none; width: 48px; height: 48px; }
.univers-titre span { font: 600 18px/1.25 var(--police-titre); }
.univers-titre:hover span { color: var(--indigo); }
.univers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.univers li { border-top: 1px solid #EEF0F5; }
.univers li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--texte);
  font-size: 15.5px;
  text-decoration: none;
}
.univers li a {
  padding: 0 10px;
  margin: 0 -10px;
  border-radius: var(--rayon);
  transition: background-color .15s, color .15s;
}
.univers li a:hover { background: var(--survol); color: var(--indigo); }
.univers li a:hover .chevron-texte { color: var(--indigo); }

/* Rayons les plus demandés */
.grille-rayons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}
.rayon {
  display: flex;
  flex-direction: column;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  overflow: hidden;
  color: var(--marine);
  text-decoration: none;
  transition: background-color .15s;
}
.rayon:hover { background: var(--survol); color: var(--marine); }
.rayon-photo {
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  overflow: hidden;
}
.rayon-photo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.rayon-texte {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}
.rayon-texte .titre { font: 600 18px/1.25 var(--police-titre); }
.rayon-texte .desc { font-size: 14.5px; line-height: 1.45; color: var(--texte); }
.rayon-texte .aller {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--indigo);
  font: 600 15px/1 var(--police-texte);
}

/* Agences */
.bloc-agences {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
.bloc-agences-texte {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.bloc-agences-texte h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.15; }
.bloc-agences-texte p { max-width: 460px; font-size: 17px; line-height: 1.5; }
.bloc-agences-texte .btn { margin-top: 6px; align-self: flex-start; }
.liste-agences {
  flex: 2 1 480px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 10px;
  align-content: center;
}
.liste-agences a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  background: var(--blanc);
  border-radius: var(--rayon);
  color: var(--marine);
  font: 600 16px/1 var(--police-texte);
  text-decoration: none;
  transition: background-color .15s;
}
.liste-agences a:hover { background: var(--survol); color: var(--marine); }
.liste-agences svg { width: 18px; height: 18px; flex: none; color: var(--indigo); }


/* 13. Pages intérieures : fil d'Ariane, en-tête, blocs communs
   -------------------------------------------------------------------------- */
.fil-conteneur { padding-top: 22px; }
.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
  color: var(--texte-discret);
}
.fil a { color: var(--marine); font-weight: 500; text-decoration: none; }
.fil a:hover { color: var(--indigo); }
.fil-retour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: -8px;
}
.fil-retour svg { width: 18px; height: 18px; }
.fil-trait { width: 1px; height: 18px; background: #D9DCE6; }

.entete-page { margin-top: 10px; }
.entete-page h1 { font-size: clamp(28px, 3vw, 40px); }
.chapeau { margin-top: 10px; max-width: 86ch; font-size: 17px; line-height: 1.55; }

.section-page { margin-top: 56px; }
.section-page:last-of-type { margin-bottom: 0; }

/* Liste « par famille » */
.liste-familles {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}
.liste-familles li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--filet);
}
.liste-familles a {
  flex: 0 1 240px;
  font: 600 16px/1.4 var(--police-titre);
  text-decoration: none;
}
.liste-familles span { flex: 1 1 300px; font-size: 15.5px; color: var(--texte); }

/* Bloc texte + photo (moitié / moitié) */
.bloc-photo {
  display: flex;
  flex-wrap: wrap;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  overflow: hidden;
}
.bloc-photo-texte {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 30px 30px;
}
.bloc-photo-texte .picto { width: 48px; height: 48px; }
.bloc-photo-texte h2 { font-size: clamp(22px, 2vw, 26px); }
.bloc-photo-texte p { max-width: 560px; font-size: 16px; line-height: 1.55; }
.bloc-photo-texte .btn { margin-top: 6px; align-self: flex-start; }
.bloc-photo-image { flex: 1 1 420px; min-width: 0; min-height: 360px; position: relative; overflow: hidden; }
.bloc-photo-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* En-tête de page avec boutons à droite */
.entete-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
}
.entete-page-texte { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.entete-page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.univers-voir { align-self: flex-start; margin-top: 4px; margin-bottom: 10px; }
/* Variante blanche : sert a casser une suite de deux blocs gris. */
.bloc-photo--blanc { background: var(--blanc); }
.bloc-photo-image--basse { min-height: 250px; }
.bloc-photo-image--basse img { object-position: center; }


/* 14. Pages services (gabarit commun)
   -------------------------------------------------------------------------- */

/* Bandeau avec encadré blanc posé en bas à gauche */
.hero { position: relative; }
.hero-photo { min-height: var(--hauteur-bandeau); width: 100%; }
/* le commentaire de cadrage reste en haut, l'encadré occupe le bas */
.photo-a-venir.hero-photo { align-items: flex-start; }
.hero img { width: 100%; height: var(--hauteur-bandeau); object-fit: cover; object-position: center top; display: block; }
/* L'encadré est posé DANS la photo, en bas à gauche, avec une marge. */
.hero-conteneur { position: absolute; left: 0; right: 0; bottom: 36px; }
/* Exception page Formation : l'encadré déborde sous la photo (bandeau validé). */
.hero--classique .hero-conteneur { position: relative; bottom: auto; margin-top: -150px; }
.hero-encadre {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 28px 30px 30px;
  background: var(--blanc);
  border-radius: var(--rayon);
}
.hero-encadre h1 { font-size: clamp(26px, 2.8vw, 36px); }
.hero-encadre p { font-size: 17px; line-height: 1.55; }

/* Deux colonnes : texte + photo */
.deux-colonnes { display: flex; flex-wrap: wrap; gap: 32px 40px; }
.deux-colonnes-texte { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.deux-colonnes-texte h3 { font-size: 17px; margin-top: 6px; }
.deux-colonnes-photo { flex: 1 1 320px; min-width: 0; }
.photo-a-venir--haute { min-height: 420px; height: 100%; }

/* Liste à coches */
.liste-coches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-coches li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.coche { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--indigo); }

/* Enjeux et étapes */
.grille-enjeux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin-top: 20px;
}
.colonne-ouverte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--marine);
}
.colonne-ouverte h3 { font-size: 18px; }
.colonne-ouverte p { font-size: 15.5px; line-height: 1.55; }

.grille-etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 20px;
}
.etape {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
.etape-numero { font: 500 12px/1.4 var(--police-code); color: var(--texte-discret); }
.etape strong { font: 600 17px/1.3 var(--police-titre); color: var(--marine); }
.etape span:last-child { font-size: 15px; line-height: 1.5; }

/* Focus éditeur (Harden AD) */
.bloc-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  padding: 28px 30px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
.bloc-focus-logo {
  flex: 0 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 14px 18px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.bloc-focus-logo img { max-width: 100%; max-height: 44px; width: auto; object-fit: contain; }
.bloc-focus-texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bloc-focus-texte h2 { font-size: clamp(20px, 1.9vw, 25px); }
.bloc-focus-texte p { font-size: 16px; line-height: 1.55; }

/* Le saviez-vous ? */
.bloc-savoir {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 30px;
  background: var(--cyan-clair);
  border-radius: var(--rayon);
}
.bloc-savoir p { font-size: 16px; line-height: 1.55; max-width: 900px; }

/* Emplacement photo dans un bloc moitié/moitié */
.bloc-photo-image--vide { position: static; min-height: 0; display: flex; }
.bloc-photo-image--vide .photo-a-venir { flex: 1; min-height: 300px; }

/* Questions fréquentes */
/* Lignes sur fond blanc, separees par un filet : deux blocs gris pleins ne
   se suivent jamais (§5). La FAQ venait systematiquement apres un bloc gris. */
.faq { margin-top: 20px; border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  font: 600 16px/1.4 var(--police-texte);
  color: var(--marine);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--indigo); }
.faq-signe { position: relative; flex: none; width: 16px; height: 16px; }
.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  background: var(--indigo);
  transition: transform .15s;
}
.faq-signe::before { inset: 7px 0; height: 2px; }
.faq-signe::after { inset: 0 7px; width: 2px; }
.faq details[open] .faq-signe::after { transform: scaleY(0); }
.faq details p { padding: 0 4px 20px; font-size: 15.5px; line-height: 1.55; max-width: 900px; }

/* Liste de liens en pastilles rectangulaires */
.liste-liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lien-pastille {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  color: var(--marine);
  font: 600 15px/1.3 var(--police-texte);
  text-decoration: none;
  transition: background-color .15s;
}
.lien-pastille:hover { background: var(--survol); color: var(--indigo); }

/* Jusqu'à 1023 px, l'encadré passe SOUS la photo (§7) : il ne la masque pas.
   Le seuil était à 760 px, mais entre 761 et 1023 px la photo ne fait plus que
   300 à 348 px de haut alors que l'encadré en occupe environ 230 : sur tablette
   portrait, le sujet de la photo disparaissait derrière l'encadré. */
@media (max-width: 1023px) {
  .hero-conteneur,
  .hero--classique .hero-conteneur { position: static; bottom: auto; margin-top: 0; }
  .hero-encadre { max-width: none; margin-top: 16px; }
}

@media (max-width: 760px) {
  .hero-photo, .hero img { min-height: 260px; height: 260px; }
  .hero { --hauteur-bandeau: 260px; }
  .pied-telephone { font-size: 23px; }
}

/* Hub Services : cartes avec photo carrée */
.intro-groupe { margin-top: 10px; margin-bottom: 20px; max-width: 86ch; font-size: 16px; line-height: 1.55; }
/* après un en-tête de section, qui porte déjà sa marge basse */
.entete-section + .intro-groupe { margin-top: -10px; }
.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.carte-service { display: flex; flex-direction: column; gap: 10px; color: var(--marine); text-decoration: none; }
.carte-service-photo { height: 180px; overflow: hidden; border-radius: var(--rayon); background: var(--fond-bloc); }
.carte-service-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Cadrage d'une carte du hub Services, quand le sujet n'est pas au centre de
   la photo de la page visée. La carte fait 1,35 pour 1 ; une bannière très
   large y perd plus de la moitié de sa largeur. L'organigramme en figurines
   d'Identités & Active Directory fait 2,94 pour 1 et son sujet occupe la
   moitié droite : centré, la carte n'aurait montré que du bleu et la moitié
   de l'organigramme. Déclaré par « cadrage » dans servicesHub.json. */
.carte-service-photo--droite img { object-position: right center; }
.carte-service-photo--gauche img { object-position: left center; }
.carte-service-photo .photo-a-venir { height: 100%; min-height: 0; border-radius: 0; }
.carte-service span { font: 600 16px/1.3 var(--police-titre); }
.carte-service:hover span { color: var(--indigo); }

/* 15. Pages marchés
   -------------------------------------------------------------------------- */
.texte-long { margin-top: 32px; max-width: 900px; }
.texte-long h2 { font-size: clamp(24px, 2.4vw, 32px); }
.texte-long h3 { margin-top: 28px; font-size: 19px; }
.texte-long p { margin-top: 12px; font-size: 16px; line-height: 1.6; }
.texte-long .chapeau { margin-top: 10px; font-size: 18px; color: var(--marine); font-weight: 500; }

.carte-service-texte { font: 400 14.5px/1.45 var(--police-texte); color: var(--texte); }
.carte-service-photo--produit { display: flex; align-items: center; justify-content: center; padding: 18px; }
.carte-service-photo--produit img { width: auto; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }

/* Hub Nos marchés */
.carte-marche { display: flex; flex-direction: column; background: var(--fond-bloc); border-radius: var(--rayon); overflow: hidden; }
.carte-marche > img { width: 100%; height: 240px; object-fit: cover; }
.carte-marche-texte { flex: 1; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 24px 26px 26px; }
.carte-marche-texte p { font-size: 16px; line-height: 1.55; }
.carte-marche-texte .btn { margin-top: auto; }

/* Synoptique et repères */
.synoptique { margin-top: 20px; padding: 20px; background: var(--fond-bloc); border-radius: var(--rayon); }
.synoptique { overflow-x: auto; }
.synoptique svg { display: block; width: 100%; min-width: 880px; height: auto; }
/* Légende du synoptique : une seule liste, lue de haut en bas sur trois
   colonnes de 400 px séparées de 40 px (§ 33 pour la répartition).
   Les deux anciens groupes « Le matériel » et « Les services autour du
   chantier » coupaient huit repères en deux colonnes étroites et en laissaient
   un seul dans un grand vide à droite. La couleur du rond porte maintenant
   cette information, et la mini-légende l'explique. */
/* Les repères des synoptiques visent une gamme précise : au saut, la carte
   ne doit pas se coller au bord haut de la fenêtre. */
.gamme { scroll-margin-top: 24px; }

.reperes-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
  margin: 28px 0 14px;
}
.reperes-titre { font: 600 22px/1.3 var(--police-titre); color: var(--marine); }
.reperes-cle { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; color: var(--texte); }
.reperes-cle span { display: inline-flex; align-items: center; gap: 8px; }
.reperes-cle span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.cle-materiel::before { background: var(--marine); }
.cle-service::before { background: var(--cyan); }
.cle-eco::before { background: var(--vert); }

/* Une colonne par défaut ; les trois colonnes sont ajoutées à partir de
   900 px au § 33. Dans l'autre sens, il aurait fallu défaire le placement de
   chaque repère, et une règle de défaite ne pèse pas toujours aussi lourd que
   celle qu'elle vise. */
.reperes-liste { display: grid; }
/* Le fond du survol déborde de 10 px à gauche pour ne pas coller au rond ;
   le filet, lui, reste à l'aplomb de la colonne, d'où le pseudo-élément. */
.repere {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-left: -10px;
  padding: 16px 0 24px 10px;
  color: var(--marine);
  text-decoration: none;
  transition: background-color .15s;
}
.repere::before {
  content: "";
  position: absolute;
  left: 10px; right: 0; top: 0;
  height: 1px;
  background: var(--filet);
}
.repere:hover, .repere:focus-visible, .repere.est-actif { background: var(--fond-bloc); }
.repere-numero {
  flex: none;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marine);
  border-radius: 50%;
  color: var(--blanc);
  font: 700 15px/1 var(--police-texte);
}
/* Un chiffre blanc tombe à 1,9:1 sur le cyan et à 3,4:1 sur le vert : sur ces
   deux fonds clairs il passe en marine (8,3:1 et 5:1). */
.repere-numero--service { background: var(--cyan); color: var(--marine); }
.repere-numero--eco { background: var(--vert); color: var(--marine); }
.repere-texte { display: flex; flex-direction: column; min-width: 0; }
.repere-texte strong { font: 600 16px/1.35 var(--police-titre); color: var(--marine); }
.repere-texte span { font: 400 15px/1.5 var(--police-texte); color: var(--texte); }

/* Dessin : le repère correspondant s'agrandit et prend un contour cyan.
   Le lien dans les deux sens est fait par /js/synoptique.js. */
.repere-svg { transform-box: fill-box; transform-origin: center; transition: transform .15s ease; }
.repere-svg.est-actif { transform: scale(1.22); }
.repere-svg.est-actif circle { stroke: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .repere-svg { transition: none; } }
.texte-pied { margin-top: 40px; }
.texte-pied p { max-width: 900px; font-size: 15.5px; line-height: 1.6; color: var(--texte-discret); }


/* 16. Page Nos agences (page unique : carte, villes, contact)
   -------------------------------------------------------------------------- */
.agences-carte-liste { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: stretch; }
.agences-carte {
  flex: 2 1 460px;
  min-width: 0;
  display: flex;
  padding: 20px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
/* La carte garde sa taille naturelle (600 px) et se centre dans le bloc. */
.agences-carte svg { width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto; }
.agences-carte .photo-a-venir { flex: 1; min-height: 380px; }

.agences-villes {
  flex: 1 1 280px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.agences-villes li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--filet);
}
.agences-villes li:first-child { border-top: 0; padding-top: 0; }
.agences-ville { font: 600 17px/1.3 var(--police-titre); color: var(--marine); }
.agences-region { font: 500 13px/1.4 var(--police-code); color: var(--texte-discret); }

/* Bloc de contact unique */
.bloc-contact-unique { background: var(--fond-bloc); border-radius: var(--rayon); }
.bloc-contact-texte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 32px 34px 34px;
}
.bloc-contact-texte p { max-width: 620px; font-size: 16px; line-height: 1.55; }
.contact-unique-telephone {
  margin-top: 6px;
  font: 600 clamp(26px, 3vw, 34px)/1.15 var(--police-titre);
  color: var(--marine);
  text-decoration: none;
}
a.contact-unique-telephone:hover { color: var(--indigo); }
.contact-unique-email { font: 600 17px/1.4 var(--police-texte); color: var(--indigo); }
.contact-unique-horaires { font: 500 14px/1.5 var(--police-code); color: var(--texte-discret); }
.bloc-contact-texte .btn { margin-top: 12px; }

/* Coordonnées de la page Contact */
.contact-telephone { font: 600 22px/1.2 var(--police-titre); color: var(--marine); text-decoration: none; }
a.contact-telephone:hover { color: var(--indigo); }

/* 17. Page Contact
   -------------------------------------------------------------------------- */
.contact { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-start; }
.contact-formulaire {
  flex: 2 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 28px 28px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
/* Formulaire de contact heberge par Axonaut (12 octobre 2026).
   Le bloc qui l'entoure n'ajoute ni fond ni marge : le formulaire apporte les
   siens, et un bloc gris dans un bloc gris se verrait. */
.contact-formulaire--externe { padding: 0; background: none; }
.contact-iframe {
  display: block;
  width: 100%;
  /* Hauteur de depart. Le formulaire mesure 1 089 px sur ordinateur et
     1 063 px sur telephone ; 1 100 px couvre les deux. Elle sert a deux
     choses : le formulaire reste entier meme si le message de hauteur
     d'Axonaut n'arrive pas (JavaScript coupe, bloqueur), et la page ne saute
     pas au chargement, ce qui rendait les references de test instables.
     /js/contact.js agrandit le cadre si Axonaut annonce davantage. */
  min-height: 1100px;
  border: 0;
  /* rayon 4 px, comme partout : le code fourni par Axonaut proposait 12 px,
     ecarte par la charte (§ 4). */
  border-radius: var(--rayon);
}
/* Rappel affiche quand on arrive d'une fiche formation. */
.contact-rappel {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--fond-bloc);
  border-left: 3px solid var(--cyan);
  border-radius: var(--rayon);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
}
/* Mention d'information sous le formulaire Axonaut. Le formulaire étant
   hébergé ailleurs, on ne peut pas y ajouter de case à cocher : cette phrase
   tient lieu d'information préalable. Posée SOUS le cadre, pour ne pas
   repousser le formulaire de 60 px à l'ouverture de la page. */
.contact-consentement {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texte-discret);
}
.contact-consentement a { color: var(--indigo); font-weight: 600; }

/* Styles de champs conserves : ils ne servent plus a la page Contact, dont le
   formulaire est passe chez Axonaut, mais les autres formulaires de la vitrine
   (« Vous avez un projet ? », demande de devis) restent a brancher (§ 12).
   A supprimer si eux aussi passent par un formulaire heberge.
   Les quatre champs courts : une colonne, puis deux a partir de 900 px.
   En auto-fit, la grille passait parfois a trois colonnes et laissait le
   telephone seul sur une deuxieme ligne. */
.contact-paire { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .contact-paire { grid-template-columns: repeat(2, 1fr); } }
.champ { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.champ label { font: 500 14px/1.4 var(--police-texte); color: var(--marine); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--blanc);
  font: 400 15px/1.4 var(--police-texte);
  color: var(--marine);
}
.champ textarea { resize: vertical; }
.champ-case { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14.5px; line-height: 1.5; }
.champ-case input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--indigo); }
.contact-formulaire .btn { align-self: flex-start; }

.contact-cote { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-bloc { gap: 12px; width: 100%; }
.contact-bloc h2 { font-size: 19px; }
.contact-bloc .liste-services-agence { width: 100%; }
/* Le lien d'agence est une ligne : repere de lieu, ville, chevron pousse a
   droite par margin-left:auto, ce qui suppose un conteneur flex. Ce display
   manquait. Le repere SVG, qui ne declare aucune taille, prenait alors la
   taille par defaut d'un objet remplace : il mesurait 360 px de cote a
   1440 px et 626 px a 768 px, et allongeait la page Contact de 1 780 px sur
   telephone. Defaut present depuis l'ecriture de la page, trouve le
   10 octobre 2026 en refaisant le pied de page. */
.liste-services-agence { list-style: none; margin: 0; padding: 0; }
.liste-services-agence a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.liste-services-agence a:hover { color: var(--marine); }
.liste-services-agence a svg { flex: none; width: 16px; height: 16px; }
/* Un seul reperage a droite : le chevron, pousse par margin-left: auto. */
.liste-services-agence .chevron-texte { margin-left: auto; }
.contact-service { display: flex; flex-direction: column; gap: 3px; }
.contact-service strong { font-weight: 600; font-size: 15.5px; color: var(--marine); }
.contact-service span { font-size: 14.5px; line-height: 1.5; }
/* Figtree, pas la police a chasse fixe : celle-ci est reservee aux references
   et aux codes (charte § 4). */
.contact-coordonnees { font: 400 14.5px/1.5 var(--police-texte); color: var(--texte-discret); }


/* 18. Pages légales
   -------------------------------------------------------------------------- */
.avertissement {
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 16px;
  border-left: 4px solid #C98A1E;
  background: #FDF4E3;
  color: #7A5410;
  font: 500 14px/1.5 var(--police-texte);
}
.legal { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.legal-sommaire {
  flex: 0 1 320px;
  min-width: 0;
  position: sticky;
  top: 16px;
  padding: 22px 24px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
.legal-sommaire-titre { margin-bottom: 10px; font: 600 15px/1.3 var(--police-titre); color: var(--marine); }
/* Les titres portent déjà leur numéro : pas de double numérotation. */
.legal-sommaire ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.legal-sommaire a { font-size: 14.5px; line-height: 1.45; text-decoration: none; }
.legal-sommaire a:hover { text-decoration: underline; }
.legal-corps { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.legal-corps h2 { font-size: 19px; margin-bottom: 10px; scroll-margin-top: 16px; }
.legal-corps p { max-width: 78ch; font-size: 15.5px; line-height: 1.65; }
.legal-corps p + p { margin-top: 10px; }
.legal-corps ul { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.55; }
@media (max-width: 860px) { .legal-sommaire { position: static; } }

/* Photo de section (colonne de droite des pages services) */
.photo-section {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: var(--rayon);
}

/* Cadrages : le réglage par défaut est « center top » (§7, visages entiers).
   Ces variantes servent quand le sujet n'est pas en haut de l'image. */
.hero img.cadrage-20 { object-position: center 20%; }
.hero img.cadrage-35 { object-position: center 35%; }
.hero img.cadrage-centre { object-position: center center; }
.hero img.cadrage-droite { object-position: right center; }
.photo-section.cadrage-droite { object-position: 68% center; }
.photo-section.cadrage-gauche { object-position: 35% center; }
/* Quatrieme cadrage, ajoute le 12 octobre 2026 : le cadre de la photo de
   section est plus etroit que la photo a toutes les largeurs sauf 768 px,
   donc les cotes sont rognes. Quand le sujet touche le bord gauche de la
   photo, meme 35 % le coupe : il faut coller au bord. */
.photo-section.cadrage-bord-gauche { object-position: left center; }
.photo-section.cadrage-centre { object-position: center center; }


/* 19. Bannière « Compte pro »
   Bandeau marine, cran 28 px, photo à droite découpée à 45°.
   La diagonale vaut exactement 45° car son décalage horizontal est égal
   à la hauteur de la bannière (--h-banniere).
   -------------------------------------------------------------------------- */
.banniere-compte {
  --h-banniere: 380px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: var(--h-banniere);
  background: var(--marine);
  border-radius: var(--rayon);
  overflow: hidden;
}
.banniere-compte-texte {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 40px;
}
.banniere-compte-texte h2 {
  max-width: 26ch;
  font: 600 clamp(26px, 2.4vw, 32px)/1.2 var(--police-titre);
  color: var(--blanc);
}
.banniere-compte-sous { font-size: 17px; line-height: 1.5; color: var(--blanc); }
.banniere-compte-code {
  font: 700 17px/1 var(--police-code);
  color: var(--cyan);
  letter-spacing: .02em;
}
.banniere-compte-avantages { font-size: 15.5px; line-height: 1.5; color: var(--texte-sur-sombre); }
.banniere-compte-texte .btn { margin-top: 8px; }
.banniere-compte-mention { max-width: 52ch; font-size: 13px; line-height: 1.5; color: #B9BCD6; }

.banniere-compte-photo {
  flex: 0 1 45%;
  min-width: 0;
  position: relative;
  /* le bord gauche descend vers la droite, au même angle que le cran */
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--h-banniere) 100%);
}
.banniere-compte-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Écran étroit : la photo passe au-dessus, sans diagonale (§7). */
@media (max-width: 760px) {
  .banniere-compte { --h-banniere: auto; flex-direction: column-reverse; height: auto; }
  .banniere-compte-photo { flex: none; height: 220px; clip-path: none; }
  .banniere-compte-texte { padding: 28px 22px 32px; }
}

/* Carte « Nos services » de l'accueil : liste de liens d'action */
.une-liens { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.une-liens .lien-action { font-size: 14.5px; }
.une-liens .fleche { width: 14px; height: 14px; }

/* Page 404 */
.page-404 { margin-top: 48px; }
.page-404-code { font: 500 13px/1.4 var(--police-code); color: var(--texte-discret); }


/* ==========================================================================
   20. Responsive (règle impérative, voir CLAUDE.md)
   Largeurs de test : 360, 390, 768, 1024, 1440, 1920 px.
   Trois paliers : smartphone (< 600), tablette (600 à 1023), ordinateur (≥ 1024).
   ========================================================================== */

/* --- Menu replié : bouton et panneau -------------------------------------- */
.entete-burger {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 16px;
  border: 1.5px solid var(--indigo);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--marine);
  font: 600 15px/1 var(--police-texte);
  cursor: pointer;
}
.entete-burger:hover { background: var(--survol-secondaire); }
.entete-burger svg { width: 18px; height: 18px; }

/* « Nous contacter », tout a droite de la barre de menu. Meme hauteur et meme
   filet que les rubriques, pour que la barre garde une seule ligne de base ;
   seule la couleur change, pour qu'il se distingue des rubriques. La marge
   automatique le pousse a droite sans ajouter de conteneur. */
.entete-nav-contact {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 3px 0 0;
  border-bottom: 3px solid transparent;
  color: var(--indigo);
  font: 600 15px/1 var(--police-titre);
  text-decoration: none;
  white-space: nowrap;
}
.entete-nav-contact svg { width: 20px; height: 20px; flex: none; }
.entete-nav-contact:hover { border-bottom-color: var(--cyan); }
.entete-nav-contact.actif { border-bottom-color: var(--indigo); }

.entete-menu-mobile { display: none; background: var(--fond-bloc); border-top: 1px solid var(--filet); }
.entete-menu-mobile > div { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 16px; }
.entete-menu-mobile a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--filet);
  color: var(--marine);
  font: 600 16px/1.3 var(--police-titre);
  text-decoration: none;
}
.entete-menu-mobile a:hover { color: var(--indigo); }
/* Bloc contact, en tete du menu replie. Il est pose hors du conteneur centre
   pour que son fond aille d'un bord a l'autre, et porte donc lui-meme la
   gouttiere, ce qui aligne son contenu sur les rubriques. */
.entete-contact-mobile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px var(--gouttiere) 20px;
  background: var(--fond-bloc);
  border-bottom: 1px solid var(--filet);
}
.entete-contact-mobile-titre { margin: 0; font: 600 17px/1.3 var(--police-titre); color: var(--marine); }
.entete-contact-mobile-horaires { font-size: 14px; color: var(--texte-discret); text-align: center; }
/* Les deux boutons prennent toute la largeur. Le filet et la hauteur de 52 px
   viennent du bloc, pas de .entete-menu-mobile a, dont la regle de zone
   s'appliquerait sinon (piege note dans CLAUDE.md § 3 bis). */
.entete-menu-mobile a.entete-contact-mobile-btn {
  width: 100%;
  min-height: 52px;
  border-bottom: 0;
  font: 600 16px/1 var(--police-texte);
}
.entete-menu-mobile a.entete-contact-mobile-btn.btn-principal { color: var(--blanc); }
.entete-menu-mobile a.entete-contact-mobile-btn.btn-secondaire { color: var(--indigo); }
.entete-contact-mobile-btn svg { width: 20px; height: 20px; flex: none; }

/* Les deux boutons de compte, cote a cote, tout en bas du menu. */
.entete-menu-mobile-boutons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
/* « Ouvrir un compte pro » est plus long que le libelle de la maquette : dans
   une demi-colonne de 390 px il se coupait en deux lignes qui debordaient du
   bouton. 14 px et une gouttiere reduite le ramenent sur une ligne, sans
   descendre sous les 44 px de hauteur utile. */
.entete-menu-mobile-boutons .btn {
  border-bottom: 0;
  min-height: 48px;
  padding: 0 8px;
  font-size: 14px;
}
/* les boutons gardent leurs couleurs propres, plus spécifiques que .entete-menu-mobile a */
.entete-menu-mobile-boutons a.btn-principal { color: var(--blanc); }
.entete-menu-mobile-boutons a.btn-secondaire { color: var(--indigo); }

/* --- Smartphone et tablette portrait : l'en-tête se replie ----------------- */
@media (max-width: 1023px) {
  .entete-burger { display: inline-flex; }
  .entete-menu-mobile:not([hidden]) { display: block; }
  .entete-produits,
  .entete-agence,
  .entete-compte,
  .entete-nav,
  .entete-panneau { display: none !important; }
  .entete-principal { gap: 12px; }
  .entete-recherche { order: 5; flex: 1 1 100%; }
}

/* --- Cibles tactiles : 44 px minimum sous 768 px -------------------------- */
@media (max-width: 767px) {
  .entete-logo { min-height: 44px; }
  .entete-logo img { height: 36px; }

  .fil { gap: 2px 8px; }
  .fil a { display: inline-flex; align-items: center; min-height: 44px; }
  .fil-retour { width: 44px; height: 44px; }

  .lien-action,
  .une-liens .lien-action { min-height: 44px; padding: 10px 0; }

  .pied-colonne a,
  .pied-legal a,
  .pied-agences-lien,
  .gamme-plus { display: inline-flex; align-items: center; min-height: 44px; }
  .liste-familles a,
  .liste-services-agence a { min-height: 44px; }
  /* Les 44 px tiennent lieu d'espacement : garder en plus les 12 px de la
     grille rendrait les rubriques inutilement longues sur telephone. */
  .pied-colonne ul { gap: 0; }

  .pied-telephone,
  .pied-email,
  .contact-unique-telephone,
  .contact-unique-email,
  .contact-telephone,
  .entete-coordonnees a { display: inline-flex; align-items: center; min-height: 44px; }

  .legal-sommaire ol { gap: 0; }
  .legal-sommaire a { display: flex; align-items: center; min-height: 44px; }

  .faq summary,
  .formation-ligne summary { min-height: 44px; }
  .agence-vignette .lien-action { min-height: 44px; }
}

/* --- Grilles : 1 colonne sur smartphone, 2 sur tablette ------------------- */
@media (max-width: 599px) {
  .grille-2,
  .grille-familles,
  .grille-produits,
  .grille-rayons,
  .grille-outils,
  .grille-services,
  .grille-univers,
  .grille-enjeux,
  .grille-etapes,
  .grille-formations,
  .agences-cartes,
  .liste-agences { grid-template-columns: 1fr; }
  .grille-marques { grid-template-columns: repeat(2, 1fr); }
  .une-carte, .une-carte--large { flex: 1 1 100%; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .grille-familles,
  .grille-produits,
  .grille-rayons,
  .grille-services,
  .grille-univers,
  .grille-enjeux,
  .grille-etapes,
  .grille-formations,
  .agences-cartes,
  .liste-agences { grid-template-columns: repeat(2, 1fr); }
  .grille-marques { grid-template-columns: repeat(4, 1fr); }
}

/* --- Pied de page : la grille de 12 colonnes passe a 6 --------------------
   Sous 1100 px, les blocs prennent toute la largeur et les rubriques de liens
   se rangent par deux. Sous 600 px, le cran du bloc marine passe a 20 px : la
   variable est redefinie pour ce bloc seulement, .cran-large s'en sert. */
@media (max-width: 1100px) {
  .pied-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pied-s4 { grid-column: span 6; }
  .pied-s2 { grid-column: span 3; }
  .reassurance-contenu,
  .pied-lettre,
  .pied-principal { row-gap: 28px; }
}
@media (max-width: 599px) {
  .pied { --cran-large: 20px; }
  .pied-principal { row-gap: 32px; }
}

/* --- Photos : ratio fixe et cadrage explicite ----------------------------- */
/* Sur grand écran les hauteurs sont fixes (mise en page validée). Sous 1024 px,
   un ratio prend le relais : la photo suit la largeur de sa colonne au lieu de
   rester écrasée. Le cadrage est toujours déclaré, jamais laissé au hasard. */
.une-photo, .carte-service-photo img, .carte-marche > img,
.bloc-photo-image img { object-position: center; }
/* visage en haut de l'image : cadrer depuis le haut pour ne jamais le couper.
   À déclarer APRÈS la règle générique ci-dessus, sinon elle l'écrase. */
.une-photo--haut { object-position: center top; }

@media (max-width: 1023px) {
  .une-photo, .une-produit { height: auto; aspect-ratio: 3 / 2; }
  .carte-service-photo { height: auto; aspect-ratio: 16 / 10; }
  .rayon-photo { height: auto; aspect-ratio: 1 / 1; }
  .carte-marche > img { height: auto; aspect-ratio: 3 / 2; }
  .bloc-photo-image, .bloc-photo-image--basse { min-height: 0; aspect-ratio: 3 / 2; }
}

/* Les photos produit restent entières : jamais rognées (§7). */
.rayon-photo img,
.carte-produit .photo img,
.une-produit img,
.carte-service-photo--produit img { object-fit: contain; }

/* Hauteurs plein écran : dvh et non vh, à cause de la barre d'adresse iPhone. */
.plein-ecran { min-height: 100dvh; }

/* 21. Page « Ouvrir un compte pro »
   --------------------------------------------------------------------------
   Section ajoutée pour la page compte pro. Elle ne modifie aucune règle
   existante : elle n'introduit que des classes nouvelles. */

/* Les 6 avantages : 3 colonnes sur ordinateur, 2 sur tablette, 1 sur téléphone.
   Grille à pas fixe (et non auto-fit) pour obtenir deux rangées de trois. */
.grille-avantages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 1023px) { .grille-avantages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .grille-avantages { grid-template-columns: 1fr; } }

.avantage h3 { font-size: 18px; }
.avantage p { font-size: 15.5px; line-height: 1.55; }

/* Le code de bienvenue sur fond clair : même police que dans la bannière marine,
   mais en indigo, qui tient le contraste de 4,5:1 sur le gris des blocs. */
.code-offre {
  font: 700 16px/1 var(--police-code);
  color: var(--indigo);
  letter-spacing: .02em;
}

/* 22. Encart « compte pro » (incitation en contexte)
   --------------------------------------------------------------------------
   Bloc clair posé au fil d'une page : pictogramme, une phrase, un bouton.
   Comme la section 21, elle n'ajoute que des classes nouvelles. */

.encart-compte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 22px 28px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
}
.encart-compte .picto { flex: none; width: 48px; height: 48px; }
/* la phrase occupe la place restante et pousse le bouton à droite */
.encart-compte p {
  flex: 1 1 300px;
  min-width: 0;
  font: 600 17px/1.45 var(--police-titre);
  color: var(--marine);
}
.encart-compte .btn { flex: none; }

/* Sur téléphone, tout s'empile et le bouton prend toute la largeur. */
@media (max-width: 599px) {
  .encart-compte { padding: 20px; }
  .encart-compte .btn { width: 100%; justify-content: center; }
}

/* 23. Lisibilité sur téléphone (chantier UX, lot 1)
   --------------------------------------------------------------------------
   Tout ce qui suit vit dans @media (max-width: 599px) : à partir de 600 px,
   et donc sur tablette et sur ordinateur, rien ne change.
   Motif : une carte à photo mesure environ 490 px de haut ; empilées en une
   colonne, treize d'entre elles occupaient 7,6 écrans de téléphone. */

/* Le lien « Voir les N marques » n'existe que sur téléphone. */
.logos-plus { display: none; margin-top: 14px; }

@media (max-width: 599px) {

  /* --- Cartes de rayon : la carte devient une ligne ---------------------- */
  .grille-rayons { gap: 10px; }
  .rayon { flex-direction: row; align-items: stretch; }
  .rayon-photo {
    flex: none;
    width: 88px;
    height: auto;
    min-height: 88px;
    padding: 10px;
    background: var(--fond-bloc);
  }
  .rayon-texte { gap: 4px; padding: 12px 14px; justify-content: center; }
  .rayon-texte .titre { font-size: 16px; }
  .rayon-texte .desc { font-size: 14px; }
  .rayon-texte .aller { margin-top: 4px; padding-top: 0; font-size: 14px; }

  /* --- Cartes de service : même traitement ------------------------------
     Grille à deux colonnes et non flex en ligne : selon les pages, la carte
     porte deux enfants (photo + titre) ou trois (photo + titre + description).
     En flex, le troisième se mettait à côté des autres et débordait. */
  .grille-services { gap: 10px; }
  .carte-service {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: min-content min-content;
    /* align-content et non align-items : les deux lignes de texte restent
       collées l'une à l'autre, l'ensemble étant centré sur les 88 px. */
    align-content: center;
    min-height: 88px;
    gap: 2px 14px;
    background: var(--fond-bloc);
    border-radius: var(--rayon);
  }
  .carte-service-photo { grid-column: 1; grid-row: 1 / span 2; width: 88px; height: 88px; }
  /* cadrage par le haut : une photo de terrain ne doit pas couper les têtes */
  .carte-service-photo img { object-position: center top; }
  .carte-service-photo--produit { padding: 8px; }
  /* Le commentaire d'une case hachurée ne tient pas dans 88 px : on garde
     les hachures, qui signalent la photo manquante, et on masque le texte. */
  .carte-service-photo .photo-a-venir,
  .rayon-photo .photo-a-venir { font-size: 0; padding: 0; }
  .carte-service > span { grid-column: 2; min-width: 0; padding-right: 14px; }
  .carte-service > span:first-of-type { font: 600 16px/1.3 var(--police-titre); }

  /* --- Logos : 3 colonnes, 12 au maximum, puis un lien ------------------- */
  .grille-marques { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .grille-marques--limitee > :nth-child(n+13) { display: none; }
  /* variante épinglée : 11 premiers logos + le logo épinglé, placé en dernier */
  .grille-marques--epinglee > :nth-child(n+12):not(.tuile-marque--epinglee) { display: none; }
  .grille-marques--epinglee > .tuile-marque--epinglee { order: 99; }
  .logos-plus { display: inline-flex; }
}

/* 24. Page Formation : filtres par thème et formations en liste
   --------------------------------------------------------------------------
   Les treize formations occupaient 8,1 écrans de téléphone, mêlées les unes
   aux autres. Elles deviennent des lignes, filtrables par thème. */

.filtres-themes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  background: none;
  border: 1.5px solid var(--indigo);
  border-radius: var(--rayon);
  color: var(--indigo);
  font: 600 15px/1.25 var(--police-texte);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.filtre img { flex: none; width: 24px; height: 24px; }
.filtre:hover { background: var(--survol-secondaire); }
.filtre[aria-pressed="true"] { background: var(--indigo); color: var(--blanc); }
/* le pictogramme passe en blanc sur le thème actif */
.filtre[aria-pressed="true"] img { filter: brightness(0) invert(1); }
.filtre-nb { font: 500 13px/1 var(--police-code); opacity: .8; }

/* Les formations : mêmes lignes blanches séparées d'un filet que les FAQ. */
.liste-formations { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--filet); }
.formation-ligne { border-bottom: 1px solid var(--filet); }
.formation-ligne summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
}
.formation-ligne summary::-webkit-details-marker { display: none; }
.formation-ligne-texte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.formation-titre { font: 600 18px/1.3 var(--police-titre); color: var(--marine); }
.formation-resume { font-size: 15.5px; line-height: 1.5; color: var(--texte); }
.formation-meta { font: 400 14px/1.45 var(--police-texte); color: var(--texte-discret); }
.formation-voir {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--indigo);
  font: 600 15px/1 var(--police-texte);
}
.formation-ligne summary:hover .formation-titre { color: var(--indigo); }
.formation-programme {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 0 4px 22px;
}

/* Pictogramme et phrase de fin des colonnes ouvertes (bloc-enjeux). */
.colonne-ouverte .picto { width: 40px; height: 40px; margin-bottom: 2px; }
.enjeux-apres { margin-top: 22px; max-width: 86ch; font-size: 16px; line-height: 1.55; }

@media (max-width: 599px) {
  /* deux colonnes de filtres, sans défilement horizontal */
  .filtres-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .filtre { padding: 8px 10px; font-size: 14px; line-height: 1.2; }
  .filtre img { width: 20px; height: 20px; }
  .formation-voir { font-size: 14px; }
}

/* 25. Services associés (bas des pages service)
   --------------------------------------------------------------------------
   Remplace les onze pastilles de « Nos autres services » : trois services
   proches, avec leur pictogramme, plus le lien vers la liste complète. */

.liste-associes {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.liste-associes a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  gap: 2px 14px;
  /* height 100% : les trois cartes gardent la meme hauteur quelle que soit
     la longueur de leur description. */
  height: 100%;
  min-height: 92px;
  padding: 18px 20px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  color: var(--texte);
  text-decoration: none;
  transition: background-color .15s;
}
.liste-associes a:hover { background: var(--survol); }
.liste-associes img { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; }
.liste-associes .titre { grid-column: 2; font: 600 17px/1.3 var(--police-titre); color: var(--marine); }
.liste-associes .desc { grid-column: 2; font-size: 14.5px; line-height: 1.45; color: var(--texte); }
.liste-associes a:hover .titre { color: var(--indigo); }

@media (max-width: 1023px) { .liste-associes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .liste-associes { grid-template-columns: 1fr; } }

/* 26. Formation : catalogue et fiches
   --------------------------------------------------------------------------
   Valeurs reprises des maquettes reference/formation/Formation-v2.html et
   Formation-fiche.html, rangées en classes. Préfixes : fo- pour le catalogue,
   fi- pour la fiche. */

/* --- Catalogue : bandeau -------------------------------------------------- */
.fo-hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; background: #E4E7F0; }
.fo-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; display: block; }
.fo-hero-conteneur { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; padding: 150px clamp(16px, 3vw, 40px) 36px; }
.fo-hero-encadre { max-width: 500px; display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 28px; background: var(--blanc); }
.fo-hero-encadre h1 { margin: 0; font: 600 clamp(28px, 3vw, 36px)/1.15 var(--police-titre); color: var(--marine); }
.fo-hero-encadre p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--texte); }

/* --- Catalogue : conteneurs et titres ------------------------------------- */
.fo-bloc { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.fo-titre { margin: 0; font: 600 clamp(26px, 2.6vw, 34px)/1.2 var(--police-titre); color: var(--marine); }
.fo-chapeau { margin: 10px 0 0; max-width: 760px; font-size: 17px; line-height: 1.55; color: var(--texte); }

/* --- Catalogue : tuiles de thème ------------------------------------------ */
.fo-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-top: 28px; }
.fo-tuile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  min-height: 136px; padding: 16px; border: 0; border-radius: var(--rayon);
  background: var(--fond-bloc); color: var(--marine);
  font-family: var(--police-texte); text-align: left; cursor: pointer;
}
.fo-tuile-picto { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--blanc); border-radius: var(--rayon); }
.fo-tuile-texte { display: flex; flex-direction: column; gap: 3px; }
.fo-tuile-nom { font: 600 16px/1.25 var(--police-titre); }
.fo-tuile-nb { font-size: 14px; color: var(--texte-discret); }
.fo-tuile[aria-pressed="true"] {
  background: var(--indigo); color: var(--blanc);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.fo-tuile[aria-pressed="true"] .fo-tuile-nb { color: #DCD8F5; }

/* --- Catalogue : bande marine et cartes ----------------------------------- */
.fo-bande { position: relative; margin-top: 40px; }
.fo-bande-fond { position: absolute; left: 0; right: 0; top: 0; height: 260px; background: var(--marine); }
.fo-bande-corps { position: relative; max-width: 1360px; margin: 0 auto; padding: 36px clamp(16px, 3vw, 40px) 0; }
.fo-bande-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 28px; }
.fo-bande-entete p { margin: 0; max-width: 820px; font-size: 17px; line-height: 1.5; color: #DCDDF0; }
.fo-bande-entete strong { font: 600 22px var(--police-titre); color: var(--blanc); }
.fo-lien-blanc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 2px solid var(--cyan); color: var(--blanc); font: 600 15px var(--police-texte); text-decoration: none; }
.fo-lien-blanc:hover { color: var(--cyan-clair); }

.fo-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 48px) / 3)), 1fr)); gap: 24px; }
.fo-carte {
  display: flex; flex-direction: column; background: var(--fond-bloc); border-radius: var(--rayon); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.fo-carte > img { width: 100%; height: 250px; object-fit: cover; display: block; }
.fo-carte-corps { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 24px 24px; text-align: center; }
.fo-carte-corps h3 { margin: 0; font: 600 21px/1.3 var(--police-titre); color: var(--marine); }
.fo-carte-corps > p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--texte); }
.fo-meta { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font: 600 14.5px var(--police-texte); color: var(--indigo); }
.fo-meta li { display: inline-flex; align-items: center; gap: 6px; }
.fo-carte-bouton {
  margin-top: auto; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; border-radius: var(--rayon); background: var(--indigo); color: var(--blanc);
  font: 600 15.5px var(--police-texte); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.fo-carte-bouton:hover { background: var(--marine); color: var(--blanc); }
.fo-carte[hidden] { display: none; }

/* --- Catalogue : comment se déroule une formation ------------------------- */
.fo-deroule { background: var(--fond-bloc); border-radius: var(--rayon); padding: 40px clamp(20px, 4vw, 48px) 44px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.fo-deroule h2 { margin: 0; font: 600 clamp(24px, 2.3vw, 30px)/1.2 var(--police-titre); color: var(--marine); }
.fo-deroule > p { margin: 8px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--texte); }
.fo-etapes { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px; margin-top: 32px; }
.fo-etapes-trait { position: absolute; left: 36px; right: 36px; top: 36px; border-top: 2px dashed #C9CCDA; }
.fo-etape { position: relative; display: flex; flex-direction: column; gap: 8px; }
.fo-etape-picto { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--blanc); border-radius: var(--rayon); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.fo-etape-moment { margin-top: 10px; font: 700 14px var(--police-texte); color: var(--indigo); }
.fo-etape h3 { margin: 0; font: 600 19px/1.3 var(--police-titre); color: var(--marine); }
.fo-etape p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texte); }

/* --- Catalogue : où se former -------------------------------------------- */
.fo-ou { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 32px; }
.fo-ou-item { display: flex; gap: 16px; padding-top: 18px; border-top: 2px solid var(--marine); }
.fo-ou-item > img { flex: none; width: 44px; height: 44px; }
.fo-ou-item h3 { margin: 0; font: 600 18px var(--police-titre); color: var(--marine); }
.fo-ou-item p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texte); }
.fo-financement { margin: 28px 0 0; max-width: 860px; font-size: 15.5px; line-height: 1.6; color: var(--texte); }
.fo-financement strong { color: var(--marine); }

/* --- Catalogue : bloc « former vos équipes » ------------------------------ */
.fo-equipes { display: flex; flex-wrap: wrap; border-radius: var(--rayon); background: var(--fond-bloc); overflow: hidden; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.fo-equipes-texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 30px 30px; }
.fo-equipes-texte h2 { margin: 0; font: 600 clamp(22px, 2vw, 26px)/1.2 var(--police-titre); color: var(--marine); }
.fo-equipes-texte p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--texte); }
.fo-equipes-photo { flex: 1 1 420px; min-width: 0; min-height: 250px; position: relative; overflow: hidden; }
.fo-equipes-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Accordéon du modèle (catalogue et fiche) ----------------------------- */
.fo-accordeon { border-top: 1px solid var(--filet); }
.fo-accordeon details { border-bottom: 1px solid var(--filet); }
.fo-accordeon summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 4px; cursor: pointer; list-style: none; font: 600 16.5px/1.4 var(--police-texte); color: var(--marine); }
.fo-accordeon summary::-webkit-details-marker { display: none; }
.fo-accordeon summary:hover { color: var(--indigo); }
.fo-plus { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--fond-bloc); border-radius: var(--rayon); color: var(--indigo); font-size: 20px; line-height: 1; }
.fo-accordeon details[open] .fo-plus { color: var(--marine); }
.fo-accordeon details > p { margin: 0; padding: 0 4px 20px; max-width: 860px; font-size: 15.5px; line-height: 1.6; color: var(--texte); }

/* Marges verticales reprises au pixel du modèle, qui ne suit pas le pas de
   56 px de .section-page. */
.fo-mt-64 { margin-top: 64px; }
.fo-mt-72 { margin-top: 72px; }
.fo-mt-80 { margin-top: 80px; }
.fo-mt-72 .fi-h2 { margin-bottom: 24px; }
.fo-espace-pied { height: 72px; }

/* --- Fiche : en-tête ------------------------------------------------------ */
.fi-entete { background: var(--fond-bloc); }
.fi-entete-corps { max-width: 1360px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 40px) 48px; }
.fi-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--texte); }
.fi-fil-retour { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--blanc); border-radius: var(--rayon); color: var(--marine); }
.fi-fil-trait { width: 1px; height: 22px; background: #D9DCE6; }
.fi-fil a { color: var(--marine); font-weight: 600; text-decoration: none; }
.fi-fil a:hover { color: var(--indigo); }
.fi-fil .fi-fil-ici { color: var(--texte-discret); }
.fi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px 48px; align-items: center; margin-top: 28px; }
.fi-texte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fi-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 15px var(--police-texte); color: var(--indigo); }
.fi-texte h1 { margin: 0; font: 600 clamp(32px, 3.8vw, 48px)/1.1 var(--police-titre); color: var(--marine); }
.fi-accroche { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--texte); }
.fi-infos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 0; font: 600 15.5px var(--police-texte); color: var(--marine); }
.fi-infos li { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; border-left: 1px solid #D9DCE6; }
.fi-infos li:first-child { padding: 0 20px 0 0; border-left: 0; }
.fi-ref { margin: 2px 0 0; font: 400 14px var(--police-code); color: var(--texte-discret); }
.fi-photo { width: 100%; height: 360px; object-fit: cover; border-radius: var(--rayon); display: block; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }

/* --- Fiche : sommaire collant -------------------------------------------- */
.fi-sommaire { position: sticky; top: 0; z-index: 5; background: var(--blanc); border-bottom: 1px solid var(--filet); }
.fi-sommaire-corps { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); display: flex; align-items: center; gap: 32px; overflow-x: auto; }
.fi-sommaire-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding-right: 32px;
  margin-right: -16px;
  border-right: 1px solid var(--filet);
  font: 400 14px var(--police-texte);
  color: var(--texte-discret);
  white-space: nowrap;
}
.fi-sommaire a {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 60px;
  border-bottom: 3px solid transparent;
  color: var(--texte);
  font: 600 15.5px var(--police-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.fi-sommaire a:hover { border-bottom-color: #C9CCDA; color: var(--marine); }
.fi-sommaire a.actif,
.fi-sommaire a[aria-current="true"] { border-bottom-color: var(--indigo); color: var(--indigo); }

/* --- Fiche : corps -------------------------------------------------------- */
.fi-corps { max-width: 1360px; margin: 48px auto 0; padding: 0 clamp(16px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.fi-principal { flex: 999 1 560px; display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.fi-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px 32px; }
.fi-colonne { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--marine); }
.fi-colonne h3 { margin: 0; font: 600 20px var(--police-titre); color: var(--marine); }
.fi-colonne p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte); }
.fi-h2 { margin: 0 0 16px; font: 600 clamp(24px, 2.3vw, 30px)/1.2 var(--police-titre); color: var(--marine); }

.fi-objectifs { background: var(--fond-bloc); border-radius: var(--rayon); padding: 32px clamp(20px, 3vw, 36px); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.fi-objectifs-intro { margin: 0 0 18px; font: 500 17px/1.5 var(--police-texte); color: var(--marine); }
.fi-liste-coches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px 32px; }
.fi-liste-coches li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--marine); }
.fi-liste-coches svg { flex: none; margin-top: 1px; }
/* Matériel : même grille que les objectifs, mais sur fond blanc avec filet. */
.fi-materiel { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 32px clamp(20px, 3vw, 36px); }

.fi-prog { position: relative; list-style: none; margin: 28px 0 0; padding: 0; }
.fi-prog-trait { position: absolute; left: 35px; top: 36px; bottom: 36px; border-left: 2px dashed #C9CCDA; }
.fi-prog-etape { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding-bottom: 36px; }
.fi-prog-picto { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--fond-bloc); border-radius: var(--rayon); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.fi-prog-picto--jour { background: var(--indigo); }
.fi-prog-texte { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; min-width: 0; }
.fi-prog-moment { font: 700 14px var(--police-texte); color: var(--indigo); }
.fi-prog-texte h3 { margin: 0; font: 600 20px var(--police-titre); color: var(--marine); }
.fi-prog-texte > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte); }
.fi-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 12px; }
.fi-partie { background: var(--fond-bloc); border-radius: var(--rayon); padding: 22px 24px; }
.fi-partie h4 { margin: 0 0 12px; font: 600 17px var(--police-titre); color: var(--marine); }
.fi-partie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fi-partie li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--texte); }
.fi-carre { flex: none; width: 7px; height: 7px; margin-top: 8px; background: var(--cyan); }
.fi-pratique { color: var(--marine); }
.fi-pratique strong { font-weight: 700; }
.fi-adapte { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--texte-discret); }

/* --- Fiche : encadré marine ---------------------------------------------- */
.fi-aside { flex: 1 1 360px; min-width: 0; position: sticky; top: 84px; }
.fi-encadre { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--marine); color: var(--blanc); border-radius: var(--rayon); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.fi-encadre h2 { margin: 0; font: 600 22px/1.3 var(--police-titre); color: var(--blanc); }
.fi-formules { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fi-formules legend { padding: 0; margin-bottom: 10px; font-size: 14px; color: #CFD1E6; }
.fi-formule { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px; background: var(--blanc); color: var(--marine); border-radius: var(--rayon); cursor: pointer; }
.fi-formule input { margin: 3px 0 0; accent-color: var(--indigo); }
/* nom, description et prix sur trois lignes, comme dans la maquette */
.fi-formule > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.fi-formule:has(input:checked) { outline: 2px solid var(--cyan); outline-offset: -2px; }
.fi-formule-nom { font: 600 16px var(--police-titre); }
.fi-formule-desc { font-size: 14px; line-height: 1.45; color: var(--texte); }
.fi-formule-prix { font-weight: 600; color: var(--indigo); }
.fi-bouton-blanc { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: var(--rayon); background: var(--blanc); color: var(--marine); font: 600 15.5px var(--police-texte); text-decoration: none; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.fi-bouton-blanc:hover { background: var(--cyan-clair); color: var(--marine); }
.fi-pdf { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 2px solid var(--cyan); color: var(--blanc); font: 600 15px var(--police-texte); text-decoration: none; }
.fi-filet { height: 1px; background: #2E3070; }
.fi-contact { display: flex; flex-direction: column; gap: 4px; }
.fi-contact span { font-size: 14px; color: #CFD1E6; }
.fi-contact .fi-tel { color: var(--blanc); text-decoration: none; font: 600 22px var(--police-titre); }
.fi-contact .fi-mail { color: var(--blanc); font-size: 15px; }
.fi-opco { margin: 0; font-size: 13.5px; line-height: 1.5; color: #B9BCD6; }

/* --- Fiche : pour aller plus loin ---------------------------------------- */
.fi-autres-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 24px; }
.fi-autres-entete h2 { margin: 0; font: 600 clamp(24px, 2.3vw, 30px)/1.2 var(--police-titre); color: var(--marine); }
.fi-autres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 24px; }
.fi-autre { display: grid; grid-template-columns: 180px minmax(0, 1fr); background: var(--fond-bloc); border-radius: var(--rayon); overflow: hidden; color: var(--marine); text-decoration: none; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.fi-autre:hover { background: var(--survol); color: var(--marine); }
.fi-autre > img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; display: block; }
.fi-autre-texte { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.fi-autre-titre { font: 600 19px/1.3 var(--police-titre); }
.fi-autre-desc { font-size: 15px; line-height: 1.5; color: var(--texte); }
.fi-autre-meta { margin-top: auto; font: 600 14.5px var(--police-texte); color: var(--indigo); }

/* --- Barre fixe de la fiche, sur téléphone uniquement --------------------- */
.fi-barre { display: none; }

@media (max-width: 599px) {
  .fo-tuiles { grid-template-columns: repeat(2, 1fr); }
  .fo-tuile { min-height: 124px; }
  .fo-carte > img { height: 200px; }
  .fo-bande-fond { height: 200px; }

  /* La ligne d'infos passe en colonne : un séparateur vertical ne doit jamais
     se retrouver en début de ligne quand le texte revient à la ligne. */
  .fi-infos { flex-direction: column; gap: 10px; }
  .fi-infos li,
  .fi-infos li:first-child { padding: 0; border-left: 0; }
  /* photo au-dessus du titre */
  .fi-texte { order: 2; }
  .fi-photo { order: 1; height: 240px; }
  .fi-grille { margin-top: 20px; }
  /* l'encadré marine remonte juste sous l'en-tête de fiche */
  .fi-aside { order: -1; position: static; flex: 1 1 100%; }
  .fi-corps { gap: 40px; padding-bottom: 92px; }
  .fi-prog-etape { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
  .fi-prog-picto { width: 56px; height: 56px; }
  .fi-prog-trait { left: 27px; }
  .fi-autre { grid-template-columns: 1fr; }
  .fi-autre > img { height: 180px; min-height: 0; }

  /* barre fixe en bas d'écran */
  .fi-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; padding: 10px clamp(16px, 3vw, 40px) calc(10px + env(safe-area-inset-bottom));
    background: var(--blanc); border-top: 1px solid var(--filet);
  }
  .fi-barre .btn { flex: 1; }
}

/* Écrans de moins de 360 px (iPhone SE de 2016, Galaxy Fold replié).
   Les tuiles de thème sont sur deux colonnes égales sous 600 px, mais une
   tuile de grille refuse par défaut de descendre sous la largeur de son
   contenu : le mot « Vidéosurveillance » imposait 180 px à la première
   colonne, la seconde prenait le reste, et le total débordait de 11 px.
   On autorise donc la tuile à rétrécir et le mot à se couper.
   Ce réglage est volontairement limité à cette largeur : à partir de
   360 px, qui est le plancher des six largeurs de test, le rendu validé
   ne doit pas bouger. */
@media (max-width: 359px) {
  .fo-tuile { min-width: 0; }
  .fo-tuile-texte { min-width: 0; }
  .fo-tuile-nom { overflow-wrap: break-word; }
}

/* Zones cliquables des pages Formation : 44 px de haut sous 768 px (§3 bis).
   Les maquettes ne prévoient pas de règle mobile ; la règle du site prime,
   et le rendu à 1440 px reste celui du modèle. */
@media (max-width: 767px) {
  .fi-fil-retour { width: 44px; height: 44px; }
  .fi-fil a,
  .fi-contact .fi-tel,
  .fi-contact .fi-mail,
  .fo-lien-blanc,
  .fi-pdf { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Sous-catégories des cartes « univers » : repliées sur téléphone.
   Les 72 liens des 9 cartes pesaient 1 575 px sur l'accueil, près de deux
   écrans. Ils sont repliés, jamais supprimés. À partir de 600 px la liste
   est rouverte et le bouton masqué : le rendu est celui d'avant. */
.univers-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  font: 600 15px var(--police-texte);
  color: var(--indigo);
}
.univers-details > summary::-webkit-details-marker { display: none; }
.univers-details > summary:hover { color: var(--marine); }

.univers-details:not([open]) > ul { display: none; }

@media (min-width: 600px) {
  .univers-details > summary { display: none; }
  .univers-details:not([open]) > ul { display: flex; }
  /* Chrome a change la facon de rendre un <details> ferme : son contenu est
     desormais masque par ::details-content, et le display:flex ci-dessus ne
     suffit plus. Resultat, les sous-categories ne s'affichaient plus du tout
     sur ordinateur, sur l'accueil comme sur la page Catalogue. Defaut trouve
     le 12 octobre 2026. Les navigateurs qui ignorent ::details-content
     continuent de suivre la regle precedente. */
  .univers-details::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}

/* Tarifs des formations.
   Sorein n'est pas certifié Qualiopi : aucune mention de financement, d'OPCO
   ni de CPF n'apparaît sur ces pages (§8). */
.fo-prix { margin: 0 0 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fo-prix-montant { font: 600 18px/1.2 var(--police-titre); color: var(--marine); }
.fo-prix-unite { font: 400 14px/1.3 var(--police-texte); color: var(--texte-discret); }
.fi-tva { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--texte-discret); }

/* Arrivée sous la barre de sommaire des fiches formation.
   85 px = la hauteur réelle mesurée de la barre collante (61 px) + 24 px
   d'air, pour que le titre de la section ne passe jamais derrière elle.
   Le défilement doux est limité aux pages qui portent cette barre. */
html:has(.fi-sommaire) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.fi-sommaire) { scroll-behavior: auto; }
}
.fi-principal > section { scroll-margin-top: 85px; }

@media (max-width: 599px) {
  .fi-sommaire-label { display: none; }
  .fi-sommaire-corps { gap: 24px; }
}

/* 28. Haut de la page d'accueil, d'après reference/accueil/accueil-hero.html
   --------------------------------------------------------------------------
   Valeurs reprises de la maquette validée, rangées en classes. Les couleurs,
   les boutons et les liens viennent de la charte, rien n'est redéclaré. */

/* --- Ligne 1 : photo 2/3, compte pro 1/3 --------------------------------- */
.hero-accueil { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 28px; }
.hero-accueil-photo { position: relative; height: 460px; overflow: hidden; }
.hero-accueil-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; display: block; }
.hero-accueil-encadre {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: min(460px, calc(100% - 64px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 30px 30px;
  background: var(--blanc);
}
.hero-accueil-encadre h1 { margin: 0; font: 600 32px/1.18 var(--police-titre); color: var(--marine); }
.hero-accueil-encadre p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--texte); }

/* contenu centré verticalement : aucun vide en haut ni en bas */
.hero-compte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 40px 36px;
  background: var(--marine);
}
.hero-compte h2 { margin: 0; font: 600 26px/1.22 var(--police-titre); color: var(--blanc); }
.hero-compte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-compte-liste li { display: flex; align-items: center; gap: 12px; font: 400 17px/1.3 var(--police-texte); color: var(--blanc); }
.hero-coche { flex: none; }
.hero-compte-note { margin: 0; font-size: 15px; color: var(--cyan-clair); }
.hero-compte-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 6px; }
.hero-compte-actions .btn { margin-top: 0; align-self: flex-start; }
.hero-compte-connexion { border-bottom-width: 2px; padding-bottom: 5px; }

/* --- Ligne 2 : deux cartes égales, image à gauche ------------------------- */
.hero-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.hero-duo-carte { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 210px; background: var(--fond-bloc); overflow: hidden; }
.hero-duo-produit { display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--fond-bloc); }
/* la photo produit se fond dans le gris du bloc */
.hero-duo-produit img { width: auto; height: auto; max-width: 100%; max-height: 170px; object-fit: contain; mix-blend-mode: multiply; display: block; }
.hero-duo-photo { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; display: block; }
.hero-duo-texte { display: flex; flex-direction: column; gap: 10px; padding: 26px 30px; }
.hero-duo-texte h2 { margin: 0; font: 600 22px/1.25 var(--police-titre); color: var(--marine); }
.hero-duo-texte h2 .debut { color: var(--indigo); }
.hero-duo-texte p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texte); }
.hero-duo-texte .lien-action { margin-top: auto; align-self: flex-start; white-space: nowrap; padding: 8px 0 5px; }

/* --- Une seule colonne sous 1100 px -------------------------------------- */
@media (max-width: 1100px) {
  .hero-accueil { grid-template-columns: 1fr; }
  .hero-compte { padding: 32px 36px; }
  .hero-duo { grid-template-columns: 1fr; }
}

/* --- Téléphone : l'encadré passe sous la photo --------------------------- */
@media (max-width: 760px) {
  .hero-accueil { gap: 16px; }
  .hero-accueil-photo { height: auto; overflow: visible; clip-path: none; }
  .hero-accueil-photo > img { height: 220px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); border-radius: var(--rayon); }
  .hero-accueil-encadre { position: static; width: auto; padding: 18px 0 4px; clip-path: none; }
  .hero-accueil-encadre h1 { font-size: 26px; }
  .hero-accueil-encadre p { font-size: 16px; }
  .hero-compte { padding: 28px 22px; }
  .hero-compte h2 { font-size: 22px; }
  .hero-compte-liste li { font-size: 16px; }
  .hero-duo { gap: 16px; margin-top: 16px; }
  .hero-duo-carte { grid-template-columns: 112px minmax(0, 1fr); min-height: 0; }
  .hero-duo-produit { padding: 10px; }
  .hero-duo-texte { padding: 16px 16px 18px; gap: 8px; }
  .hero-duo-texte h2 { font-size: 18px; }
  .hero-duo-texte p { font-size: 15px; }
}

/* Respiration entre la ligne des deux cartes et le bandeau services : 88 px
   sur ordinateur, 56 px sur téléphone. L'espace de 20 px entre les blocs du
   haut n'est pas touché. */
.hero-avant-bandeau { margin-top: 88px; }
@media (max-width: 760px) { .hero-avant-bandeau { margin-top: 56px; } }

/* La photo du bandeau est cadrée sur les deux personnes. */
.bandeau-services-photo { object-position: 30% center; }


/* 29. Pages familles du catalogue, d'apres la maquette validee du 12 octobre 2026
   (reference-catalogue/famille-reference.html)
   -------------------------------------------------------------------------- */
/* La premiere section suit le hero, qui porte deja 56 px de bas : on ne les
   ajoute pas une seconde fois. */
.famille-hero + .section-page { margin-top: 8px; }
.famille-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 56px;
}
.famille-hero h1 { margin: 0 0 14px; font: 600 clamp(32px, 3.2vw, 44px)/1.1 var(--police-titre); }
.famille-intro { margin: 0 0 24px; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--texte); }

/* Les trois reperes, separes par un filet vertical. Le dernier n'en porte pas. */
.famille-reperes {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 28px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.famille-reperes div {
  flex: 1 1 140px;
  padding: 14px 20px 14px 0;
  margin-right: 20px;
  border-right: 1px solid var(--filet);
}
.famille-reperes div:last-child { border-right: 0; margin-right: 0; }
.famille-reperes strong { display: block; font: 600 20px/1.2 var(--police-titre); color: var(--marine); }
.famille-reperes span { font-size: 14px; color: var(--texte-discret); }

.famille-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.famille-photo { width: 100%; height: 420px; object-fit: cover; object-position: 75% 40%; display: block; }
/* Cadrage par le haut, quand le sujet touche le bord haut de la photo. Sous
   1024 px le cadre tombe à 300 px et le cadrage par défaut rogne 73 px en
   haut : la caméra de la famille Vidéosurveillance y perdait son socle et son
   attache au plafond. Déclaré par « cadrage » dans catalogue.json. */
.famille-photo--haut { object-position: center top; }
/* Emplacement sans photo validee : case grise, comme ailleurs sur le site (§ 7). */
.famille-photo--a-fournir {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gris neutre, et non le lavande de survol : trois cases cote a cote dans
     une grille, ce lavande teintait toute la page. */
  background: #ECEDF3;
  color: var(--texte-discret);
  font-size: 14px;
}

/* Les deux en-tetes de section de ces pages portent une phrase sous le titre. */
.entete-section--catalogue { display: block; margin-bottom: 24px; }
.entete-section--catalogue h2 { margin: 0; font: 600 clamp(24px, 2.2vw, 30px)/1.2 var(--police-titre); }
.entete-section--catalogue p { margin: 6px 0 0; font-size: 16px; color: var(--texte-discret); }

.grille-gammes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gamme { display: flex; flex-direction: column; background: var(--fond-bloc); border-radius: var(--rayon); }
.gamme-photo {
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Photo produit detouree : le multiply la pose sur le gris sans halo blanc (§ 7). */
.gamme-photo img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; display: block; }
/* Photo d'ambiance : elle remplit la tuile, sans multiply. */
.gamme-photo--ambiance { padding: 0; }
.gamme-photo--ambiance img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.gamme-photo--a-fournir { background: #ECEDF3; color: var(--texte-discret); font-size: 14px; }
/* Logo d'editeur, pour les gammes de logiciel qui n'ont rien a montrer. Il est
   bride : etire sur toute la largeur de la tuile, un logo de 74 px de haut
   aurait l'air d'un bandeau, pas d'un logo. */
.gamme-photo--logo img { max-width: 62%; max-height: 92px; }
/* Plusieurs logos d'éditeur dans une tuile : deux par rangée, centrés.
   La largeur de chaque logo est un POURCENTAGE de la tuile, et le rapport
   entre deux logos reprend celui de la grille des marques (largeur = hauteur
   de marques.json x rapport du fichier). Cadrés à la même hauteur, ils
   n'auraient plus le même poids visuel qu'ailleurs sur le site : Semperis
   est presque carré, Proxmox six fois plus large que haut.
   Chaque logo n'apparaît que dans UNE tuile à plusieurs logos : c'est ce qui
   permet de régler sa largeur ici une fois pour toutes. */
.gamme-photo--logos { flex-wrap: wrap; align-content: center; gap: 14px 6%; }
.gamme-photo--logos img { max-height: 64px; }
/* Sauvegarde, « Logiciels de sauvegarde » : 190 et 114 px dans la grille */
.gamme-photo--logos img.logo-proxmox { max-width: 58%; }
.gamme-photo--logos img.logo-veeam { max-width: 35%; }
/* Licences, « Sécurité » : 133, 87, 151 et 75 px dans la grille */
.gamme-photo--logos img.logo-barracuda { max-width: 41%; }
.gamme-photo--logos img.logo-bitdefender { max-width: 27%; }
.gamme-photo--logos img.logo-netwrix { max-width: 46%; }
.gamme-photo--logos img.logo-semperis { max-width: 23%; }

.gamme-corps { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 4px 26px 26px; }
.gamme-corps h3 { margin: 0; font: 600 21px/1.25 var(--police-titre); color: var(--marine); }
.gamme-corps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texte); }

/* Liens rapides : tailles et types. Tant que le webshop est ferme, ce sont des
   span et non des liens, d'ou la mise en forme commune a a et span. */
.gamme-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gamme-liens small { width: 100%; font-size: 13px; color: var(--texte-discret); }
.gamme-liens a,
.gamme-liens span {
  min-width: 44px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font: 600 14px var(--police-texte);
  color: var(--marine);
  text-decoration: none;
}
.gamme-liens a:hover { border-color: var(--indigo); color: var(--indigo); }

.gamme-plus {
  margin-top: auto;
  padding-top: 8px;
  padding-bottom: 3px;
  align-self: flex-start;
  color: var(--indigo);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid var(--cyan);
}
.gamme-plus:hover { color: var(--marine); border-bottom-color: var(--indigo); }

.famille-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--filet); }
.famille-guide div { padding: 24px 28px 8px 0; margin-right: 28px; border-right: 1px solid var(--filet); }
.famille-guide div:last-child { border-right: 0; margin-right: 0; }
.famille-guide strong { display: block; margin-bottom: 8px; font: 600 18px/1.3 var(--police-titre); color: var(--marine); }
.famille-guide p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texte); }

.famille-bande {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: 36px 44px;
  background: var(--marine);
  color: var(--blanc);
  border-radius: var(--rayon);
}
.famille-bande h2 { margin: 0; font: 600 26px/1.25 var(--police-titre); color: var(--blanc); }
.famille-bande p { margin: 8px 0 0; font-size: 16px; color: #C9CBE3; }
/* Les boutons gardent leurs couleurs propres dans une zone sombre (§ 3 bis). */
.famille-bande a.btn-blanc { color: var(--marine); }
.famille-bande a.btn-secondaire-sombre { color: var(--blanc); }

@media (max-width: 1000px) {
  .famille-hero { grid-template-columns: 1fr; gap: 28px; }
  .famille-photo { height: 300px; }
  .grille-gammes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .famille-guide { grid-template-columns: 1fr; }
  .famille-guide div {
    border-right: 0;
    margin-right: 0;
    border-bottom: 1px solid var(--filet);
    padding: 20px 0;
  }
  .famille-guide div:last-child { border-bottom: 0; }
}
@media (max-width: 639px) {
  .grille-gammes { grid-template-columns: 1fr; }
  .famille-bande { padding: 28px 22px; }
}
/* Douzieme tuile « Tout le catalogue » : pas de sous-liste, juste une phrase. */
.univers-tout-texte { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texte); }

/* 30. Marché résidentiel : « Vos chantiers résidentiels »
   --------------------------------------------------------------------------
   D'après la maquette validée du 12 octobre 2026
   (reference-catalogue/residentiel-chantiers-corrige.png).

   Ce bloc empruntait la grille des services, qui remplit la largeur par pas de
   240 px : à 1440 px elle donnait CINQ colonnes et les trois cartes
   n'occupaient que les trois cinquièmes du conteneur, sans fond ni lien. D'où
   une grille à elle, de trois colonnes égales. La grille des services n'est
   pas touchée : elle sert aux six pages secteur, au hub Services et au hub
   Marchés, où le nombre de cartes varie. */
.intro-section { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--texte-discret); }
.grille-chantiers {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.carte-chantier { display: flex; flex-direction: column; background: var(--fond-bloc); border-radius: var(--rayon); }
/* ratio déclaré : la photo garde le 3:2 de son fichier à toutes les largeurs */
.carte-chantier > img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-chantier-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 26px 26px;
}
.carte-chantier h3 { font: 600 20px/1.25 var(--police-titre); color: var(--marine); }
.carte-chantier p { font: 400 16px/1.55 var(--police-texte); color: var(--texte); }
/* le lien reste calé en bas, quelle que soit la longueur de la description */
.carte-chantier .lien-action { margin-top: auto; }

@media (max-width: 900px) {
  .grille-chantiers { grid-template-columns: 1fr; }
}

/* 31. Pages secteur : « Nos solutions pour ce secteur »
   --------------------------------------------------------------------------
   D'après la maquette validée du 12 octobre 2026
   (reference-catalogue/solutions-secteur-corrige.png).

   Ce bloc empruntait lui aussi grille-services, dont le remplissage par pas de
   240 px donnait CINQ colonnes pour six cartes : la seconde ligne n'en portait
   qu'une. Carte horizontale, photo à gauche, trois colonnes égales, deux lignes
   pleines. Les six pages secteur sont concernées, et elles seules : le hub
   Services et le hub Marchés gardent grille-services et ses cartes verticales. */
.grille-solutions {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.carte-solution {
  display: flex;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  color: var(--marine);
  text-decoration: none;
}
/* la photo tient toute la hauteur de la carte, quelle que soit la ligne */
.carte-solution-photo { flex: none; width: 150px; overflow: hidden; }
.carte-solution-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-solution-photo .photo-a-venir { height: 100%; min-height: 0; border-radius: 0; }
/* photo détourée sur fond blanc : elle se pose sur le gris, elle ne le remplit pas */
.carte-solution-photo--produit { display: flex; align-items: center; justify-content: center; padding: 12px; }
.carte-solution-photo--produit img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.carte-solution-corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 22px;
}
.carte-solution h3 { font: 600 18px/1.25 var(--police-titre); color: var(--marine); }
.carte-solution p { font: 400 15px/1.5 var(--police-texte); color: var(--texte); }
/* « En savoir plus » est un span : la carte entière porte déjà le lien */
.carte-solution .lien-action { margin-top: auto; }
.carte-solution:hover .lien-action { color: var(--marine); border-color: var(--indigo); }

@media (max-width: 1100px) {
  .grille-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grille-solutions { grid-template-columns: 1fr; }
  /* 150 px de photo ne laisseraient que 164 px de texte sur un écran de
     390 px : chaque mot irait à la ligne. La photo se resserre. */
  .carte-solution-photo { width: 118px; }
  .carte-solution-corps { padding: 16px 18px; }
}

/* 32. Grilles : lignes pleines et respiration sous le titre
   --------------------------------------------------------------------------
   Relevé du 12 octobre 2026 sur les 57 pages. Trois corrections de fond. */

/* Un titre de section suivi directement d'une grille touchait les cartes :
   les sections qui portent une phrase d'introduction avaient leur marge, pas
   les autres. Vu sur « Les pièces à prévoir » (/ouvrir-un-compte/).
   20 px, soit l'espacement que grille-enjeux, grille-etapes et
   grille-avantages portaient déjà : la règle ne déplace que ce qui manquait. */
h2 + [class*="grille-"] { margin-top: 20px; }

/* Hub Marché tertiaire : six secteurs dans une grille de cinq colonnes, donc
   une carte seule sur la seconde ligne. Trois colonnes, deux lignes pleines.
   Cantonné au grand écran : cette règle est écrite après les règles mobiles,
   donc elle les écraserait. Sans ce garde-fou, le hub débordait de 31 px sur
   un téléphone de 360 px, trois colonnes étant imposées jusqu'en bas. */
@media (min-width: 1024px) {
  .grille-services--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Les 7 agences tiennent sur trois colonnes : la septième restait seule.
   Elle prend toute la dernière ligne. Le sélecteur ne vise que ce cas : si la
   liste passait à 6 ou à 9 villes, la règle ne s'appliquerait plus. */
.liste-agences > :nth-child(3n + 1):last-child { grid-column: 1 / -1; }

/* Logos de partenaires sur les pages service : de 2 à 12 selon la page. Dans
   une grille étirée, deux logos prenaient chacun une demi-largeur ; dans une
   grille à colonnes fixes, ils restaient collés à gauche. Tuiles à leur
   largeur normale, et la ligne est centrée. */
@media (min-width: 1024px) {
  /* Tuiles de 190 px au plus : six colonnes dans le conteneur, donc les douze
     logos de la page Reseau & Wi-Fi tiennent en deux lignes pleines, et deux
     ou trois logos restent a leur taille normale, centres. Cantonne au grand
     ecran : sous 1024 px, les regles de la grille normale s'appliquent, et
     elles ont ete validees. */
  .grille-marques--centree { grid-template-columns: repeat(auto-fit, minmax(0, 190px)); justify-content: center; }
}

/* Familles à 4 gammes : quatre colonnes, une ligne pleine. À trois colonnes,
   la quatrième carte restait seule. Concerne Réseau & Wi-Fi, Serveurs &
   stockage et Vidéosurveillance. */
@media (min-width: 1024px) {
  .grille-gammes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 33. Légende du synoptique : la répartition sur trois colonnes
   --------------------------------------------------------------------------
   Le nombre de repères décide du nombre de lignes. La classe est posée par
   partials/bloc-synoptique.njk à partir des données : un synoptique d'un autre
   nombre devra avoir sa règle ici, sinon ses repères se liraient de gauche à
   droite au lieu de haut en bas.

   Tout est sous min-width : sous 900 px la liste reste en une seule colonne,
   dans l'ordre 1 à 13. Écrites dans l'autre sens, les règles de défaite
   auraient dû égaler la force de `:nth-child(n+6):nth-child(-n+9)`, qui porte
   deux pseudo-classes. À force égale, quatre repères restaient en colonne 2 et
   la page débordait de 39 px sur téléphone : vu au contrôle du 13 octobre. */
@media (min-width: 900px) {
  .reperes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }

  /* 9 repères (résidentiel) : 3 + 3 + 3, trois lignes pleines. */
  .reperes-liste--9 { grid-template-rows: repeat(3, auto); grid-auto-flow: column; }

  /* 13 repères (tertiaire) : 5 + 4 + 4. Le flux en colonne sur 5 lignes
     donnerait 5 + 5 + 3, avec une troisième colonne deux lignes plus courte.
     13 ne se divise pas par 3, les deux cases vides sont inévitables : autant
     les répartir. D'où le placement explicite de chaque repère. */
  .reperes-liste--13 { grid-template-rows: repeat(5, auto); }
  .reperes-liste--13 > :nth-child(-n + 5) { grid-column: 1; }
  .reperes-liste--13 > :nth-child(n + 6):nth-child(-n + 9) { grid-column: 2; }
  .reperes-liste--13 > :nth-child(n + 10) { grid-column: 3; }
  .reperes-liste--13 > :nth-child(1),
  .reperes-liste--13 > :nth-child(6),
  .reperes-liste--13 > :nth-child(10) { grid-row: 1; }
  .reperes-liste--13 > :nth-child(2),
  .reperes-liste--13 > :nth-child(7),
  .reperes-liste--13 > :nth-child(11) { grid-row: 2; }
  .reperes-liste--13 > :nth-child(3),
  .reperes-liste--13 > :nth-child(8),
  .reperes-liste--13 > :nth-child(12) { grid-row: 3; }
  .reperes-liste--13 > :nth-child(4),
  .reperes-liste--13 > :nth-child(9),
  .reperes-liste--13 > :nth-child(13) { grid-row: 4; }
  .reperes-liste--13 > :nth-child(5) { grid-row: 5; }
}


/* 34. Bandeau de consentement aux cookies
   --------------------------------------------------------------------------
   Posé en bas d'écran, en position fixe, sur toutes les pages tant que le
   visiteur n'a pas choisi. Carte blanche à filet plutôt que bandeau marine :
   la charte réserve le marine aux grands bandeaux, et il n'en faut qu'un par
   page (§5). Un second aurait fait deux zones sombres sur l'accueil.

   Les deux boutons sont de même taille et de même police : refuser doit être
   aussi simple qu'accepter. */
.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 16px clamp(16px, 3vw, 40px) calc(16px + env(safe-area-inset-bottom));
  background: var(--blanc);
  border-top: 1px solid var(--filet);
  box-shadow: 0 -2px 16px rgba(19, 20, 75, .06);
}
.cookies-corps {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
}
.cookies-texte { flex: 1 1 420px; min-width: 0; }
.cookies-titre { font: 600 16px/1.3 var(--police-titre); color: var(--marine); }
.cookies-texte p + p { margin-top: 4px; }
.cookies-texte p:last-child { font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.cookies-texte a { color: var(--indigo); font-weight: 600; }
.cookies-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.cookies-actions .btn { min-width: 132px; }

/* Sous 600 px, les deux boutons prennent toute la largeur, à parts égales :
   aucun des deux ne doit tomber sous le pouce plus facilement que l'autre. */
@media (max-width: 599px) {
  .cookies-actions { width: 100%; }
  .cookies-actions .btn { flex: 1; min-width: 0; }
}

/* Bouton de la page Cookies, qui rouvre le choix. */
.cookies-rouvrir { margin-top: 10px; }

/* ------------------------------------------------------------------------
   35. Retour en haut de page
   ------------------------------------------------------------------------
   L'en-tête du site n'est pas collante et trois pages dépassent les douze
   écrans de téléphone de la règle (§3 bis) : CGV 18,2, Formation 16,6,
   Câblage cuivre & fibre 13,1. Depuis le bas, il fallait tout remonter au
   doigt pour atteindre le menu.

   EN BAS À GAUCHE : la bulle du chat Brevo occupe le coin bas droit avec un
   z-index très élevé. Posé à droite, ce bouton serait recouvert dès qu'un
   visiteur accepte les cookies.

   LES Z-INDEX SONT VOLONTAIREMENT BAS : 15, donc sous la barre des fiches
   formation (20) et sous le bandeau de consentement (40). Un bouton de confort
   ne doit jamais passer devant un choix à faire ni devant l'action principale
   d'une page.

   Il est en position fixe : il ne déplace rien et ne change donc aucune
   signature de mise en page, bien qu'il s'affiche sur les 58 pages.
   ------------------------------------------------------------------------ */
.haut-de-page {
  position: fixed;
  left: clamp(16px, 3vw, 40px);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 15;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon);
  background: var(--indigo);
  color: var(--blanc);
  text-decoration: none;
}
.haut-de-page:hover { background: var(--marine); color: var(--blanc); }
.haut-de-page[hidden] { display: none; }

/* Tant que le bandeau de consentement est ouvert, il couvre tout le bas de
   l'écran et intercepte les clics : le bouton serait visible mais inactif.
   Un bouton qui ne répond pas est pire qu'un bouton absent, on le retire
   donc le temps que le visiteur réponde. */
body:has(#bandeau-cookies:not([hidden])) .haut-de-page { display: none; }

/* Sur les 13 fiches formation, une barre fixe occupe déjà le bas de l'écran
   sous 600 px. Le bouton se pose au-dessus d'elle, sinon il disparaîtrait
   derrière : la barre porte un z-index plus fort, et c'est voulu. */
@media (max-width: 599px) {
  body:has(.fi-barre) .haut-de-page {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}