/**
 * clr-home.css — nouvelle page d'accueil Clarendis
 *
 * Extrait de la maquette Claude Design du 06/08/2026, qui portait 483 styles
 * inline et aucune classe. Toutes les classes sont préfixées « clr-h- » pour
 * qu'aucune ne puisse entrer en collision avec SafeByte.
 *
 * POLICE — Public Sans, héritée du site. Mesuré le 06/08/2026 : c'est la seule
 * police de texte réellement servie, avec GTWalsheimPro pour les titres du
 * thème. La maquette demandait Archivo, abandonnée : elle n'apporterait qu'une
 * requête réseau de plus. Voir la règle de mesure du brief de chantier.
 *
 * SafeByte impose !important sur padding, margin et max-width — piège 7.
 * Il n'est posé QUE là où c'est nécessaire, jamais par confort.
 *
 * AUCUN SCRIPT. Les onglets et le sélecteur de familles sont des radios
 * masquées pilotant des sélecteurs entre frères. Motif mesuré :
 * optm-js_defer = 1, LiteSpeed diffère le JS pour les visiteurs anonymes
 * seulement — c'est ce qui a fait tomber le carrousel Swiper le 05/08/2026.
 */

.clr-h {
  --bleu:      #164AC8;
  --bleu-f:    #0E3390;
  --bleu-pale: #F1F4FB;
  --encre:     #101114;
  --gris-1:    #4A4D56;
  --gris-2:    #5A5D66;
  --gris-3:    #8A8D96;
  --fond:      #FCFCFB;
  --fond-2:    #F6F7F9;
  --sombre:    #0C0E14;
  --clair:     #F4F4F2;
  --trait:     rgba(16,17,20,.12);
  --trait-f:   rgba(16,17,20,.06);
  --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lg:        1360px;
  --marge:     clamp(20px, 4vw, 48px);

  background: var(--fond);
  color: var(--encre);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* DÉFAUT DE SPÉCIFICITÉ, mesuré à l'écran le 06/08/2026 — à ne pas réintroduire.
   « .clr-h a » vaut 0,1,1 et l'emportait sur « .clr-h-btn » qui vaut 0,1,0 :
   le bouton principal rendait son texte en BLEU SUR FOND BLEU, donc invisible.
   Le défaut touchait par construction TOUS les liens à classe — cartes de cas,
   lignes de publication, liens de secteur sur fond sombre.
   La règle ne vise donc plus que les liens SANS classe ; chaque lien habillé
   porte sa propre couleur. Un simple !important aurait masqué le problème
   sur le seul bouton constaté, en laissant les autres. */
.clr-h a:not([class]) { color: var(--bleu); text-decoration: none; }
.clr-h a:not([class]):hover { color: var(--bleu-f); text-decoration: underline; }
.clr-h a { text-decoration: none; }

.clr-h p { margin: 0; }

/* Le thème parent impose des marges sur les titres : on repart de zéro. */
.clr-h h1, .clr-h h2, .clr-h h3 {
  margin: 0 !important;
  font-family: inherit;
  color: inherit;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.clr-h-sec { max-width: var(--lg) !important; margin: 0 auto !important; padding: 0 var(--marge) !important; }
.clr-h-large { width: 100%; }

/* ── Surtitre : le petit carré bleu + le libellé en capitales espacées ── */
.clr-h-surtitre { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.clr-h-carre { width: 9px; height: 9px; background: var(--bleu); display: block; flex: none; }
.clr-h-surtitre span:last-child {
  font-size: 15px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bleu);
}
.clr-h-sombre .clr-h-surtitre span:last-child { color: #7A93D6; }

/* ── Boutons ── */
.clr-h-btn, .clr-h-btn-2, .clr-h-btn-blanc {
  display: inline-block; font-weight: 600; letter-spacing: .01em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.clr-h-btn { background: var(--bleu); color: #fff; font-size: 15.5px; padding: 15px 30px; }
.clr-h-btn:hover { background: var(--bleu-f); color: #fff; text-decoration: none; }
.clr-h-btn-2 {
  font-size: 15.5px; color: var(--encre); padding: 15px 8px;
  border-bottom: 2px solid var(--encre);
}
.clr-h-btn-2:hover { color: var(--bleu); border-bottom-color: var(--bleu); text-decoration: none; }
.clr-h-btn-blanc { background: #fff; color: var(--bleu); font-size: 16px; padding: 17px 34px; white-space: nowrap; }
.clr-h-btn-blanc:hover { background: #E8EDFA; color: var(--bleu-f); text-decoration: none; }
.clr-h-lien-fort { font-size: 15px; font-weight: 600; color: var(--bleu); }

/* ══════════════ HERO ══════════════ */
.clr-h-hero { padding-top: clamp(48px, 7vw, 96px) !important; padding-bottom: clamp(40px, 5vw, 64px) !important; }
.clr-h-hero-g { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.clr-h-hero .clr-h-surtitre { margin-bottom: 28px; }
.clr-h-hero .clr-h-carre { width: 9px; height: 9px; }

.clr-h-hero h1 {
  margin: 0 0 28px !important;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.02; font-weight: 700; letter-spacing: -.03em;
  text-wrap: balance;
}
.clr-h-hero h1 .clr-h-h1-b { display: block; color: var(--bleu); padding-left: clamp(0px, 5vw, 88px); }
.clr-h-chapo {
  margin: 0 0 40px !important; max-width: 620px !important;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--gris-1);
  text-wrap: pretty;
}
.clr-h-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Visuel abstrait du hero — aucune capture d'outil client, que des formes. */
.clr-h-visuel { position: relative; min-width: 0; }
.clr-h-visuel-ombre { position: absolute; top: 36px; right: -28px; bottom: -28px; left: 36px; background: var(--bleu); opacity: .06; }
.clr-h-fen { position: relative; background: #fff; border: 1px solid var(--trait); box-shadow: 0 40px 90px -30px rgba(12,14,20,.3); }
.clr-h-fen-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(16,17,20,.08); }
.clr-h-pastilles { display: flex; gap: 6px; }
.clr-h-pastilles i { width: 8px; height: 8px; border-radius: 50%; background: #E1E3E8; display: block; }
.clr-h-fen-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gris-3); }
.clr-h-fen-c { display: grid; grid-template-columns: 52px 1fr; }
.clr-h-fen-nav { border-right: 1px solid rgba(16,17,20,.08); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.clr-h-fen-nav i { width: 18px; height: 18px; background: #EBEDF1; display: block; }
.clr-h-fen-nav i:first-child { background: var(--bleu); }
.clr-h-fen-b { padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 22px; }
.clr-h-lignes { display: flex; flex-direction: column; gap: 8px; }
.clr-h-lignes i { display: block; height: 12px; background: #D9DCE2; }
.clr-h-lignes i + i { height: 8px; width: 22%; background: #EBEDF1; }
.clr-h-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.clr-h-tuile { border: 1px solid rgba(16,17,20,.08); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.clr-h-tuile i { display: block; height: 6px; width: 60%; background: #EBEDF1; }
.clr-h-tuile b { display: block; height: 12px; background: #D9DCE2; }
.clr-h-tuile:first-child b { background: var(--bleu); }
.clr-h-barres { display: flex; align-items: flex-end; gap: 10px; height: 110px; border-bottom: 1px solid rgba(16,17,20,.1); }
.clr-h-barres i { flex: 1; display: block; background: #EBEDF1; transform-origin: bottom; animation: clr-h-monte .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes clr-h-monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── Bandeau livre blanc à la une ── */
.clr-h-une {
  margin-top: clamp(40px, 5vw, 64px) !important;
  background: var(--bleu-pale);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3.5vw, 48px) !important;
}
.clr-h-une-vig { width: 112px; flex: none; position: relative; align-self: center; }
.clr-h-une-vig-o { position: absolute; top: 10px; left: 10px; right: -10px; bottom: -10px; background: var(--bleu); opacity: .14; }
/* LA VIGNETTE SUIT LE FORMAT DE SON IMAGE — corrigé le 07/08/2026.
   Le cadre imposait aspect-ratio 3/4, un format de COUVERTURE en portrait, avec
   object-fit: cover. Le contenu à la une étant désormais de tous types, l'image
   servie était un visuel d'en-tête en PAYSAGE — 1080 × 720, rapport 1,500 — que
   le cadre 0,750 recadrait en coupant un quart de la largeur de chaque côté :
   on lisait « obligation » au lieu de « De l'obligation à l'architecture ».
   Sans rapport imposé, l'image garde le sien : 112 × 75 pour un visuel paysage,
   112 × 149 pour une vraie couverture portrait. Les deux formats fonctionnent,
   et aucun texte n'est plus coupé. Ne pas y remettre d'aspect-ratio. */
.clr-h-une-vig-i { position: relative; display: block; width: 100%; height: auto; object-fit: cover; box-shadow: 0 20px 40px -18px rgba(12,14,20,.3); background: #fff; }
.clr-h-une-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clr-h-une-meta .clr-h-carre { width: 10px; height: 10px; }
.clr-h-une-lbl { font-size: 15px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--bleu); }
.clr-h-une-date { font-size: 14.5px; font-weight: 500; color: var(--gris-2); }
.clr-h-une-titre {
  font-size: clamp(19px, 2.1vw, 28px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.25; text-wrap: balance; margin-top: 12px; max-width: 640px;
  color: var(--encre); display: block;
}
a.clr-h-une-titre:hover { color: var(--bleu); text-decoration: none; }
.clr-h-une .clr-h-btn { font-size: 14.5px; padding: 14px 26px; white-space: nowrap; }

/* ── Lame : l'espacement vertical d'une section de contenu ──
   DÉFAUT MESURÉ LE 07/08/2026, signalé par Cédric. « Références » et « Publié
   récemment » portaient leur padding en style INLINE. Or .clr-h-sec pose
   « padding: 0 var(--marge) !important » — piège 7, SafeByte impose
   !important — et un !important de feuille bat un style inline sans !important.
   Les deux lames étaient donc mesurées à 0 px au lieu de 80. Un relevé de
   couleurs ou de comptage de balises ne l'aurait jamais vu : seule la mesure
   du padding rendu le montre. */
.clr-h-lame {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* La vignette « à la une » porte maintenant une vraie image : tous les types
   ne rangent pas la leur au même endroit — les livres blancs utilisent
   _clr_img_url, jamais l'image à la une. Voir clr_h_vignette(). */
.clr-h-une-vig { display: block; text-decoration: none; }
.clr-h-une-vig-o { display: block; }
.clr-h-une-vig-vide { background: #fff; }
.clr-h-une-vig-i { object-position: center top; }

/* ══════════════ TITRES DE SECTION ══════════════ */
.clr-h-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 48px);
}
.clr-h-tete h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; }
.clr-h-compte { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--gris-2); text-transform: uppercase; }

/* ══════════════ FAMILLES DE SOLUTIONS ══════════════ */
.clr-h-fam { padding-top: clamp(40px, 5vw, 64px) !important; padding-bottom: clamp(48px, 6vw, 80px) !important; }
/* La lame a TROIS blocs : la liste des familles, les panneaux, puis le
   complément (note + encart). Leur ordre dans le DOM est celui qu'il faut en
   UNE colonne ; en deux colonnes, la grille replace le complément sous la
   liste, à gauche.

   DÉFAUT CORRIGÉ LE 07/08/2026, signalé par Cédric : la note et l'encart
   vivaient dans la colonne de gauche. Sur mobile ils s'intercalaient donc
   entre la liste des familles et l'écran, et le lien « Explorer la famille »
   n'était atteignable qu'après un contenu secondaire. */
.clr-h-fam-g {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: auto auto;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.clr-h-fam-liste    { grid-column: 1; grid-row: 1; }
.clr-h-fam-panneaux { grid-column: 2; grid-row: 1 / span 2; }
.clr-h-fam-plus     { grid-column: 1; grid-row: 2; margin-top: -24px; }
.clr-h-fam-liste { border-top: 1px solid rgba(16,17,20,.14); }

/* Les radios pilotent l'affichage : aucun JavaScript. */
.clr-h-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.clr-h-fam-lbl {
  display: flex; align-items: baseline; gap: 22px; width: 100%;
  border-bottom: 1px solid rgba(16,17,20,.14); padding: 24px 4px; cursor: pointer;
  transition: background .15s ease;
}
.clr-h-fam-lbl:hover { background: var(--fond-2); }
.clr-h-fam-num { font-family: var(--mono); font-size: 13px; color: #9A9DA6; }
.clr-h-fam-titre { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--encre); }
.clr-h-fam-fl { margin-left: auto; font-size: 20px; color: var(--bleu); opacity: 0; }
.clr-h-radio:checked + .clr-h-fam-lbl .clr-h-fam-num,
.clr-h-radio:checked + .clr-h-fam-lbl .clr-h-fam-titre { color: var(--bleu); }
.clr-h-radio:checked + .clr-h-fam-lbl .clr-h-fam-fl { opacity: 1; }
/* Le focus clavier doit rester visible : l'accessibilité prime sur l'esthétique. */
.clr-h-radio:focus-visible + .clr-h-fam-lbl { outline: 2px solid var(--bleu); outline-offset: -2px; }

.clr-h-fam-note { margin: 0 4px 0 !important; font-size: 14.5px; line-height: 1.55; color: var(--gris-3); max-width: 380px !important; }
.clr-h-encart { display: flex; gap: 14px; align-items: baseline; margin: 24px 0 0 !important; padding: 18px 20px !important; background: var(--bleu-pale); }
.clr-h-encart .clr-h-carre { transform: translateY(1px); }
.clr-h-encart p { font-size: 15px; line-height: 1.55; color: var(--encre); }

.clr-h-fam-panneaux { background: #fff; border: 1px solid var(--trait); box-shadow: 0 36px 80px -44px rgba(12,14,20,.3); }
.clr-h-panneau { display: none; }
.clr-h-panneau-c { padding: clamp(22px, 2.5vw, 32px); }
.clr-h-panneau-desc { margin: 22px 0 0 !important; font-size: 15.5px; line-height: 1.55; color: var(--gris-1); max-width: 520px !important; }
.clr-h-panneau-fams { margin-top: 16px; font-size: 14.5px; font-weight: 500; color: #3A3D45; line-height: 1.7; }
.clr-h-panneau-lien { display: inline-block; margin-top: 22px; font-size: 14.5px; font-weight: 600; }
.clr-h-nb { font-family: var(--mono); font-size: 12px; color: var(--bleu); letter-spacing: .06em; }

/* Chaque radio montre son panneau. Les sélecteurs sont générés par le gabarit
   pour rester au nombre exact de pôles : aucune règle en trop, aucune en moins. */

/* Aperçu abstrait dans le panneau — formes seules, jamais de capture. */
.clr-h-apercu { display: flex; flex-direction: column; gap: 10px; }
.clr-h-apercu-l { display: grid; grid-template-columns: 3fr 2fr 1fr; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--trait-f); }
.clr-h-apercu-l:first-child { padding-bottom: 10px; border-bottom: 1px solid rgba(16,17,20,.1); }
.clr-h-apercu-l i { display: block; height: 8px; background: #EBEDF1; }
.clr-h-apercu-l:first-child i { height: 7px; background: #D9DCE2; }
.clr-h-apercu-l b { display: block; width: 44px; height: 18px; border: 1px solid rgba(16,17,20,.14); }
.clr-h-apercu-l:nth-child(2) b { background: var(--bleu); border-color: var(--bleu); }

/* ══════════════ SECTEURS — bandeau sombre ══════════════ */
.clr-h-sombre {
  background: var(--sombre); color: var(--clair);
  background-image: linear-gradient(rgba(244,244,242,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(244,244,242,.035) 1px, transparent 1px);
  background-size: 96px 96px;
}
.clr-h-sombre .clr-h-sec { padding-top: clamp(48px, 6vw, 80px) !important; padding-bottom: clamp(48px, 6vw, 80px) !important; }
.clr-h-sec-g { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); }
.clr-h-sombre h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.1; text-wrap: balance; margin-bottom: 24px !important; }
.clr-h-sombre-p { font-size: 16px; line-height: 1.6; color: #A6A9B3; max-width: 420px !important; text-wrap: pretty; }
.clr-h-sombre-lien {
  display: inline-block; margin-top: 36px; font-size: 15px; font-weight: 600;
  color: var(--clair); border-bottom: 2px solid var(--bleu); padding-bottom: 6px;
}
.clr-h-sombre-lien:hover { color: #7A93D6; border-bottom-color: #7A93D6; text-decoration: none; }
.clr-h-secteurs { columns: 2; column-gap: clamp(24px, 3vw, 48px); align-self: center; }
.clr-h-secteur {
  break-inside: avoid; display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 13px 2px; border-bottom: 1px solid rgba(244,244,242,.14);
  font-size: 16px; font-weight: 500; color: var(--clair);
}
.clr-h-secteur:hover { color: #7A93D6; text-decoration: none; }
/* ⚠ DÉFAUT VU À L'ÉCRAN LE 07/08/2026, signalé par Cédric.
   Cette règle visait « .clr-h-secteur span », donc TOUS les span de la ligne —
   le NOM du secteur autant que la flèche. Les noms rendaient en monospace 11 px
   et en #5A5D66, soit un contraste de 2,93 sur le fond sombre : sous le seuil
   d'accessibilité, et visiblement gris foncé à l'écran.
   Dans la maquette, ce style était INLINE sur la seule flèche.

   ⚠ ET MA PREMIÈRE MESURE NE L'A PAS VU : relevée sur le <a>, elle donnait
   17,52 — la couleur du lien, pas celle du texte réellement affiché, qui vit
   dans l'enfant. C'est la capture d'écran qui a tranché. Mesurer la couleur
   de l'élément QUI PORTE LE TEXTE, jamais celle de son conteneur. */
.clr-h-secteur > span:first-child { color: var(--clair); }
.clr-h-secteur > span:last-child {
  font-family: var(--mono); font-size: 11px;
  color: #9CA0AB;   /* contraste 6,9 sur #0C0E14, contre 2,93 auparavant */
}
.clr-h-secteur-plus { break-inside: avoid; padding: 13px 2px; font-size: 15px; color: #A6A9B3; }

/* ══════════════ CAS CLIENTS ══════════════ */
/* Une GRILLE, pas un carrousel — même arbitrage que les portfolios le
   05/08/2026 : hors JavaScript, l'initialisation d'un carrousel dépend de
   l'ordre de chargement des scripts, que optm-js_defer rend imprévisible. */
.clr-h-cas-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); }
.clr-h-cas { display: flex; flex-direction: column; gap: 20px; color: inherit; }
.clr-h-cas:hover { color: var(--bleu); text-decoration: none; }
.clr-h-cas-v { background: #fff; border: 1px solid var(--trait); box-shadow: 0 24px 60px -28px rgba(12,14,20,.22); }
.clr-h-cas-v-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(16,17,20,.08); }
.clr-h-cas-v-t .clr-h-pastilles i { width: 7px; height: 7px; }
.clr-h-cas-v-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--gris-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clr-h-cas-v-c { padding: 22px; height: 158px; display: flex; flex-direction: column; gap: 11px; justify-content: center; overflow: hidden; }
.clr-h-cas-v-c i { display: block; height: 8px; background: #EBEDF1; }
.clr-h-cas-v-c b { display: block; height: 8px; background: #D9DCE2; }
.clr-h-cas-r { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.clr-h-cas-r:last-child { border-top: 1px solid rgba(16,17,20,.12); padding-top: 12px; }
.clr-h-cas-r:last-child i, .clr-h-cas-r:last-child b { background: var(--bleu); height: 9px; }
.clr-h-cas-sec { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--bleu); text-transform: uppercase; margin-bottom: 8px; display: block; }
.clr-h-cas h3 { font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; }
.clr-h-cas-rep { margin-top: 12px; display: flex; gap: 12px; align-items: baseline; }
.clr-h-cas-rep-l { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); flex: none; }
.clr-h-cas-rep-t { font-size: 14.5px; color: var(--gris-1); line-height: 1.5; }

/* Cadre d'un écran d'illustration dans une carte de cas client. Il remplace
   .clr-h-cas-v : l'écran porte sa propre barre de titre et son propre cadre,
   en poser un second ferait un double liseré. */
.clr-h-cas-e { display: block; }
.clr-h-cas-e .clr-x { box-shadow: 0 24px 60px -28px rgba(12,14,20,.22); }

/* Dans le hero, l'écran remplace la fenêtre factice : même ombre portée. */
.clr-h-visuel .clr-x { box-shadow: 0 40px 90px -30px rgba(12,14,20,.3); }

/* Dans un panneau de famille, le panneau porte déjà bordure et ombre. */
.clr-h-panneau .clr-x { border: 0; box-shadow: none; }
.clr-h-panneau-c { padding-top: 0 !important; }

/* ── CARROUSEL DES CAS CLIENTS — repris de la maquette le 07/08/2026 ──
 *
 * Il remplace la grille fixe que j'avais posée le 06/08 en invoquant le
 * carrousel Swiper tombé le 05/08. C'ÉTAIT UNE MAUVAISE LECTURE DU PRÉCÉDENT :
 * ce qui avait échoué, c'était un carrousel dont l'AFFICHAGE dépendait d'un
 * script tiers chargé en différé — sans lui, le bloc restait vide sur 488 px.
 *
 * Ici, rien de tel. Le défilement est natif : overflow-x + scroll-snap, donc
 * il fonctionne au doigt, au trackpad et au clavier MÊME SI AUCUN SCRIPT NE
 * S'EXÉCUTE. Le script n'ajoute que les deux flèches, et il agit au clic, pas
 * au défilement. Le pire cas est donc deux boutons inertes, jamais un bloc vide.
 *
 * scroll-snap-type est sur l'axe X seulement : le défilement vertical de la
 * page n'est pas capté, contrairement au conteneur à overflow-y écarté
 * définitivement le 05/08/2026.
 */
.clr-h-cas-piste {
  display: flex; gap: clamp(20px, 2.5vw, 28px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;   /* pas de navigation arrière au glissement */
}
.clr-h-cas-piste::-webkit-scrollbar { display: none; }
.clr-h-cas-piste > .clr-h-cas {
  flex: 0 0 min(560px, 82%);
  scroll-snap-align: start;
}
.clr-h-cas-nav { display: flex; gap: 12px; margin-top: 24px; }
/* ⚠ !important OBLIGATOIRE ICI, et ce n'est pas du confort. Mesuré à l'écran
   le 07/08/2026 : SafeByte impose à tout <button> un fond #164AC8, un
   border-radius de 56px, border:0, color:#fff et 56×56 px. Les flèches
   rendaient donc en pastilles bleues pleines au lieu des carrés à liseré fin
   de la maquette — TOUTES mes déclarations étaient écrasées, pas seulement
   padding/margin/max-width comme l'annonce le piège 7.
   Le contrôle qui l'établit est getComputedStyle, pas la lecture de la règle. */
.clr-h-cas-fl {
  width: 52px !important; height: 52px !important; flex: none;
  border: 1px solid rgba(16,17,20,.25) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--encre) !important;
  font-size: 18px; cursor: pointer; font-family: inherit;
  box-shadow: none !important;
  /* le padding du thème s'ajoutait à la largeur : 58 px mesurés pour 52 posés */
  padding: 0 !important; box-sizing: border-box !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.clr-h-cas-fl:hover {
  border-color: var(--bleu) !important; color: var(--bleu) !important;
  background: transparent !important;
}
.clr-h-cas-fl:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .clr-h-cas-piste { scroll-behavior: auto; } }

/* ══════════════ INTERLOCUTEUR UNIQUE ══════════════ */
.clr-h-inter { border-top: 1px solid rgba(16,17,20,.1); border-bottom: 1px solid rgba(16,17,20,.1); background: var(--fond-2); }
.clr-h-inter .clr-h-sec { padding-top: clamp(48px, 6vw, 80px) !important; padding-bottom: clamp(48px, 6vw, 80px) !important; }
.clr-h-inter-g { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.clr-h-inter h2 { font-size: clamp(28px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.clr-h-inter h2 span { color: var(--bleu); }
.clr-h-inter-p { margin: 28px 0 0 !important; font-size: 17px; line-height: 1.6; color: var(--gris-1); max-width: 480px !important; text-wrap: pretty; }
.clr-h-visages { margin-top: 40px; display: flex; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--trait); padding: 20px 24px !important; max-width: 480px !important; box-shadow: 0 20px 48px -24px rgba(12,14,20,.2); }
.clr-h-visages-i { display: flex; flex: none; }
.clr-h-visage { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16,17,20,.1); display: block; position: relative; flex: none; background: #F1F3F7; }
.clr-h-visage + .clr-h-visage { margin-left: -26px; }
/* CALAGE DES PORTRAITS — les valeurs de la MAQUETTE, une par visage.
   Deux défauts se sont succédé au même endroit, tous deux vus à l'écran :
   1. la maquette calait par décalage fixe ; appliqué aux deux portraits sans
      distinction, il poussait les visages hors du cadre — cercles vides ;
   2. object-fit:cover avec object-position « center 22% » remplissait bien le
      cercle, mais coupait le HAUT du portrait de Cédric, donc sa tête.
   La cause commune : les deux images n'ont pas le même rapport — Anna
   498×501 (0,994), Cédric 690×1035 (0,667). Un réglage unique ne peut pas
   convenir aux deux. On reprend donc les pourcentages de la maquette, qui sont
   calculés par visage, et qui restent valables quelle que soit la taille
   WordPress servie puisque le rapport, lui, ne change pas.
   NE PAS remplacer par un object-fit « générique » : c'est ce qui a coupé la
   tête. */
.clr-h-visage img {
  position: absolute; display: block; max-width: none !important;
  width: 170%; left: -35%; top: -8%;      /* valeur de repli */
}
.clr-h-visage-anna-hoang img      { width: 180%; left: -40%; top: -8%; }
.clr-h-visage-cedric-guittard img { width: 160%; left: -30%; top: -8%; }
.clr-h-visages-t { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.clr-h-visages-d { font-size: 13.5px; color: var(--gris-2); margin-top: 3px; line-height: 1.5; }
.clr-h-visages-m { font-family: var(--mono); font-size: 12px; color: var(--bleu); margin-top: 8px; }

.clr-h-etape { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--trait); }
.clr-h-etape:last-child { border-bottom: 0; }
.clr-h-etape-n { font-family: var(--mono); font-size: 13px; color: var(--bleu); padding-top: 3px; }
.clr-h-etape h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.clr-h-etape p { font-size: 15px; color: var(--gris-2); line-height: 1.55; margin-top: 6px !important; }

/* ══════════════ PUBLIÉ RÉCEMMENT ══════════════ */
.clr-h-onglets { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 24px; font-size: 14px; }
.clr-h-onglet {
  font-weight: 500; color: var(--gris-3); padding-bottom: 5px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.clr-h-onglet:hover { color: var(--encre); }
.clr-h-liste { border-top: 1px solid var(--trait); }
.clr-h-ligne {
  display: grid; grid-template-columns: 128px 170px 130px 1fr; gap: 20px;
  align-items: center; padding: 16px 2px; border-bottom: 1px solid var(--trait); color: inherit;
}
.clr-h-ligne:hover { color: var(--bleu); text-decoration: none; }
.clr-h-ligne-v { width: 128px; height: 76px; display: block; overflow: hidden; background: #F1F3F7; }
.clr-h-ligne-v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clr-h-ligne-v-vide { display: flex; align-items: center; justify-content: center; background: var(--bleu-pale); }

/* Vignette des sujets de forum. Le SVG remplit la vignette et « meet » garantit
   qu'il s'y inscrit sans déformation, quel que soit le rapport du cadre —
   128×76 au-dessus de 720 px, 96×60 en dessous. */
.clr-h-svg-forum { display: block; width: 100%; height: 100%; }
.clr-h-ligne-v-vide i { width: 26px; height: 20px; border-radius: 5px; background: var(--bleu); display: block; opacity: .55; }
.clr-h-ligne-d { font-family: var(--mono); font-size: 13px; color: var(--gris-2); }
.clr-h-ligne-t { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); }
.clr-h-ligne-h { font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.clr-h-note { margin-top: 20px !important; font-size: 13px; color: var(--gris-3); }

/* ══════════════ CADRE DES APERÇUS D'INTERFACE ══════════════
   Repris de clr-ecrans.css le 07/08/2026, quand les onze écrans sont devenus
   des IMAGES : cette feuille de 139 Ko n'a plus lieu d'être, seul le cadre
   subsiste. Voir inc/clr-ecrans.php. */
.clr-x { width: 100%; background: #fff; border: 1px solid var(--trait);
         box-shadow: 0 24px 60px -28px rgba(12,14,20,.22); overflow: hidden; }
/* LA BARRE DE TITRE SE DÉTACHE DE L'APERÇU — corrigé le 07/08/2026.
   Elle était blanche sur une image dont le haut est blanc lui aussi, et le
   trait de séparation à 8 % d'opacité ne se voyait pas : la légende paraissait
   POSÉE SUR le tableau de bord, au point de sembler en masquer le haut. Le
   défaut sautait aux yeux dans le hero, où la description tient sur deux lignes
   et occupe le quart du bloc, contre une seule ligne ailleurs.
   Mesuré avant correction : aucun chevauchement géométrique — légende et image
   ne se recouvrent d'aucun pixel, dans le hero comme dans les autres blocs.
   C'était une illusion de contraste, pas un défaut de position ; le fond teinté
   et le trait plus marqué la lèvent. La règle vaut pour les onze aperçus :
   les séparer dans le seul hero l'aurait désaligné du reste de la page. */
.clr-x-t { display: flex; align-items: center; justify-content: space-between;
           gap: 12px; padding: 12px 16px;
           background: var(--fond-2);
           border-bottom: 1px solid rgba(16,17,20,.14);
           flex-wrap: wrap; }
.clr-x-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
             color: var(--gris-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clr-x-desc { flex-basis: 100%; font-size: 12.5px; line-height: 1.45;
              color: var(--gris-2); margin-top: 6px; }
/* L'image porte le rapport de l'écran : aucune boîte à dimensionner à la main,
   et aucun décalage de mise en page au chargement — width et height sont sur
   la balise. */
.clr-x-c { position: relative; width: 100%; }
.clr-x-c picture, .clr-x-c img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .clr-x-desc { font-size: 12px; } }

/* ══════════════ QUESTIONS FRÉQUENTES ══════════════
   <details>/<summary> : le dépliage est natif, sans une ligne de JavaScript.
   ⚠ LE TEXTE DES RÉPONSES EST DANS LE DOM MÊME REPLIÉ, et c'est voulu : Google
   l'indexe, et le visiteur y accède d'un clic. Ce n'est pas du contenu masqué —
   un accordéon est un motif d'interface reconnu, à la différence d'un texte
   qu'aucune action ne peut révéler. */
.clr-h-faq { border-top: 1px solid var(--trait); max-width: 860px; }
.clr-h-faq-i { border-bottom: 1px solid var(--trait); }
.clr-h-faq-q {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 2px; cursor: pointer; list-style: none;
}
.clr-h-faq-q::-webkit-details-marker { display: none; }
.clr-h-faq-q h3 {
  font-size: clamp(17px, 1.7vw, 20px) !important; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.35; flex: 1;
}
.clr-h-faq-q::after {
  content: "+"; flex: none; font-size: 22px; line-height: 1;
  color: var(--bleu); transition: transform .15s ease;
}
.clr-h-faq-i[open] .clr-h-faq-q::after { content: "−"; }
.clr-h-faq-i:hover .clr-h-faq-q h3 { color: var(--bleu); }
.clr-h-faq-q:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
.clr-h-faq-r { padding: 0 38px 24px 2px; }
.clr-h-faq-r p { font-size: 16px; line-height: 1.6; color: var(--gris-1); max-width: 700px !important; }

/* ══════════════ APPEL À L'ACTION ══════════════ */
.clr-h-cta { background: var(--bleu); color: #fff; position: relative; overflow: hidden; }
.clr-h-cta-fond {
  position: absolute; left: 0; right: 0; bottom: -.28em;
  font-size: clamp(120px, 20vw, 300px); font-weight: 700; letter-spacing: -.05em;
  line-height: 1; color: rgba(255,255,255,.055); white-space: nowrap;
  pointer-events: none; user-select: none;
}
.clr-h-cta .clr-h-sec {
  position: relative; padding-top: clamp(44px, 5.5vw, 72px) !important;
  padding-bottom: clamp(44px, 5.5vw, 72px) !important;
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between;
}
.clr-h-cta h2 { margin: 0 0 16px !important; font-size: clamp(26px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.clr-h-cta-p { font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,.75); }
.clr-h-cta-t { max-width: 640px !important; }

/* ── LAME BLANCHE VIDE ENTRE LE CTA ET LE PIED DE PAGE ──
   Mesuré le 07/08/2026 : le conteneur du thème qui enveloppe le contenu porte
   « padding-bottom: 120px ». Sur une page dont la dernière section est une lame
   pleine largeur en aplat bleu, ce padding se voyait comme une bande blanche
   de 120 px avant le pied de page.

   On ne touche pas au thème : la règle ne vise que le parent direct de .clr-h,
   qui n'existe que sur cette page. Les autres gabarits gardent leur espacement.
   Sans :has(), le padding reste — écart cosmétique, jamais un défaut de
   contenu. */
:has(> .clr-h) { padding-bottom: 0 !important; }

/* ══════════════ ADAPTATIF ══════════════ */
@media (max-width: 1100px) {
  .clr-h-cas-g { grid-template-columns: repeat(2, 1fr); }
}
/* ── LES APERÇUS DES CAS S'ALIGNENT ENTRE CARTES — corrigé le 07/08/2026 ──
   Deux défauts, une seule cause : le libellé de la barre de titre est en
   `white-space: nowrap` et mesure de 197 à 284 px selon l'écran.

   1. Il imposait sa largeur à la carte : `min-width:auto`, valeur par défaut
      d'un élément flex, laisse le contenu l'emporter sur `flex-basis`. Une
      carte sur six faisait 318 px au lieu de 308, et décalait toutes les
      suivantes — le calage du défilement tombait à côté.
   2. Il faisait passer la barre de deux à trois lignes quand il ne tenait plus
      à côté des pastilles. Les images commençaient alors à 97 px sur quatre
      cartes et à 117 px sur deux : d'une carte à l'autre, elles ne partaient
      pas de la même hauteur.

   La barre passe donc en GRILLE plutôt qu'en flex. Une grille ne peut pas
   replier ses éléments : pastilles et libellé occupent la première ligne quoi
   qu'il arrive, la description la seconde. La hauteur devient structurellement
   constante, sans dépendre de la longueur du libellé — là où un simple
   ajustement de taille de police n'aurait tenu que jusqu'au prochain libellé
   plus long. `minmax(0, 1fr)` et l'ellipse bornent ce libellé au lieu de le
   laisser pousser la carte. */
@media (max-width: 720px) {
  .clr-h-cas-piste > .clr-h-cas { flex-basis: 88%; min-width: 0; }
  .clr-h-cas .clr-x-t {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; column-gap: 10px; row-gap: 6px;
  }
  .clr-h-cas .clr-x-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .clr-h-cas .clr-x-desc { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .clr-h-hero-g { grid-template-columns: 1fr; }
  .clr-h-fam-g { grid-template-columns: 1fr; grid-template-rows: none; gap: 32px; }
  /* Une colonne : l'ordre du DOM reprend la main — liste, écran, complément. */
  .clr-h-fam-liste, .clr-h-fam-panneaux, .clr-h-fam-plus {
    grid-column: 1; grid-row: auto; margin-top: 0;
  }
  .clr-h-sec-g { grid-template-columns: 1fr; gap: 40px; }
  .clr-h-inter-g { grid-template-columns: 1fr; gap: 40px; }
  .clr-h-une { grid-template-columns: auto 1fr; }
  .clr-h-une .clr-h-btn { grid-column: 1 / -1; justify-self: start; }
  .clr-h-ligne { grid-template-columns: 110px 150px 1fr; }
  .clr-h-ligne-t { grid-column: 2; grid-row: 2; }
  .clr-h-ligne-h { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 720px) {
  /* L'APERÇU DU HERO RESTE VISIBLE — corrigé le 07/08/2026.
     Il était masqué par un `display:none` hérité de la maquette, où le visuel
     était une décoration abstraite. C'est désormais l'illustration du premier
     écran : le masquer laissait la page s'ouvrir sur du texte seul.

     Son ombre décalée, elle, est bien retirée : `right:-28px` sur une marge de
     20 px produirait 8 px de débordement horizontal. C'est ce débordement qui
     avait probablement motivé le masquage — on retire la cause, pas l'image. */
  .clr-h-visuel { margin-top: 40px; }
  .clr-h-visuel-ombre { display: none; }

  .clr-h-cas-g { grid-template-columns: 1fr; }
  .clr-h-secteurs { columns: 1; }
  .clr-h-une { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
  .clr-h-une-vig { display: none; }

  /* LE BANDEAU « À LA UNE » PASSE BORD À BORD — corrigé le 07/08/2026.
     Encadré, il commençait à la marge de page et ajoutait son propre padding :
     son bouton tombait à 44 px quand tous les autres boutons de la page sont à
     20 px. Le décalage se voyait, les deux boutons étant l'un sous l'autre.
     En pleine largeur, le padding du bloc REMPLACE la marge de page au lieu de
     s'y ajouter, et le contenu retrouve l'alignement commun. Aucune valeur en
     dur : on reprend `--marge`, celle-là même qu'appliquent les sections. */
  .clr-h-une {
    margin-inline: calc(-1 * var(--marge)) !important;
    padding-inline: var(--marge) !important;
  }
  .clr-h-ligne { grid-template-columns: 96px 1fr; gap: 6px 14px; }
  .clr-h-ligne-v { width: 96px; height: 60px; grid-row: 1 / span 3; }
  .clr-h-ligne-d, .clr-h-ligne-t, .clr-h-ligne-h { grid-column: 2; grid-row: auto; }
  .clr-h-onglets { gap: 18px; }
  .clr-h-visages { flex-direction: column; align-items: flex-start; }
}

/* Respect du réglage système : pas d'animation si l'utilisateur n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .clr-h-barres i { animation: none; }
  .clr-h *, .clr-h *::before, .clr-h *::after { transition-duration: .01ms !important; }
}

/* ══════════════ RÉFÉRENCES NOMMÉES ══════════════
   Bloc posé le 07/08/2026. EXCEPTION tracée à la règle de confidentialité :
   ces clients ont donné leur accord écrit. Le carrousel de cas reste anonyme. */
.clr-h-refs { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--trait); }
.clr-h-refs-t {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris-2); margin-bottom: 24px !important;
}
.clr-h-refs-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); }
.clr-h-ref { display: flex; flex-direction: column; color: var(--encre); }
.clr-h-ref:hover { color: var(--bleu); text-decoration: none; }
.clr-h-ref-v {
  display: block; aspect-ratio: 16/9; overflow: hidden;
  background: var(--fond-2); border: 1px solid var(--trait); margin-bottom: 16px;
}
.clr-h-ref-v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clr-h-ref-m { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.clr-h-ref-sec {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bleu);
}
.clr-h-ref-ville { font-size: 13px; color: var(--gris-3); }
.clr-h-ref-ville::before { content: "· "; }
.clr-h-ref-n { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.02em; }
.clr-h-ref-d { font-size: 14.5px; line-height: 1.5; color: var(--gris-1); margin-top: 8px; }

/* La carte à deux portraits — son HTML manquait à la première écriture.
   DÉFAUT VU À L'ÉCRAN LE 07/08/2026 : les trois lignes sont des <span>, donc
   inline par défaut, et le titre coulait dans la description sans retour.
   Les régler en block plutôt que changer les balises : une carte dont la
   lisibilité dépend du type d'élément se casserait au premier refactor HTML. */
.clr-h-visages-c { min-width: 0; display: block; }
.clr-h-visages-t, .clr-h-visages-d, .clr-h-visages-m { display: block; }

@media (max-width: 1100px) { .clr-h-refs-g { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .clr-h-refs-g { grid-template-columns: 1fr; } }

/* ══════════════ TRIO D'ACCUEIL — 04/09/2026 ══════════════
   Trois colonnes au gabarit IDENTIQUE : un favori fixe, deux sliders
   automatiques. L'uniformité est la contrainte centrale de ce bloc.

   ⚠ LE CONTENEUR GARDE LA CLASSE .clr-h-une. Il hérite du fond, du padding et
     du passage bord à bord sous 720 px, qui restent justes. Seule la grille
     change, reprise en `.clr-h-une.clr-h-trio` : spécificité (0,2,0) contre
     (0,1,0), les règles de grille existantes de .clr-h-une sont donc battues à
     toutes les largeurs SANS qu'aucune n'ait à être modifiée.

   ⚠ COMMENT LES TROIS COLONNES TIENNENT LA MÊME HAUTEUR, dans l'ordre :
     align-items:stretch sur la grille, puis height:100% sur chaque maillon —
     colonne, piste, diapositive, carte. Rompre UN SEUL de ces maillons suffit
     à faire diverger les hauteurs. Le bouton est poussé en bas par
     margin-top:auto ; c'est ce qui aligne son bord supérieur d'une colonne à
     l'autre, à condition que tout ce qui le précède ait la même hauteur — d'où
     la boîte média à rapport fixe et le titre tronqué à un nombre de lignes
     fixe. Ces trois pièces vont ensemble.

   ⚠ LA BARRE DE NAVIGATION EXISTE DANS LES TROIS COLONNES, même vide dans la
     première. C'est délibéré : sans elle, la colonne 1 serait plus courte de
     sa hauteur et les boutons ne tomberaient plus sur la même ligne.

   ⚠ LE DÉBORDEMENT EST INTERNE À LA PISTE, et les min-width:0 le garantissent.
     Sans eux, une piste plus large que sa colonne pousse la grille et sort une
     barre horizontale sur le DOCUMENT : une piste `1fr` prend pour minimum la
     largeur de son contenu, pas zéro.

   ⚠ AUCUNE TRANSITION, AUCUNE ANIMATION CSS ici. Le défilement doux vient de
     scrollTo({behavior:'smooth'}), comportement natif du navigateur, et il est
     désactivé sous prefers-reduced-motion par le script. */
.clr-h-une.clr-h-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(20px, 2.5vw, 36px);
}

/* ⚠ LA COLONNE « À LA UNE » EST ÉPINGLÉE EN PREMIÈRE POSITION, TOUJOURS.
   Sixième occurrence du piège de l'épinglage, et la plus visible : le hissage
   sectoriel donne `order:-20` à la colonne du marché, et « À TÉLÉCHARGER »
   passait alors devant « À LA UNE » — un intitulé qui dit sa fonction et qui
   ne veut plus rien dire en deuxième position. Vu à l'écran par Cédric le
   13/09/2026 avec un profil hôtellerie.
   ⚠ `-100` et non `-21` : c'est la valeur d'épinglage déjà employée par
   `.slr-res-section > .slr-res-cat`, et elle passe sous TOUTE règle du
   dispositif, qui descend à -20. Ne pas la remonter.
   ⚠ La règle est SERVIE À TOUT LE MONDE, sans condition de profil : elle ne
   doit pas dépendre d'une feuille injectée en JavaScript, sinon une règle
   d'ordre future la battrait en silence.
   Le hissage joue donc sur les DEUX AUTRES colonnes, jamais sur celle-ci. */
.clr-h-une.clr-h-trio > .clr-h-trio-prem { order: -100; }

/* La chaîne de hauteur : colonne → piste → diapositive → carte. */
.clr-h-trio-col { display: flex; flex-direction: column; min-width: 0; }
.clr-h-trio-col .clr-h-une-meta { margin: 0 0 12px; }
.clr-h-trio-piste { flex: 1 1 auto; min-height: 0; }
.clr-h-trio-dia   { height: 100%; }
.clr-h-trio-carte { display: flex; flex-direction: column; height: 100%; min-width: 0; }

/* Surtitre : un seul cran, identique dans les trois colonnes. */
.clr-h-trio-col .clr-h-une-lbl { font-size: 13px; letter-spacing: .1em; }

/* Boîte média : LA MÊME PARTOUT, rapport 16/9, sur aplat neutre.
   L'aplat sert aussi d'état par défaut : un article sans vignette garde
   exactement la même boîte, jamais un trou ni une hauteur différente. */
/* ⚠ LE RAPPORT N'EST PLUS 16/9, ET C'EST VOULU. La LARGEUR occupe deja toute
   la colonne : elle ne peut pas augmenter. C'est donc la hauteur qui porte
   l'agrandissement, et c'est bien elle qui commande la taille rendue des
   couvertures : une couverture de livre blanc est en PORTRAIT dans une boite
   en paysage, donc contrainte par la hauteur en `contain`.

   HISTORIQUE DU RAPPORT, a tenir a jour si on y retouche :
     origine        16 / 9
     04/09 +15 %    16 / 10.35     (9 x 1,15)
     04/09 +15 %    16 / 11.9025   (10,35 x 1,15)
   soit +32,25 % de hauteur cumules sur l'origine.

   La boite reste IDENTIQUE dans les trois colonnes : c'est cela qui tient
   l'uniformite, pas la valeur du rapport. Le changer se fait ici et nulle part
   ailleurs. */
.clr-h-trio-media {
  display: block; width: 100%; aspect-ratio: 16 / 11.9025;
  background: #F1F4FB; overflow: hidden; text-decoration: none;
}
.clr-h-trio-img { display: block; width: 100%; height: 100%; }
.clr-h-trio-img--contain { object-fit: contain; object-position: center; }
.clr-h-trio-img--cover   { object-fit: cover;   object-position: center; }

/* Titre : un seul cran, centre, tronque a trois lignes pour que la hauteur ne
   depende pas de la longueur du titre.
   ⚠ LA MARGE BASSE DE 18 px EST UN PLANCHER, PAS UN ESPACEMENT DECORATIF. Le
     bouton porte margin-top:auto, qui absorbe tout l'espace libre de la carte :
     quand une carte est pleine — titre sur trois lignes — il ne reste rien a
     absorber et le bouton viendrait coller au titre. Cette marge garantit
     l'ecart dans ce cas-la. Elle s'ajoute a l'identique aux six cartes, donc
     elle ne fait pas diverger les hauteurs. */
.clr-h-trio-carte .clr-h-une-titre {
  font-size: 17px; line-height: 1.35; margin: 14px 0 18px; max-width: none;
  text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Bouton : poussé en bas par margin-top:auto — c'est ce qui aligne son bord
   supérieur d'une colonne à l'autre — et centré horizontalement par
   align-self:center. Les deux propriétés agissent sur des axes différents :
   margin-top:auto sur l'axe principal de la carte (vertical), align-self sur
   l'axe transversal (horizontal). Centrer ne déplace donc RIEN verticalement
   et ne peut pas casser l'alignement des boutons entre colonnes. */
.clr-h-trio-carte .clr-h-btn {
  margin-top: auto; align-self: center;
  font-size: 14px; padding: 13px 22px;
}

/* Piste : défilement natif, barre masquée. */
.clr-h-trio-piste {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.clr-h-trio-piste::-webkit-scrollbar { width: 0; height: 0; display: none; }
.clr-h-trio-piste:focus-visible { outline: 2px solid #1882D8; outline-offset: 4px; }
.clr-h-trio-piste--fixe { overflow: visible; scroll-snap-type: none; }
.clr-h-trio-dia { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

/* Barre de navigation : hauteur fixe, PRÉSENTE dans les trois colonnes.
   44 px de zone tactile, conformément au minimum retenu pour le tactile. */
.clr-h-trio-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px; min-height: 44px;
}
/* ⚠ PIÈGE 7 DU CLAUDE.md — SafeByte impose à TOUT <button> `padding: 0 28px`,
   `line-height: 55px` et `display: block`, en !important. Mesuré ici avant
   correction : le bouton sortait à 56 × 55 au lieu de 44 × 44, et la barre de
   navigation en héritait — 55 px dans les colonnes 2 et 3 contre 44 dans la
   première, soit 11 px d'écart de hauteur entre les colonnes. D'où les
   !important ci-dessous, sur les cinq propriétés que le thème force.
   Ne pas les retirer : l'uniformité des trois colonnes en dépend. */
.clr-h-trio-b {
  width: 44px !important; height: 44px !important; flex: none;
  padding: 0 !important; line-height: 1 !important;
  display: flex !important; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #164AC8; color: #164AC8;
  font-size: 20px; cursor: pointer; border-radius: 0; box-sizing: border-box;
}
.clr-h-trio-b:hover { background: #164AC8; color: #fff; }
.clr-h-trio-b:disabled { background: #fff; border-color: #052855; color: #052855; opacity: .3; cursor: default; }
.clr-h-trio-b:focus-visible { outline: 2px solid #1882D8; outline-offset: 2px; }
.clr-h-trio-puces { display: flex; align-items: center; gap: 6px; }
.clr-h-trio-puces i { display: block; width: 6px; height: 6px; background: #052855; opacity: .25; }
.clr-h-trio-puces i.clr-on { background: #164AC8; opacity: 1; }

/* Empilement sous 900 px, ordre 1, 2, 3. Le gabarit de carte ne change pas :
   même boîte média, mêmes tailles de texte, boutons toujours en bas. Les
   sliders restent des sliders et restent automatiques.
   `justify-items: stretch` neutralise le `justify-items: start` que la règle
   .clr-h-une pose à 720 px — sans lui les colonnes se réduiraient à la largeur
   de leur contenu. */
@media (max-width: 900px) {
  .clr-h-une.clr-h-trio { grid-template-columns: 1fr; gap: 32px; justify-items: stretch; }
}

/* ══════════════ LAME « SUR QUOI NOUS CONSTRUISONS » — 04/09/2026 ══════════════
   ⚠ FOND var(--fond-2), ET C'EST UN CHOIX D'ALTERNANCE. La lame precede
     .clr-h-sombre et suit .clr-h-fam, qui ne declare aucun fond et prend donc
     celui de la page — var(--fond), #FCFCFB. Reprendre var(--fond) aurait colle
     deux bandes identiques. var(--fond-2) est le gris clair deja employe par
     .clr-h-inter : la rupture se fait sans introduire de valeur nouvelle.

   ⚠ TROIS A SIX COLONNES, jamais deux : 1 sous 900, 3 au-dela, 6 a partir de
     1400 ou la largeur utile le permet sans ecraser la description.

   ⚠ AUCUNE TRANSITION, AUCUNE ANIMATION. Les changements au survol sont des
     changements d'etat, pas des transitions — ne pas les adoucir.

   ⚠ LA GRILLE FAIT SES SEPARATEURS AVEC gap:1px SUR FOND var(--trait) : les
     filets sont le fond qui transparait entre les cellules, il n'y a donc aucun
     bord a desactiver sur la derniere colonne ou la derniere ligne. Ne pas
     remplacer par des border : c'est ce qui produit les doubles filets. */
.clr-h-socles {
  background: var(--fond-2);
  border-top: 1px solid var(--trait-f);
  border-bottom: 1px solid var(--trait-f);
}
.clr-h-socles .clr-h-sec {
  padding-top: clamp(56px, 6.5vw, 88px) !important;
  padding-bottom: clamp(56px, 6.5vw, 88px) !important;
}
/* ⚠ LES MARGES PORTENT !important, ET CE N'EST PAS DE LA COQUETTERIE.
   PIEGE 7 DU CLAUDE.md : le theme impose `margin: 0 !important` a ces
   elements. Mesure du 04/09 AVANT correction : surtitre, h2 et grille
   calculaient TOUS marginBottom = 0px, et les trois blocs se touchaient — d'ou
   la lame « pas tres visuelle », le titre collant la grille. Les autres blocs
   de cette feuille contournent deja de la meme facon, voir .clr-h-encart et
   .clr-h-panneau-desc. Retirer ces !important recolle tout. */
.clr-h-socles .clr-h-surtitre { margin-bottom: clamp(14px, 1.6vw, 20px) !important; }
.clr-h-socles h2 {
  font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; text-wrap: balance;
  margin: 0 0 clamp(36px, 4.5vw, 56px) !important; color: #052855; max-width: 22ch;
}

/* ⚠ DES CARTES SEPAREES, PAS UNE GRILLE A FILETS. La premiere version posait
   gap:1px sur un fond var(--trait) : les six entrees se lisaient comme les
   cellules d'un tableau, sans respiration. On passe a de vraies cartes
   blanches espacees — meme traitement que .clr-h-fam-panneaux, fond blanc et
   filet var(--trait) — sur la bande grise de la lame. Le contraste carte/bande
   fait le travail visuel, sans couleur nouvelle. */
.clr-h-socles-g {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(12px, 1.4vw, 18px);
}
.clr-h-socle {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2.2vw, 26px);
  min-height: 44px;
  background: #fff; border: 1px solid var(--trait);
  text-decoration: none;
}
.clr-h-socle:hover { border-color: #164AC8; }
.clr-h-socle:focus-visible { outline: 2px solid #1882D8; outline-offset: 2px; }

/* En-tete de carte : le libelle et la fleche aux deux bords, meme motif que
   .clr-h-fam-lbl et .clr-h-secteur. */
.clr-h-socle-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.clr-h-socle-t { font-size: 17px; font-weight: 700; line-height: 1.25; color: #052855; }
.clr-h-socle-fl { font-size: 15px; color: #164AC8; flex: none; }
.clr-h-socle:hover .clr-h-socle-t { color: #164AC8; }
.clr-h-socle-d { font-size: 14.5px; line-height: 1.6; color: var(--gris-2); text-wrap: pretty; }

/* Pied de lame : le CTA a DROITE, sur sa propre ligne, a TOUTES les largeurs. */
.clr-h-socles-pied {
  display: flex; justify-content: flex-end;
  margin-top: clamp(28px, 3.5vw, 44px) !important;
}

@media (min-width: 901px)  { .clr-h-socles-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) {
  .clr-h-socles-g { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* ⚠ DEUX LIGNES DE TITRE RÉSERVÉES, ET SEULEMENT ICI.
     Relevé du 13/09/2026 à 1 512 px : les six cartes font 251 px de haut — rien
     ne déborde — mais « Contenu et données » est le seul titre à passer sur DEUX
     lignes, 43 px contre 24. Sa description démarre donc à 80 px du haut de la
     carte quand les cinq autres démarrent à 61 : ce sont les lignes de base qui
     divergent, pas les cartes. Coût de la réservation : 19 px de hauteur.
     ⚠ BORNÉ À CETTE LARGEUR, et le point de rupture n'est PAS inventé : c'est
     celui qui fait passer la grille à six colonnes, déjà dans ce fichier. Sous
     1 400 px la grille est à trois colonnes, les cartes sont deux fois plus
     larges, aucun titre ne passe à la ligne — réserver y creuserait 19 px de
     vide dans les six.
     ⚠ `em` et non `px` : 2 × line-height 1.25 sur un corps de 17 px. Le jour où
     le corps change, la réservation suit. */
  .clr-h-socle-t { display: block; min-height: 2.5em; }
}


.clr-h-etape-lien {
  color: #164AC8; text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap; font-weight: 600;
}
.clr-h-etape-lien:hover { color: #052855; }
.clr-h-etape-lien:focus-visible { outline: 2px solid #1882D8; outline-offset: 2px; }