/*
Theme Name: CELEO
Theme URI: https://celeosystem.fr
Description: Thème enfant CELEO, design system de la marque (Détecter. Dissuader. Alerter.). Conçu pour une intégration Gutenberg par blocs HTML personnalisés.
Author: Newp
Template: twentytwentyfive
Version: 3.9.8
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: celeo
*/

/* =========================================================
   1. TOKENS - la source unique de vérité de la charte
   Toute évolution de la charte se fait ICI, nulle part ailleurs.
   ========================================================= */
:root{
  /* --- Couleurs de marque ---
     RÈGLE : l'interface est monochrome (nuit / blanc / gris).
     Le vert n'existe QUE dans les visuels - le halo réel de la tour -
     et dans un seul élément d'interface : le point de signal du sur-titre.
     Ne jamais l'utiliser sur un bouton, un fond ou un titre. */
  --celeo-signal:          #29E06B;   /* halo de la tour · point de signal · focus */
  --celeo-signal-halo:     rgba(41,224,107,.28);
  --celeo-signal-voile:    rgba(41,224,107,.10);

  --celeo-nuit:            #070B10;   /* fond le plus profond : hero, footer */
  --celeo-nuit-2:          #0B1420;   /* sections sombres */
  --celeo-nuit-3:          #131D28;   /* cartes sur fond sombre */

  --celeo-blanc:           #FFFFFF;
  --celeo-blanc-casse:     #F6F8FA;   /* sections claires alternées */

  --celeo-gris:            #9FB0C0;   /* texte secondaire sur fond sombre */
  --celeo-gris-clair:      #5A6B7B;   /* texte secondaire sur fond clair */
  --celeo-ligne:           rgba(255,255,255,.10);
  --celeo-ligne-claire:    rgba(7,11,16,.10);

  --celeo-alerte:          #FF4D4D;   /* USAGE STRICTEMENT RÉSERVÉ au mode alarme */

  /* --- Typographie ---
     Les familles ci-dessous sont des piles de repli.
     La police de marque définitive devra être auto-hébergée dans /assets/fonts/
     et déclarée ici en @font-face. Ne jamais appeler Google Fonts en CDN :
     RGPD + coût sur le LCP. */
  --celeo-font-titre: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --celeo-font-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --celeo-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle typographique fluide (clamp : mobile → desktop) */
  --celeo-t-display: clamp(2.75rem, 7vw, 5.5rem);   /* hero */
  --celeo-t-h1:      clamp(2.1rem, 4.6vw, 3.5rem);
  --celeo-t-h2:      clamp(1.7rem, 3.2vw, 2.5rem);
  --celeo-t-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --celeo-t-lede:    clamp(1.05rem, 1.4vw, 1.3rem);
  --celeo-t-base:    1rem;
  --celeo-t-petit:   .875rem;
  --celeo-t-micro:   .75rem;

  --celeo-lh-titre: 1.06;
  --celeo-lh-texte: 1.65;
  --celeo-ls-titre: -.025em;
  --celeo-ls-kicker: .26em;

  /* --- Espacements (échelle 4px) --- */
  --celeo-e-1: .25rem;
  --celeo-e-2: .5rem;
  --celeo-e-3: .75rem;
  --celeo-e-4: 1rem;
  --celeo-e-6: 1.5rem;
  --celeo-e-8: 2rem;
  --celeo-e-12: 3rem;
  --celeo-e-16: 4rem;
  --celeo-e-24: 6rem;
  --celeo-e-32: 8rem;
  /* Respiration verticale d'une séquence plein écran */
  --celeo-section-y: clamp(4rem, 9vw, 8rem);

  /* --- Structure --- */
  --celeo-max: 1240px;        /* largeur de contenu */
  --celeo-max-texte: 68ch;    /* confort de lecture */
  --celeo-gouttiere: clamp(1.25rem, 4vw, 2.5rem);

  --celeo-radius: 14px;
  --celeo-radius-s: 8px;
  --celeo-radius-pill: 999px;

  --celeo-transition: .4s cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   1 bis. NEUTRALISATION DES GABARITS PARENTS
   Twenty Twenty-Five applique une marge et un blockGap sur
   la racine des blocs. Sur une page dont les sections gèrent
   elles-mêmes leurs gouttières, cela crée un bandeau blanc
   au-dessus du hero. On remet tout à zéro.
   ========================================================= */
.wp-site-blocks,
.wp-site-blocks > *{
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.wp-site-blocks{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-site-blocks > main{ padding: 0 !important; }
/* Les parties de gabarit ne doivent ajouter aucune boîte */
.wp-block-template-part{ margin: 0 !important; }

/* Barre d'administration WordPress : décaler les éléments fixes,
   sinon la navigation figée passe dessous. */
body.admin-bar .celeo-nav.est-figee{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar .celeo-nav.est-figee{ top: 46px; }
}

/* =========================================================
   2. BASE
   ========================================================= */
/* Garde-fou anti-scroll horizontal : aucun élément ne doit pouvoir élargir
   la page (plein-bleed du carrousel, overlays fixes, etc.). overflow-x:clip
   supprime le débordement SANS créer de conteneur de défilement, donc sans
   casser position:sticky (contrairement à overflow:hidden). */
html{ overflow-x: clip; scroll-padding-top: 7rem; }
body{
  font-family: var(--celeo-font-texte);
  font-size: var(--celeo-t-base);
  line-height: var(--celeo-lh-texte);
  color: var(--celeo-nuit);
  background: var(--celeo-blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
}

h1,h2,h3,h4,.celeo-display{
  font-family: var(--celeo-font-titre);
  line-height: var(--celeo-lh-titre);
  letter-spacing: var(--celeo-ls-titre);
  font-weight: 700;
  margin: 0 0 var(--celeo-e-4);
  text-wrap: balance;
}
.celeo-display{ font-size: var(--celeo-t-display); }
h1{ font-size: var(--celeo-t-h1); }
h2{ font-size: var(--celeo-t-h2); }
h3{ font-size: var(--celeo-t-h3); font-weight: 650; }

p{ margin: 0 0 var(--celeo-e-4); }
a{ color: inherit; text-underline-offset: .18em; }

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

/* =========================================================
   3. STRUCTURE - séquences plein écran, une idée par écran
   ========================================================= */
.celeo-section{
  padding-block: var(--celeo-section-y);
  padding-inline: var(--celeo-gouttiere);
}
.celeo-wrap{
  max-width: var(--celeo-max);
  margin-inline: auto;
}
.celeo-wrap--texte{ max-width: var(--celeo-max-texte); }

/* Alternance sombre / clair demandée dans la charte */
.celeo-section--nuit{
  background: var(--celeo-nuit-2);
  color: var(--celeo-blanc);
}
.celeo-section--nuit-profond{
  background: var(--celeo-nuit);
  color: var(--celeo-blanc);
}
.celeo-section--clair{
  background: var(--celeo-blanc);
  color: var(--celeo-nuit);
}
.celeo-section--casse{
  background: var(--celeo-blanc-casse);
  color: var(--celeo-nuit);
}
/* Frontière fine entre deux sections claires qui se suivent : sans elle, la
   jointure blanc/casse est quasi invisible et les sections semblent n'en faire
   qu'une (ex. « La promesse » → « Notre solution »). Filet 1px à 10 % de noir,
   discret, jamais posé après une section sombre (contraste déjà net). */
.celeo-section--clair + .celeo-section--clair,
.celeo-section--clair + .celeo-section--casse,
.celeo-section--casse + .celeo-section--clair,
.celeo-section--casse + .celeo-section--casse{
  border-top: 1px solid var(--celeo-ligne-claire);
}
/* Sur fond sombre, le texte est BLANC (demande client : plus franc, plus clair).
   Seuls les labels mono/meta gardent une teinte discrète. */
.celeo-section--nuit p,
.celeo-section--nuit-profond p{ color: var(--celeo-blanc); }
.celeo-section--clair p,
.celeo-section--casse p{ color: var(--celeo-gris-clair); }
.celeo-section--nuit .celeo-lede,
.celeo-section--nuit-profond .celeo-lede{ color: var(--celeo-blanc); }

/* =========================================================
   4. HERO - vidéo plein écran, sans bandeau
   Le H1 reste dans le DOM (jamais incrusté dans la vidéo).
   ========================================================= */
.celeo-hero{
  position: relative;
  /* Repli vh AVANT svh : certains navigateurs (Safari anciens) ignorent svh.
     Sans repli, le hero perdait sa hauteur minimale et l'image de fond pouvait
     ne s'afficher qu'en fine bande (ne laissant voir qu'une tranche du sujet). */
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  padding: var(--celeo-e-12) var(--celeo-gouttiere) var(--celeo-e-16);
  color: var(--celeo-blanc);
  background: var(--celeo-nuit);
  overflow: hidden;
}
.celeo-hero__media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Dégradé de lisibilité : garantit le contraste AA des CTA sur image mouvante */
.celeo-hero__voile{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,11,16,.55) 0%, rgba(7,11,16,.15) 35%, rgba(7,11,16,.85) 100%);
}
.celeo-hero__contenu{ position: relative; z-index: 2; max-width: 940px; }

/* --- Hero centré --- */
.celeo-hero--centre{ align-items: center; text-align: center; padding-block: var(--celeo-e-24); }
.celeo-hero--centre .celeo-hero__contenu{ margin-inline: auto; }
.celeo-hero--centre .celeo-lede{ margin-inline: auto; }

/* --- Hero aligné à gauche (demande client) ---
   Bloc de texte sur la moitié gauche, centré verticalement. */
.celeo-hero--droite,
.celeo-hero--gauche{ align-items: center; padding-block: var(--celeo-e-16); }
.celeo-hero--gauche .celeo-hero__contenu{
  margin-right: auto; margin-left: 0;
  text-align: left;
  max-width: 640px;
}
@media (max-width: 900px){
  .celeo-hero--gauche .celeo-hero__contenu{ max-width: 100%; }
}
/* Sur PC, le hero de l'ACCUEIL occupe tout l'écran : avant de défiler, on ne
   voit QUE le header/hero (demande client). Réservé à la home. */
@media (min-width: 901px){
  body.home .celeo-hero{ min-height: 100vh; min-height: 100svh; }
}
/* Hero des pages intérieures : jusqu'en BAS de l'écran (retour client 22/08 :
   pas de bande claire sous le hero au chargement). Le header est dans le flux
   sur ces pages, on retire sa hauteur réelle (--celeo-nav-h posée sur :root par
   le script du thème, repli 104px). Contenu centré verticalement. */
.celeo-hero--page{
  box-sizing: border-box; /* sinon le padding (128px) s'ajoute et le hero déborde sous l'écran */
  min-height: calc(100vh - var(--celeo-nav-h, 104px));
  min-height: calc(100svh - var(--celeo-nav-h, 104px));
  align-items: center;
}

/* Chapô du hero : deux lignes maximum sur desktop.
   La phrase fait ~160 caractères, il faut donc ~80 caractères par ligne.
   Le corps est légèrement réduit pour que la ligne longue reste confortable. */
.celeo-hero .celeo-lede{
  /* Contenu à gauche (pas au-delà de la moitié), plus grand et plus aéré
     pour la lisibilité, dans l'esprit KOOI. */
  max-width: 34rem;
  font-size: clamp(1.1rem, 1.25vw, 1.25rem);
  line-height: 1.7;
  text-wrap: pretty;
}

/* Titre du hero : « Détecter · Dissuader · Alerter » fait désormais office de
   titre (le grand titre display a été retiré). Mots en blanc, séparateurs « · »
   dans le vert de signal. Taille intermédiaire : présent sans écraser. */
.celeo-hero__signature{
  font-family: var(--celeo-font-titre);
  /* Calibré (~43px desktop, proche des 48px de KOOI) pour tenir sur UNE ligne
     dans la colonne gauche sans atteindre le milieu de l'écran. */
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: var(--celeo-ls-titre);
  line-height: 1.12;
  margin: 0 0 var(--celeo-e-6);
  color: var(--celeo-blanc);
}
.celeo-hero__signature span{ color: var(--celeo-signal); font-weight: 400; padding: 0 .08em; }
/* Titre sur UNE seule ligne sur mobile : taille en vw calée pour tenir sur toute
   la largeur des téléphones (320–600px), nowrap en garde-fou. Placé APRÈS la
   règle de base pour primer (même spécificité → l'ordre source décide). */
@media (max-width: 600px){
  .celeo-hero__signature{ font-size: clamp(1.1rem, 6vw, 1.6rem); white-space: nowrap; }
}
.celeo-hero--centre .celeo-cta{ justify-content: center; }
.celeo-hero--centre .celeo-kicker{ justify-content: center; }

/* --- Animation d'entrée du hero ---
   Apparition décalée du contenu, et très lent recadrage de l'image
   pour donner de la vie sans distraire. Neutralisé si l'utilisateur
   a demandé moins d'animations. --- */
@keyframes celeo-apparition{
  from{ opacity:0; transform: translateY(26px); }
  to{ opacity:1; transform: none; }
}
@keyframes celeo-recadrage{
  from{ transform: scale(1.10); }
  to{ transform: scale(1); }
}
.celeo-hero__media{ animation: celeo-recadrage 16s cubic-bezier(.22,.61,.36,1) both; }
.celeo-hero__contenu > *{
  animation: celeo-apparition .9s cubic-bezier(.22,.61,.36,1) both;
}
.celeo-hero__contenu > *:nth-child(1){ animation-delay: .10s; }
.celeo-hero__contenu > *:nth-child(2){ animation-delay: .22s; }
.celeo-hero__contenu > *:nth-child(3){ animation-delay: .34s; }
.celeo-hero__contenu > *:nth-child(4){ animation-delay: .46s; }
.celeo-hero__contenu > *:nth-child(5){ animation-delay: .58s; }

/* Indicateur de défilement */
.celeo-hero__defilement{
  /* Centrage SANS transform : l'animation celeo-apparition (fill:both) remet
     transform:none en fin et écraserait un translateX(-50%). On centre donc
     via left:0/right:0 + marges auto, le transform reste libre pour l'entrée. */
  position:absolute; left:0; right:0; bottom: var(--celeo-e-8); z-index:3;
  width: max-content; max-width: 100%; margin-inline: auto;
  display:flex; flex-direction:column; align-items:center; gap:var(--celeo-e-2);
  font-family: var(--celeo-font-mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color: rgba(255,255,255,.55);
  animation: celeo-apparition 1s cubic-bezier(.22,.61,.36,1) 1.1s both;
}
.celeo-hero__defilement span{
  display:block; width:1px; height:34px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
}

@media (prefers-reduced-motion: reduce){
  .celeo-hero__media,
  .celeo-hero__contenu > *,
  .celeo-hero__defilement{ animation: none !important; }
}

/* Média de section (photo dans une carte, ratio contrôlé) */

/* Média de section (photo dans une carte, ratio contrôlé) */
.celeo-media{
  position:relative; overflow:hidden;
  border-radius: var(--celeo-radius);
  border: 1px solid var(--celeo-ligne);
  background: var(--celeo-nuit-3);
}
.celeo-section--clair .celeo-media,
.celeo-section--casse .celeo-media{ border-color: var(--celeo-ligne-claire); }
.celeo-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.celeo-media--16-9{ aspect-ratio:16/9; }
.celeo-media--4-3{ aspect-ratio:4/3; }
.celeo-media--pano{ aspect-ratio:21/9; }
/* Légende de crédit / mention d'asset à retoucher */
.celeo-media__note{
  position:absolute; left:0; right:0; bottom:0;
  padding: var(--celeo-e-2) var(--celeo-e-3);
  background: rgba(7,11,16,.72);
  color: rgba(255,255,255,.72);
  font-family: var(--celeo-font-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  margin:0;
}

/* Vidéo hero partout, mobile compris (demande Samuel 25/08 : « insérer la
   Hero dans le format responsive »). L'image --mobile reste dans le markup
   comme filet mais n'est plus affichée. */
.celeo-hero__media--mobile{ display:none; }
/* Cadrage (Samuel 25/08) : en cover sur écran large, le bas de la tour
   (pieds jaunes/noirs + marque CELEO) était rogné → on ancre la fenêtre
   de recadrage vers le bas, le ciel absorbe la coupe. */
video.celeo-hero__media{ object-position: 50% 100%; }
/* 2e retour Samuel 25/08 : remonter encore la tour (la marque CELEO doit se
   voir sans scroll) et la décaler à droite du titre pour guider le regard.
   Le cover ne dézoome pas → léger zoom (1.12) qui crée 6% de marge par côté,
   consommée par le décalage (+4% à droite, -3.5% vers le haut). Desktop
   seulement : sur mobile le recadrage vertical est déjà complet. */
@media (min-width: 781px){
  /* ⚠️ l'animation celeo-recadrage (fill both) écrase toute déclaration
     transform, et son dézoom de 16 s laissait la marque CELEO hors-champ
     pendant l'animation (4e retour Samuel) → cadrage STATIQUE pour la vidéo,
     la marque est visible dès la première seconde. */
  video.celeo-hero__media{ animation: none; transform: translate(4%, -5%) scale(1.12); }
}

/* ESSAI (Samuel 25/08, à comparer avec la version centrée) : hero de
   l'accueil entièrement aligné à gauche. Pour revenir en arrière,
   supprimer ce bloc. */
/* align-items reste center : c'est l'axe VERTICAL du hero (le passer en
   flex-start collait le titre sous le header — retour Samuel 25/08). */
.celeo-hero.chv2-hero{ text-align:left; }
.celeo-hero.chv2-hero .celeo-hero__contenu{ text-align:left; margin-inline:0; }
/* Titre réduit (Samuel 25/08) : même taille que les h2 de section (réf.
   « Une présence autonome, pas une simple caméra » sur Intrusion) — l'ancien
   clamp(2.1rem…4rem) était jugé trop imposant. */
.celeo-hero.chv2-hero .celeo-hero__signature{ margin-inline:0; font-size:var(--celeo-t-h2); max-width:26ch; }
/* ~2 cm de respiration depuis le bord gauche (desktop). */
@media (min-width:781px){
  .celeo-hero.chv2-hero .celeo-hero__contenu{ margin-left:max(0px, calc(2cm - var(--celeo-gouttiere))); }
}
.celeo-hero.chv2-hero .celeo-hero__badge-wrap{ text-align:left; }
.celeo-hero.chv2-hero .celeo-cta{ justify-content:flex-start; }

/* =========================================================
   5. COMPOSANTS
   ========================================================= */

/* -- Kicker / sur-titre --
   Le point vert est la SEULE occurrence de la couleur dans l'interface. -- */
.celeo-kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-size: var(--celeo-t-micro);
  letter-spacing: var(--celeo-ls-kicker);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--celeo-gris);
  margin-bottom: var(--celeo-e-4);
}
.celeo-kicker::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background: var(--celeo-signal);
  box-shadow: 0 0 8px 1px var(--celeo-signal-halo);
  flex:0 0 auto;
}
.celeo-section--clair .celeo-kicker,
.celeo-section--casse .celeo-kicker{ color: var(--celeo-gris-clair); }
/* Variante sans point, pour les usages où le signal n'a pas de sens */
.celeo-kicker--nu::before{ display:none; }

/* -- Chapô -- */
.celeo-lede{
  font-size: var(--celeo-t-lede);
  max-width: var(--celeo-max-texte);
}
/* Uniformisation (Samuel 25/08, « les différentes tailles de typo ça fait
   bizarre ») : dans une intro de section, les paragraphes qui suivent le
   chapeau prennent la même taille que lui. */
.celeo-section .celeo-wrap > .celeo-lede ~ p:not(.celeo-kicker):not(.celeo-lede){
  font-size: var(--celeo-t-lede);
  max-width: var(--celeo-max-texte);
}

/* -- Boutons -- */
.celeo-cta{ display:flex; flex-wrap:wrap; gap: var(--celeo-e-3); margin-top: var(--celeo-e-8); }
.celeo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--celeo-e-2);
  font-family: var(--celeo-font-texte);
  font-size: var(--celeo-t-petit);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .95rem 1.75rem;
  white-space: nowrap;
  border-radius: var(--celeo-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--celeo-transition), border-color var(--celeo-transition), color var(--celeo-transition), transform var(--celeo-transition);
}
/* CTA principal - VERT par défaut, BLANC au survol (demande client).
   C'est désormais le vert qui porte l'action, sur fond clair comme sombre. */
.celeo-btn--primaire{
  background: var(--celeo-signal);
  color: var(--celeo-nuit);
}
.celeo-btn--primaire:hover{
  background: var(--celeo-blanc);
  color: var(--celeo-nuit);
  transform: translateY(-1px);
}
/* Léger contour nuit sur les CTA verts posés sur fond clair (demande client) :
   le bouton se détache mieux du blanc. Sur fond sombre, pas de contour. */
.celeo-section--clair .celeo-btn--primaire,
.celeo-section--casse .celeo-btn--primaire,
.celeo-section--clair .celeo-btn--sombre,
.celeo-section--casse .celeo-btn--sombre{
  border-color: rgba(7,11,16,.45);
}

/* Variante « sombre » alignée sur la même règle : vert → blanc au survol. */
.celeo-btn--sombre{
  background: var(--celeo-signal);
  color: var(--celeo-nuit);
}
.celeo-btn--sombre:hover{ background: var(--celeo-blanc); color: var(--celeo-nuit); transform: translateY(-1px); }

/* CTA secondaire sur fond sombre - contour blanc transparent */
.celeo-btn--fantome{
  background: transparent;
  color: var(--celeo-blanc);
  border-color: rgba(255,255,255,.45);
}
.celeo-btn--fantome:hover{ background: rgba(255,255,255,.10); border-color: var(--celeo-blanc); }

/* CTA secondaire sur fond clair - contour nuit */
.celeo-btn--fantome-sombre{
  background: transparent;
  color: var(--celeo-nuit);
  border-color: var(--celeo-ligne-claire);
}
.celeo-btn--fantome-sombre:hover{ border-color: var(--celeo-nuit); }

/* Bouton fantôme posé sur une section CLAIRE : le contour blanc est invisible.
   On bascule automatiquement en variante sombre (contour + texte nuit), sans
   toucher au markup. Le hero (fond sombre) n'est pas concerné. */
.celeo-section--clair .celeo-btn--fantome,
.celeo-section--casse .celeo-btn--fantome{
  color: var(--celeo-nuit);
  border-color: rgba(7,11,16,.45);
}
.celeo-section--clair .celeo-btn--fantome:hover,
.celeo-section--casse .celeo-btn--fantome:hover{
  background: rgba(7,11,16,.06);
  border-color: var(--celeo-nuit);
}

.celeo-btn:focus-visible{
  outline: 2px solid var(--celeo-signal);
  outline-offset: 3px;
}

/* Barre de contact mobile : CTA primaire vert → blanc au survol, cohérent. */
.celeo-sticky a.est-primaire{ background: var(--celeo-signal); color: var(--celeo-nuit); }
.celeo-sticky a.est-primaire:hover,
.celeo-sticky a.est-primaire:active{ background: var(--celeo-blanc); color: var(--celeo-nuit); }

/* -- Badge Origine France (sobre, sans discours patriotique) -- */
.celeo-badge-fr{
  display:inline-flex; align-items:center; gap: var(--celeo-e-2);
  font-size: var(--celeo-t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .4rem .85rem;
  border-radius: var(--celeo-radius-pill);
  border: 1px solid var(--celeo-ligne);
  background: rgba(255,255,255,.04);
}
.celeo-badge-fr__drapeau{
  width: 18px; height: 12px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg, #0B2C7A 0 33.33%, #FFFFFF 33.33% 66.66%, #C8102E 66.66% 100%);
}
.celeo-section--clair .celeo-badge-fr,
.celeo-section--casse .celeo-badge-fr{
  border-color: var(--celeo-ligne-claire);
  background: rgba(7,11,16,.03);
}

/* -- Grilles -- */
.celeo-grille{ display:grid; gap: var(--celeo-e-4); }
.celeo-grille--2{ grid-template-columns: repeat(2, 1fr); }
.celeo-grille--3{ grid-template-columns: repeat(3, 1fr); }
.celeo-grille--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .celeo-grille--2,.celeo-grille--3,.celeo-grille--4{ grid-template-columns: 1fr; }
}

/* -- Duo « VS » : deux cartes opposées avec une pastille au centre -- */
.celeo-duo-vs{ position: relative; column-gap: clamp(2.75rem, 6vw, 4.5rem); }
.celeo-duo-vs .celeo-vs{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--celeo-blanc);
  background: var(--celeo-nuit);
  border: 2px solid var(--celeo-signal);
  box-shadow: 0 0 0 6px var(--celeo-blanc), 0 10px 24px -10px rgba(7,11,16,.55);
}
@media (max-width: 900px){
  .celeo-duo-vs .celeo-vs{ box-shadow: 0 0 0 5px var(--celeo-blanc-casse), 0 10px 24px -10px rgba(7,11,16,.55); }
}

/* -- Tableau comparatif : Tour CELEO vs surveillance humaine --
   Le vert reste réservé au point de signal (pastille de l'en-tête CELEO).
   La colonne CELEO est mise en avant par un fond nuit-3 + texte blanc franc. */
.celeo-compare{
  margin-top: var(--celeo-e-12);
  border: 1px solid var(--celeo-ligne);
  border-radius: var(--celeo-radius);
  overflow: hidden;
}
.celeo-compare__row{
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
  border-top: 1px solid var(--celeo-ligne);
}
.celeo-compare__row:first-child{ border-top: 0; }
.celeo-compare__cell{
  padding: var(--celeo-e-4) var(--celeo-e-6);
  display: flex; align-items: center;
  font-size: var(--celeo-t-base);
  line-height: 1.4;
}
.celeo-compare__crit{ font-weight: 600; color: var(--celeo-blanc); }
.celeo-compare__celeo{ background: var(--celeo-nuit-3); color: var(--celeo-blanc); font-weight: 500; }
.celeo-compare__hum{ color: var(--celeo-gris); }
.celeo-compare__head .celeo-compare__cell{
  font-family: var(--celeo-font-titre);
  font-weight: 700; letter-spacing: -.01em; font-size: 1.05rem;
  gap: .55rem;
}
.celeo-compare__dot{
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--celeo-signal);
  box-shadow: 0 0 8px 1px var(--celeo-signal-halo);
  flex: 0 0 auto;
}
.celeo-compare__note{ margin-top: var(--celeo-e-6); font-size: var(--celeo-t-petit); color: var(--celeo-gris); }
/* Sur fond clair, on réadapte les couleurs de texte de la colonne humaine et de la note. */
.celeo-section--clair .celeo-compare__hum,
.celeo-section--casse .celeo-compare__hum,
.celeo-section--clair .celeo-compare__note,
.celeo-section--casse .celeo-compare__note{ color: var(--celeo-gris-clair); }
.celeo-section--clair .celeo-compare,
.celeo-section--casse .celeo-compare{ border-color: var(--celeo-ligne-claire); }
.celeo-section--clair .celeo-compare__row,
.celeo-section--casse .celeo-compare__row{ border-top-color: var(--celeo-ligne-claire); }
.celeo-section--clair .celeo-compare__crit,
.celeo-section--casse .celeo-compare__crit,
.celeo-section--clair .celeo-compare__celeo,
.celeo-section--casse .celeo-compare__celeo,
.celeo-section--clair .celeo-compare__head .celeo-compare__cell,
.celeo-section--casse .celeo-compare__head .celeo-compare__cell{ color: var(--celeo-nuit); }
.celeo-section--clair .celeo-compare__celeo,
.celeo-section--casse .celeo-compare__celeo{ background: var(--celeo-blanc-casse); }

/* Mobile : chaque critère devient un bloc empilé, avec l'intitulé de colonne en préfixe. */
@media (max-width: 680px){
  .celeo-compare__row{ grid-template-columns: 1fr; }
  .celeo-compare__head{ display: none; }
  .celeo-compare__crit{
    background: var(--celeo-nuit-2);
    text-transform: uppercase; letter-spacing: .12em;
    font-size: var(--celeo-t-petit); color: var(--celeo-gris);
    padding-block: .6rem;
  }
  .celeo-section--clair .celeo-compare__crit,
  .celeo-section--casse .celeo-compare__crit{ background: var(--celeo-blanc-casse); color: var(--celeo-gris-clair); }
  .celeo-compare__celeo,
  .celeo-compare__hum{ display: block; }
  .celeo-compare__celeo::before,
  .celeo-compare__hum::before{
    display: block; margin-bottom: .2rem;
    font-family: var(--celeo-font-titre); font-weight: 700;
    font-size: var(--celeo-t-micro); letter-spacing: .04em;
    text-transform: uppercase;
  }
  .celeo-compare__celeo::before{ content: "Tour CELEO"; color: var(--celeo-signal); }
  .celeo-compare__hum::before{ content: "Surveillance humaine"; color: var(--celeo-gris); }
}

/* -- Illustration SVG maison (mockups CELEO : alerte push, vue thermique) -- */
.celeo-illu{
  border: 1px solid var(--celeo-ligne);
  border-radius: var(--celeo-radius);
  overflow: hidden;
  background: var(--celeo-nuit-2);
  display: block;
  color: var(--celeo-gris);
}
.celeo-illu svg{ display: block; width: 100%; height: auto; }
.celeo-illu__note{ margin-top: var(--celeo-e-3); font-size: var(--celeo-t-petit); color: var(--celeo-gris); }

/* -- Carte -- */
.celeo-carte{
  border: 1px solid var(--celeo-ligne);
  border-radius: var(--celeo-radius);
  padding: var(--celeo-e-6);
  background: var(--celeo-nuit-3);
}
.celeo-section--clair .celeo-carte,
.celeo-section--casse .celeo-carte{
  background: var(--celeo-blanc);
  border-color: var(--celeo-ligne-claire);
}
/* Survol des cartes : le vert « signal » n'apparaît qu'au survol (principe DA).
   Le contour et le titre passent au vert, léger soulèvement. */
.celeo-carte{
  transition: border-color var(--celeo-transition),
              box-shadow var(--celeo-transition),
              transform var(--celeo-transition);
}
.celeo-carte:hover{
  border-color: var(--celeo-signal);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -22px rgba(41,224,107,.5);
}
.celeo-carte:hover h3,
.celeo-carte:hover .celeo-garantie__titre{ color: var(--celeo-signal); }
/* Mise en avant par l'élévation, pas par la couleur */
.celeo-carte--accent{
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.06), var(--celeo-nuit-3));
}
.celeo-section--clair .celeo-carte--accent,
.celeo-section--casse .celeo-carte--accent{
  border-color: rgba(7,11,16,.22);
  background: var(--celeo-blanc);
  box-shadow: 0 18px 40px -24px rgba(7,11,16,.35);
}

/* -- Piliers : icône verte, plus grande, centrée (demande client) -- */
.celeo-pilier__num{
  font-family: var(--celeo-font-mono);
  font-size: var(--celeo-t-micro);
  color: var(--celeo-gris);
  letter-spacing: .12em;
  display:block;
  margin-bottom: var(--celeo-e-3);
}
.celeo-section--clair .celeo-pilier__num,
.celeo-section--casse .celeo-pilier__num{ color: var(--celeo-gris-clair); }

.celeo-carte--pilier{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.celeo-pilier__icone{
  display:grid; place-items:center;
  width:64px; height:64px; margin: 0 auto var(--celeo-e-4);
  color: var(--celeo-signal);
}
.celeo-pilier__icone svg{
  width:56px; height:56px;
  stroke: currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.celeo-carte--pilier h3{ margin-bottom: var(--celeo-e-3); }
.celeo-carte--pilier p{ margin:0; }
.celeo-carte--pilier a{
  margin-top: var(--celeo-e-4); font-size: var(--celeo-t-petit); font-weight:600;
  color: var(--celeo-signal); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4em;
}
.celeo-carte--pilier a::after{ content:"→"; transition: transform var(--celeo-transition); }
.celeo-carte--pilier a:hover::after{ transform: translateX(3px); }

/* -- Lien fléché autonome (ex. « Découvrir la solution »), alternative
   légère au bouton plein : la flèche est verte et avance au survol -- */
.celeo-lien-fleche{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--celeo-font-titre);
  font-weight:600; font-size: var(--celeo-t-base);
  letter-spacing: var(--celeo-ls-titre);
  text-decoration:none; color: var(--celeo-nuit);
  transition: color var(--celeo-transition);
}
.celeo-section--nuit .celeo-lien-fleche,
.celeo-section--nuit-profond .celeo-lien-fleche{ color: var(--celeo-blanc); }
.celeo-lien-fleche::after{
  content:"→"; color: var(--celeo-signal);
  transition: transform var(--celeo-transition);
}
.celeo-lien-fleche:hover{ color: var(--celeo-signal); }
.celeo-lien-fleche:hover::after{ transform: translateX(4px); }

/* -- Citation / phrase signature -- */
.celeo-signature{
  font-family: var(--celeo-font-titre);
  font-size: var(--celeo-t-h2);
  line-height: 1.25;
  letter-spacing: var(--celeo-ls-titre);
  max-width: 24ch;
}

/* -- Halo : rappel du signal de la tour en veille.
      Seule respiration colorée admise, très diffuse, jamais sur du texte. -- */
.celeo-halo{
  position: relative;
}
.celeo-halo::before{
  content:"";
  position:absolute; inset:-40% -20% auto;
  height: 60%;
  background: radial-gradient(closest-side, var(--celeo-signal-halo), transparent 70%);
  pointer-events:none;
  filter: blur(28px);
  opacity: .55;
}

/* =========================================================
   6. ANIMATIONS - fluides et sobres
   ========================================================= */
.celeo-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.celeo-reveal.est-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .celeo-reveal{ opacity:1; transform:none; }
}

/* =========================================================
   7. ACCESSIBILITÉ
   ========================================================= */
:where(a,button,input,select,textarea):focus-visible{
  outline: 2px solid var(--celeo-signal);
  outline-offset: 2px;
}
.celeo-skip{
  position:absolute; left:-9999px;
  background: var(--celeo-nuit); color:#fff; padding: var(--celeo-e-3) var(--celeo-e-4);
  border-radius: var(--celeo-radius-s);
}
.celeo-skip:focus{ left: var(--celeo-e-4); top: var(--celeo-e-4); z-index: 999; }

/* Réservé au mode alarme - ne pas utiliser comme couleur décorative */
.celeo-alerte{ color: var(--celeo-alerte); }

/* =========================================================
   8. NAVIGATION & PIED DE PAGE
   ========================================================= */
/* Grille en trois colonnes égales : la navigation est réellement centrée,
   quelle que soit la largeur du logo et des boutons.

   COMPORTEMENT PAR DÉFAUT (toutes les pages intérieures) :
   barre collante à fond plein. Indispensable, sinon le texte blanc
   du menu se retrouverait sur une section claire.

   SUR LA PAGE D'ACCUEIL (body.home) : transparente par-dessus la vidéo,
   puis opaque au défilement. Voir plus bas. */
.celeo-nav{
  position: sticky; top:0; z-index:20;
  display:grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap: var(--celeo-e-6);
  padding: var(--celeo-e-4) var(--celeo-gouttiere);
  background: rgba(7,11,16,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--celeo-ligne);
}

/* La nav est enfant d'un wrapper de template-part (<header>) isolé et court :
   sans cela, position:sticky ne colle que sur la hauteur du wrapper puis
   s'échappe. display:contents « efface » le wrapper - la nav devient enfant
   direct de .wp-site-blocks (pleine hauteur) et colle donc sur toute la page. */
header.wp-block-template-part{ display: contents; }

/* Page d'accueil : la navigation flotte sur le hero, sans bandeau, et reste
   COLLÉE en haut au défilement. On utilise position:sticky (et non fixed) :
   sticky reste dans le flux et se cale sur la largeur réelle du document,
   alors que fixed se dimensionne sur innerWidth et pouvait pousser le burger
   hors de l'écran. La marge négative = hauteur de la barre, pour que le hero
   passe SOUS la nav et reste plein cadre (le fond du body est clair). */
body.home .celeo-nav{
  position: sticky; top: 0;
  /* Repli avant JS ; ajusté au pixel près par JS (celeo_script_reveal), car la
     hauteur réelle varie selon le breakpoint (menu desktop vs burger) et la
     police. Une valeur trop courte laissait apparaître une bande de fond blanc. */
  --celeo-nav-h: 104px;
  margin-bottom: calc(-1 * var(--celeo-nav-h));
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  padding-block: var(--celeo-e-6);
}
/* Sous la barre d'admin WordPress (connecté), on décale la nav collée. */
body.admin-bar.home .celeo-nav{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar.home .celeo-nav{ top: 46px; }
}
.celeo-nav > :first-child{ justify-self:start; }
.celeo-nav > :last-child{ justify-self:end; }
/* Logo image - PNG à fond transparent, recadré au lettrage (ratio 8,84:1).
   Plus de mix-blend-mode : le logo se pose désormais sur n'importe quel fond.
   Reste à produire : un vrai SVG vectoriel (les .svg fournis contiennent
   un bitmap encapsulé, ils n'apportent rien de plus que le PNG). */
.celeo-logo{
  display:block; text-decoration:none; line-height:0;
  flex: 0 0 auto;
}
.celeo-logo img{
  height: 26px; width:auto;
  display:block;
}
.celeo-nav.est-figee .celeo-logo img{ height: 22px; }
.celeo-footer .celeo-logo img{ height: 22px; }
/* Repli typographique si l'image ne charge pas */
.celeo-logo--texte{
  font-family: var(--celeo-font-titre);
  font-size: 1.35rem; font-weight: 800; letter-spacing: .34em;
  color: var(--celeo-blanc); text-decoration:none; line-height:1;
}
.celeo-nav__liens{
  display:flex; gap: clamp(0.9rem, 1.35vw, 1.7rem); list-style:none; margin:0; padding:0;
  justify-self:center;
}
.celeo-nav__liens > li{ position:relative; }
.celeo-nav__liens a{
  display:inline-flex; align-items:center; gap:.4em;
  color: var(--celeo-blanc); text-decoration:none;
  font-size: 1.125rem; font-weight:400;
  padding-block: var(--celeo-e-2);
  transition: color var(--celeo-transition);
  white-space:nowrap;
}
.celeo-nav__liens a:hover{ color: var(--celeo-signal); }

/* --- Sous-menu déroulant (secteurs) ---
   Ouverture au survol et au focus clavier. En production, ajouter
   aria-expanded et une gestion tactile en JS. */
.celeo-nav__deroulant > a::after{
  content:""; width:5px; height:5px; margin-left:.15em;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--celeo-transition);
}
.celeo-nav__deroulant:hover > a::after,
.celeo-nav__deroulant:focus-within > a::after{ transform: rotate(225deg) translateY(-2px); }

.celeo-sousmenu{
  position:absolute; top:100%; left:50%; transform: translate(-50%, 8px);
  min-width: 520px;
  margin:0; padding: var(--celeo-e-4);
  list-style:none;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 2px var(--celeo-e-4);
  background: var(--celeo-nuit);
  border:1px solid var(--celeo-ligne);
  border-radius: var(--celeo-radius);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--celeo-transition), transform var(--celeo-transition), visibility var(--celeo-transition);
}
.celeo-nav__deroulant:hover .celeo-sousmenu,
.celeo-nav__deroulant:focus-within .celeo-sousmenu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translate(-50%, 0);
}
.celeo-sousmenu a{
  display:block; padding: .5rem .75rem; border-radius: var(--celeo-radius-s);
  color: rgba(255,255,255,.78);
  transition: background var(--celeo-transition), color var(--celeo-transition);
}
.celeo-sousmenu a:hover{ background: rgba(255,255,255,.08); color: var(--celeo-signal); }
.celeo-sousmenu__tous{ grid-column: 1 / -1; margin-top: var(--celeo-e-2); padding-top: var(--celeo-e-2); border-top:1px solid var(--celeo-ligne); }
.celeo-sousmenu__tous a{ color: var(--celeo-blanc); font-weight:600; }

/* -- Méga-menu Secteurs à DEUX niveaux (façon Kooi) : catégories non cliquables
   à gauche, détail des secteurs à droite au survol. Fond clair sur desktop ;
   sur mobile, tout s'empile dans l'overlay sombre (voir media query). -- */
.celeo-sousmenu--mega{
  min-width: 700px;
  display: block; padding: 0;
  background: var(--celeo-blanc);
  border-color: var(--celeo-ligne-claire);
  overflow: hidden;
}
.celeo-mega2__cats{
  width: 284px;
  padding: var(--celeo-e-3);
  background: var(--celeo-blanc-casse);
  border-right: 1px solid var(--celeo-ligne-claire);
}
/* Catégories et liens partagent EXACTEMENT la même taille et le même padding,
   pour que les lignes des deux colonnes s'alignent parfaitement. */
.celeo-mega2__cat-nom,
.celeo-mega2__detail a{
  display: flex; align-items: center;
  padding: .6rem .75rem; border-radius: var(--celeo-radius-s);
  font-size: var(--celeo-t-base); color: var(--celeo-nuit);
  transition: background var(--celeo-transition), color var(--celeo-transition);
}
.celeo-mega2__cat-nom{ justify-content: space-between; gap: 1em; font-weight: 500; cursor: default; }
.celeo-mega2__chev{ font-size: 1em; line-height: 1; color: var(--celeo-gris-clair); transition: color var(--celeo-transition); }
/* Panneau de détail à droite (superposé, un seul visible à la fois) */
.celeo-mega2__detail{
  position: absolute; top: 0; left: 284px; right: 0; bottom: 0;
  padding: var(--celeo-e-3) var(--celeo-e-6);
  list-style: none; margin: 0; display: none;
}
/* Logique d'activation robuste (évite les conflits de spécificité) :
   1) par défaut, la 1re catégorie est active ;
   2) dès qu'on survole la colonne, on désactive TOUT ;
   3) puis on réactive UNIQUEMENT la catégorie survolée (y compris la 1re). */
.celeo-mega2__cat:first-child > .celeo-mega2__cat-nom{ background: var(--celeo-blanc); }
.celeo-mega2__cat:first-child > .celeo-mega2__cat-nom .celeo-mega2__chev{ color: var(--celeo-signal); }
.celeo-mega2__cat:first-child .celeo-mega2__detail{ display: block; }
.celeo-mega2__cats:hover .celeo-mega2__cat-nom{ background: transparent; }
.celeo-mega2__cats:hover .celeo-mega2__cat-nom .celeo-mega2__chev{ color: var(--celeo-gris-clair); }
.celeo-mega2__cats:hover .celeo-mega2__detail{ display: none; }
.celeo-mega2__cats:hover .celeo-mega2__cat:hover > .celeo-mega2__cat-nom{ background: var(--celeo-blanc); }
.celeo-mega2__cats:hover .celeo-mega2__cat:hover > .celeo-mega2__cat-nom .celeo-mega2__chev{ color: var(--celeo-signal); }
.celeo-mega2__cats:hover .celeo-mega2__cat:hover .celeo-mega2__detail{ display: block; }
.celeo-mega2__detail a:hover{ background: rgba(7,11,16,.05); color: var(--celeo-signal); }
/* « Voir tous les secteurs » sous les catégories */
.celeo-sousmenu--mega .celeo-sousmenu__tous{
  margin: var(--celeo-e-1) .75rem 0; padding-top: var(--celeo-e-2);
  border-top: 1px solid var(--celeo-ligne-claire);
}
.celeo-sousmenu--mega .celeo-sousmenu__tous a{
  display: inline-block; padding: .3rem 0; color: var(--celeo-nuit);
  font-weight: 600; font-size: var(--celeo-t-petit);
}
.celeo-sousmenu--mega .celeo-sousmenu__tous a:hover{ background: transparent; color: var(--celeo-signal); }
.celeo-nav__actions{ display:flex; gap: var(--celeo-e-3); align-items:center; }
/* Barre compacte : on resserre un peu le padding horizontal des CTA de la nav
   (la taille de police reste inchangée) pour que « Demander un devis » tienne
   sur une seule ligne aux largeurs desktop intermédiaires. */
.celeo-nav__actions .celeo-btn{ padding-inline: 1.3rem; }
/* Les CTA repris dans le panneau mobile : masqués sur desktop. */
.celeo-nav__cta-m{ display:none; }

/* -- Burger : bouton d'ouverture du menu, visible en dessous de 960px -- */
.celeo-burger{
  display:none;                       /* masqué en desktop */
  width:44px; height:44px; padding:11px; box-sizing:border-box;
  background:transparent; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.celeo-burger span{
  display:block; width:100%; height:2px; border-radius:2px;
  background: var(--celeo-blanc);
  transition: transform var(--celeo-transition), opacity .2s ease;
}
.celeo-burger.est-actif span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.celeo-burger.est-actif span:nth-child(2){ opacity:0; }
.celeo-burger.est-actif span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* =========================================================
   NAVIGATION MOBILE (<= 960px)
   Le menu devient un panneau plein écran, centré, ouvert au burger.
   Le sous-menu Secteurs se déplie en accordéon (tap).
   ========================================================= */
@media (max-width: 960px){
  /* Barre : logo à gauche, actions (devis + burger) à droite. */
  .celeo-nav{ grid-template-columns: auto 1fr auto; gap: var(--celeo-e-4); }
  .celeo-burger{ display:flex; }
  /* Logo et burger restent au-dessus du panneau pour rester cliquables. */
  .celeo-logo, .celeo-nav__actions{ position:relative; z-index:30; }
  /* Barre mobile épurée : logo + burger. Les CTA passent dans le panneau. */
  .celeo-nav__actions .celeo-btn{ display:none; }
  .celeo-nav__cta-m{ display:block; margin-top: var(--celeo-e-2); }
  .celeo-nav__cta-m .celeo-btn{ font-size: var(--celeo-t-base); padding: .85em 1.8em; }

  /* MENU TIROIR (Samuel 25/08, réf. KOOI / Bauwatch) : panneau latéral qui
     glisse depuis la droite, liste structurée alignée à gauche, séparateurs,
     chevrons à droite. Remplace l'ancien plein-écran centré (« mots qui
     flottent au milieu », jugé vieillot). Voile sombre sur le reste de la
     page ; fermeture au clic hors panneau gérée dans functions.php. */
  /* ⚠️ PIÈGE : un backdrop-filter sur le header (état est-figee, même un
     blur(0px) transitoire) en fait le BLOC CONTENANT des descendants fixed
     → le tiroir se retrouvait écrasé dans la barre (bug Samuel 25/08, ne se
     produisait qu'après un scroll). On coupe le filtre tant que le menu est
     ouvert, le fond opaque suffit. */
  body.menu-ouvert .celeo-nav{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transition:none; }
  .celeo-nav__liens{
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:15;
    width:min(84vw, 340px);
    justify-self:stretch; box-sizing:border-box;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    margin:0; padding: calc(var(--celeo-nav-h, 64px) + var(--celeo-e-4)) 0 var(--celeo-e-8);
    overscroll-behavior:contain;
    background: rgba(9,14,20,.985); backdrop-filter: blur(18px);
    border-left:1px solid rgba(255,255,255,.08);
    box-shadow: -32px 0 70px -20px rgba(0,0,0,.6);
    transform: translateX(105%); opacity:1; visibility:hidden;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), visibility .35s ease;
    overflow-y:auto;
  }
  body.menu-ouvert{ overflow:hidden; }
  body.menu-ouvert .celeo-nav__liens{ transform: translateX(0); visibility:visible; }
  /* voile sombre derrière le tiroir (sous le panneau z15, sous la barre z30) */
  body.menu-ouvert::after{
    content:""; position:fixed; inset:0; z-index:14;
    background: rgba(4,7,11,.55); backdrop-filter: blur(2px);
  }
  .celeo-nav__liens > li{ width:100%; text-align:left; border-bottom:1px solid rgba(255,255,255,.07); }
  .celeo-nav__liens > li:last-of-type{ border-bottom:0; }
  .celeo-nav__liens a{
    font-size:1.02rem; font-weight:600;
    display:flex; align-items:center; justify-content:space-between;
    padding:.95rem 1.25rem; width:100%; box-sizing:border-box;
  }

  /* Accordéons : chevron poussé à droite, sous-menu indenté sur fond léger. */
  .celeo-nav__deroulant > a{ justify-content:space-between; }
  .celeo-sousmenu{
    position:static; transform:none; min-width:0; width:100%;
    grid-template-columns:1fr; gap:0;
    margin:0; padding:0;
    background: rgba(255,255,255,.035); border:0; box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto;
    max-height:0; overflow:hidden;
    transition: max-height var(--celeo-transition);
  }
  .celeo-nav__deroulant.est-deploye .celeo-sousmenu{ max-height: 60vh; }
  .celeo-sousmenu a{
    text-align:left; justify-content:flex-start;
    font-size:.95rem; font-weight:500; color: rgba(255,255,255,.72);
    padding:.6rem 1.25rem .6rem 2rem;
  }
  .celeo-sousmenu a:hover{ color:#fff; }
  .celeo-sousmenu__tous{ border-top-color: var(--celeo-ligne); }
  /* Méga Secteurs : catégories + détail empilés, alignés à gauche. */
  .celeo-sousmenu--mega{ min-width:0; min-height:0; display:block; }
  .celeo-mega2__cats{ width:100%; background:transparent; border:0; padding:0; min-height:0; }
  .celeo-mega2__cat-nom{ justify-content:flex-start; color: var(--celeo-gris);
    background:transparent !important; margin: var(--celeo-e-3) 0 0;
    padding-left:1.25rem; font-size: var(--celeo-t-micro); letter-spacing:.08em; text-transform:uppercase; }
  .celeo-mega2__chev{ display:none; }
  .celeo-mega2__detail{ position:static; display:block !important; left:auto; padding:0; }
  .celeo-mega2__detail a{ text-align:left; justify-content:flex-start; color: rgba(255,255,255,.72);
    font-size:.95rem; margin:0; padding:.55rem 1.25rem .55rem 2rem; }
  .celeo-mega2__detail a:hover{ background:transparent; color:#fff; }
  .celeo-nav__deroulant.est-deploye .celeo-sousmenu--mega{ max-height: 150vh; }
}

/* Logo un cran plus compact sur petits écrans. */
@media (max-width: 560px){
  .celeo-logo img{ height: 22px; }
  .celeo-nav{ padding-block: var(--celeo-e-3); }
}

.celeo-footer{
  background:var(--celeo-nuit); color:var(--celeo-gris);
  padding: var(--celeo-e-16) var(--celeo-gouttiere) var(--celeo-e-8);
  font-size:var(--celeo-t-petit);
}
.celeo-footer a{ color:var(--celeo-gris); text-decoration:none; }
.celeo-footer a:hover{ color:var(--celeo-blanc); }
.celeo-footer__cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--celeo-e-8); max-width:var(--celeo-max); margin-inline:auto; }
.celeo-footer h4{ color:var(--celeo-blanc); font-size:var(--celeo-t-micro); letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--celeo-e-4); }
.celeo-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--celeo-e-2); }
.celeo-footer__bas{
  max-width:var(--celeo-max); margin:var(--celeo-e-12) auto 0; padding-top:var(--celeo-e-6);
  border-top:1px solid var(--celeo-ligne); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--celeo-e-4);
  font-size:var(--celeo-t-micro); color:#5F7183;
}
@media (max-width:900px){ .celeo-footer__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .celeo-footer__cols{ grid-template-columns:1fr; } }

/* =========================================================
   9. COMPOSANTS ÉDITORIAUX
   ========================================================= */

/* =========================================================
   CONFRONTATION DES DEUX MODÈLES
   Deux colonnes côte à côte, étapes empilées verticalement :
   la lecture se fait de haut en bas, et l'œil compare
   ligne à ligne l'étape du milieu, la seule qui diffère.
   ========================================================= */
.celeo-modeles{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:stretch; gap: var(--celeo-e-6);
}
@media (max-width:820px){
  .celeo-modeles{ grid-template-columns: 1fr; gap: var(--celeo-e-4); }
}

.celeo-modele{
  display:flex; flex-direction:column;
  border:1px solid var(--celeo-ligne);
  border-radius: var(--celeo-radius);
  padding: var(--celeo-e-8);
}
/* Le modèle du marché : volontairement effacé */
.celeo-modele--marche{
  background: transparent;
  opacity: .62;
}
/* Le modèle CELEO : élevé, contrasté, c'est lui qu'on retient */
.celeo-modele--celeo{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.9);
}

.celeo-modele__etiquette{
  font-size: var(--celeo-t-micro);
  letter-spacing: var(--celeo-ls-kicker);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--celeo-gris);
  margin: 0 0 var(--celeo-e-6);
}
.celeo-modele--celeo .celeo-modele__etiquette{
  display:inline-flex; align-items:center; gap:.6em;
  color: var(--celeo-blanc);
}
.celeo-modele--celeo .celeo-modele__etiquette::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--celeo-signal);
  box-shadow: 0 0 8px 1px var(--celeo-signal-halo);
}

/* --- Les trois étapes, empilées verticalement --- */
.celeo-modele__etapes{
  list-style:none; margin:0 0 var(--celeo-e-8); padding:0;
  display:grid; gap: var(--celeo-e-6);
}
.celeo-etape{
  position:relative;
  font-family: var(--celeo-font-titre);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: var(--celeo-ls-titre);
  font-weight: 650;
  padding: var(--celeo-e-4) var(--celeo-e-6);
  border: 1px solid var(--celeo-ligne);
  border-radius: var(--celeo-radius-s);
  color: var(--celeo-gris);
  text-align:center;
}
/* Flèche de liaison, entre deux étapes */
.celeo-etape:not(:last-child)::after{
  content:"↓";
  position:absolute; left:50%; bottom: calc(-1 * var(--celeo-e-6));
  transform: translate(-50%, 20%);
  font-size: .75em; line-height:1; color: var(--celeo-gris); opacity:.65;
  border:0; padding:0;
}

/* L'étape qui fait toute la différence */
.celeo-modele--marche .celeo-etape--pivot{
  color: var(--celeo-gris);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.35);
}
.celeo-modele--celeo .celeo-etape{
  color: var(--celeo-blanc);
  border-color: rgba(255,255,255,.28);
}
/* Vignette « Dissuader » : fond VERT (demande client), au lieu du blanc. */
.celeo-modele--celeo .celeo-etape--pivot{
  background: var(--celeo-signal);
  color: var(--celeo-nuit);
  border-color: var(--celeo-signal);
  font-weight: 750;
  transform: scale(1.06);
}
.celeo-modele--celeo .celeo-etape:not(:last-child)::after{ color: var(--celeo-blanc); opacity:.55; }

/* --- Le verdict --- */
.celeo-modele__verdict{
  margin:auto 0 0; font-size: var(--celeo-t-base); color: var(--celeo-gris);
  display:flex; align-items:baseline; gap:.6em;
}
.celeo-modele__verdict::before{
  content:"✕"; font-size:.85em; opacity:.8; flex:0 0 auto;
}
.celeo-modele--celeo .celeo-modele__verdict{ color: var(--celeo-blanc); }
.celeo-modele--celeo .celeo-modele__verdict::before{ content:"✓"; }
.celeo-modele__verdict strong{ color: inherit; font-weight:700; }

/* --- Charnière entre les deux colonnes --- */
.celeo-modeles__vs{
  margin:0; align-self:center;
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--celeo-ligne);
  font-family: var(--celeo-font-mono);
  font-size: var(--celeo-t-micro);
  letter-spacing:.12em; text-transform:uppercase;
  color:#5F7183;
  flex:0 0 auto;
}
.celeo-section--clair .celeo-modeles__vs,
.celeo-section--casse .celeo-modeles__vs{ border-color: var(--celeo-ligne-claire); }
@media (max-width:820px){
  .celeo-modeles__vs{ justify-self:center; }
}

@media (max-width:560px){
  .celeo-modele{ padding: var(--celeo-e-6); }
  .celeo-modele__etapes{ gap: var(--celeo-e-4); }
  .celeo-etape{ font-size:1.05rem; }
  .celeo-etape:not(:last-child)::after{ right: calc(-1 * var(--celeo-e-4)); }
}

/* Récit chronométré */
.celeo-sequence{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.celeo-sequence li{
  padding: var(--celeo-e-4) 0;
  border-bottom:1px solid var(--celeo-ligne);
  font-family:var(--celeo-font-titre);
  font-size:var(--celeo-t-h3);
  letter-spacing:var(--celeo-ls-titre);
  color:var(--celeo-gris);
  display:flex; align-items:baseline; gap:var(--celeo-e-4);
}
.celeo-sequence li:last-child{ border-bottom:0; color:var(--celeo-blanc); }
.celeo-sequence span{
  font-family:var(--celeo-font-mono); font-size:var(--celeo-t-micro);
  color:#5F7183; flex:0 0 3rem;
}
.celeo-sequence li:last-child span{ color: var(--celeo-blanc); }
/* Dénouement « Il repart » : passe au vert « signal » pour l'impact visuel
   (placé après la règle :last-child, même spécificité → prime par l'ordre). */
.celeo-sequence li.est-repart{ color: var(--celeo-signal); }

/* =========================================================
   CARROUSEL SECTEURS
   Vignettes défilantes : le prospect doit reconnaître SON site.
   Défilement natif avec accroche (scroll-snap), flèches en appoint.
   ========================================================= */
.celeo-carrousel{
  position:relative;
  /* déborde la gouttière pour que les cartes filent hors écran */
  margin-inline: calc(-1 * var(--celeo-gouttiere));
}
.celeo-carrousel__piste{
  display:flex; gap: var(--celeo-e-4);
  overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type: x mandatory;
  padding: var(--celeo-e-2) var(--celeo-gouttiere) var(--celeo-e-6);
  scrollbar-width:none;
}
.celeo-carrousel__piste::-webkit-scrollbar{ display:none; }

.celeo-secteur-carte{
  position:relative; flex:0 0 auto;
  width: clamp(230px, 24vw, 300px);
  aspect-ratio: 4/5;
  border-radius: var(--celeo-radius);
  overflow:hidden;
  scroll-snap-align:start;
  text-decoration:none;
  background: var(--celeo-nuit-2);
  transition: transform var(--celeo-transition), box-shadow var(--celeo-transition);
}
.celeo-secteur-carte:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -32px rgba(7,11,16,.6);
}
.celeo-secteur-carte img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.celeo-secteur-carte:hover img{ transform: scale(1.06); }
.celeo-secteur-carte::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,11,16,.10) 30%, rgba(7,11,16,.88) 100%);
}
.celeo-secteur-carte__label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: var(--celeo-e-4);
  display:flex; align-items:flex-end; justify-content:space-between; gap: var(--celeo-e-3);
  color: var(--celeo-blanc);
  font-family: var(--celeo-font-titre);
  font-size: 1.05rem; font-weight:650; line-height:1.2;
  letter-spacing: var(--celeo-ls-titre);
}
.celeo-secteur-carte__label::after{
  content:"→"; flex:0 0 auto; font-weight:400;
  transition: transform var(--celeo-transition);
}
.celeo-secteur-carte:hover .celeo-secteur-carte__label::after{ transform: translateX(4px); }

/* Carte finale : accès à l'ensemble des secteurs */
.celeo-secteur-carte--tous{
  display:flex; flex-direction:column; justify-content:space-between;
  padding: var(--celeo-e-6);
  background: var(--celeo-nuit);
  border:1px solid var(--celeo-ligne);
}
.celeo-secteur-carte--tous::after{ display:none; }
.celeo-secteur-carte--tous .celeo-secteur-carte__nombre{
  font-family: var(--celeo-font-titre); font-weight:750;
  font-size: 3rem; line-height:1; color: var(--celeo-blanc);
  letter-spacing: var(--celeo-ls-titre);
}
.celeo-secteur-carte--tous p{ color: var(--celeo-gris); font-size: var(--celeo-t-petit); margin:0; }
.celeo-secteur-carte--tous .celeo-secteur-carte__label{ position:static; padding:0; }

/* Flèches */
.celeo-carrousel__nav{
  display:flex; gap: var(--celeo-e-2);
  padding-inline: var(--celeo-gouttiere);
}
.celeo-carrousel__nav button{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--celeo-ligne-claire);
  background:transparent; color:var(--celeo-nuit);
  font-size:1rem; cursor:pointer;
  display:grid; place-items:center;
  transition: background var(--celeo-transition), border-color var(--celeo-transition), opacity var(--celeo-transition);
}
.celeo-carrousel__nav button:hover{ background: var(--celeo-nuit); color: var(--celeo-blanc); border-color: var(--celeo-nuit); }
.celeo-carrousel__nav button[disabled]{ opacity:.3; cursor:default; }
.celeo-carrousel__nav button[disabled]:hover{ background:transparent; color:var(--celeo-nuit); border-color:var(--celeo-ligne-claire); }

/* Liens texte des secteurs restants - maillage interne */
.celeo-secteurs-liens{
  margin-top: var(--celeo-e-6);
  padding-inline: var(--celeo-gouttiere);
  font-size: var(--celeo-t-petit); color: var(--celeo-gris-clair);
}
.celeo-secteurs-liens a{ color: var(--celeo-nuit); text-decoration:none; border-bottom:1px solid var(--celeo-ligne-claire); }
.celeo-secteurs-liens a:hover{ border-bottom-color: var(--celeo-nuit); }

/* Nuage de secteurs - portes d'entrée vers les silos */
.celeo-secteurs{ display:flex; flex-wrap:wrap; gap:var(--celeo-e-2); }
.celeo-secteur{
  border:1px solid var(--celeo-ligne-claire); border-radius:var(--celeo-radius-pill);
  padding:.55rem 1.1rem; font-size:var(--celeo-t-petit); color:var(--celeo-gris-clair);
  text-decoration:none; transition:all var(--celeo-transition);
}
.celeo-secteur:hover{ border-color:var(--celeo-nuit); color:var(--celeo-nuit); }

/* Bandeau de conversion */
.celeo-final{ text-align:center; }
.celeo-final .celeo-cta{ justify-content:center; }
.celeo-final .celeo-kicker{ justify-content:center; }
/* Titre de conversion : deux lignes maximum sur desktop.
   La phrase signature fait 70 caractères - il faut donc ~36 caractères
   par ligne, d'où cette largeur. Ne jamais la brider par un style inline. */
.celeo-final h2{
  max-width: 40ch;
  margin-inline:auto;
  text-wrap: balance;
}
@media (min-width: 900px){
  /* Verrou : au-delà de deux lignes, on réduit légèrement le corps
     plutôt que d'empiler des lignes courtes. */
  .celeo-final h2{ font-size: clamp(1.7rem, 2.9vw, 2.35rem); }
}
.celeo-final .celeo-lede{ margin-inline:auto; }

/* =========================================================
   RÉASSURANCE
   Bandeau de faits vérifiables, juste sous le hero.
   Aucun chiffre ne doit y figurer sans source confirmée.
   ========================================================= */
.celeo-reassurance{
  background: var(--celeo-nuit);
  border-block: 1px solid var(--celeo-ligne);
  padding-block: var(--celeo-section-y);
}
.celeo-reassurance__liste{
  max-width: var(--celeo-max); margin-inline:auto;
  padding-inline: var(--celeo-gouttiere);
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--celeo-e-12);
  list-style:none;
}
/* Cartes encadrées avec accent vert (Samuel 25/08 : plus de « En savoir
   plus », section travaillée en cartes avec du peps). */
.celeo-reassurance__liste{ gap: var(--celeo-e-6); }
.celeo-reassurance__liste li{
  display:grid; gap: var(--celeo-e-3);
  padding: var(--celeo-e-8) var(--celeo-e-6);
  border: 1px solid var(--celeo-ligne-claire);
  border-top: 3px solid var(--celeo-signal);
  border-radius: var(--celeo-radius);
  background: #fff;
  box-shadow: 0 22px 44px -32px rgba(7,11,16,.28);
  text-align: center;              /* centrage demandé client */
  justify-items: center;
  transition: transform var(--celeo-transition), box-shadow var(--celeo-transition);
}
.celeo-reassurance__liste li:hover{ transform: translateY(-3px); box-shadow: 0 28px 54px -30px rgba(7,11,16,.35); }
/* Pictogrammes VERTS. Spécificité renforcée : la règle de description
   « .celeo-reassurance--clair span » capture aussi ce <span> et gagnerait
   sinon par spécificité (0,1,1 > 0,1,0). */
.celeo-reassurance .celeo-reassurance__icone{
  display:block; color: var(--celeo-signal);
  margin: 0 auto var(--celeo-e-3);
}
.celeo-reassurance__icone svg{
  width:40px; height:40px; display:block;
  stroke: currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.celeo-reassurance strong{
  font-family: var(--celeo-font-titre);
  font-size: var(--celeo-t-h3); font-weight:700; color: var(--celeo-blanc);
  letter-spacing: var(--celeo-ls-titre); line-height:1.15;
}
.celeo-reassurance span{ font-size: var(--celeo-t-base); color: var(--celeo-gris); }
/* Lien « En savoir plus » sous chaque point : vert de signal + flèche. */
.celeo-reassurance__lien{
  display:inline-flex; align-items:center; gap:.4em;
  margin-top: var(--celeo-e-2);
  color: var(--celeo-signal); font-weight:600; font-size: var(--celeo-t-petit);
  text-decoration:none;
}
.celeo-reassurance__lien::after{ content:"→"; transition: transform var(--celeo-transition); }
.celeo-reassurance__lien:hover::after{ transform: translateX(3px); }
@media (max-width:900px){ .celeo-reassurance__liste{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .celeo-reassurance__liste{ grid-template-columns: 1fr; } }

/* Garanties détaillées, en cartes */
.celeo-garantie{ display:grid; gap:.5rem; }
.celeo-garantie__titre{
  font-family: var(--celeo-font-titre); font-weight:650;
  font-size: 1.05rem; letter-spacing: var(--celeo-ls-titre);
}

/* Variante claire du bandeau de réassurance */
.celeo-reassurance--clair{
  background: var(--celeo-blanc-casse);
  border-block-color: var(--celeo-ligne-claire);
}
.celeo-reassurance--clair .celeo-reassurance__liste li{ border-left-color: var(--celeo-ligne-claire); }
.celeo-reassurance--clair strong{ color: var(--celeo-nuit); }
.celeo-reassurance--clair span{ color: var(--celeo-gris-clair); }

/* =========================================================
   ACTUALITÉS
   Trois dernières publications. Alimente le blog et donne
   au site un signal de fraîcheur, très regardé en GEO.
   ========================================================= */
.celeo-actus{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--celeo-e-6); }
@media (max-width:900px){ .celeo-actus{ grid-template-columns: 1fr; } }

.celeo-actu{
  display:flex; flex-direction:column;
  border:1px solid var(--celeo-ligne-claire);
  border-radius: var(--celeo-radius);
  overflow:hidden;
  background: var(--celeo-blanc);
  text-decoration:none;
  transition: transform var(--celeo-transition), box-shadow var(--celeo-transition), border-color var(--celeo-transition);
}
.celeo-actu:hover{
  transform: translateY(-3px);
  border-color: rgba(7,11,16,.24);
  box-shadow: 0 24px 50px -30px rgba(7,11,16,.45);
}
.celeo-actu__visuel{ aspect-ratio:16/10; background: var(--celeo-blanc-casse); overflow:hidden; }
.celeo-actu__visuel img{ width:100%; height:100%; object-fit:cover; }
.celeo-actu__corps{ padding: var(--celeo-e-6); display:flex; flex-direction:column; gap: var(--celeo-e-3); flex:1; }
.celeo-actu__meta{
  display:flex; align-items:center; gap:.6em;
  font-family: var(--celeo-font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--celeo-gris-clair);
  margin:0;
}
.celeo-actu__meta span{ width:3px; height:3px; border-radius:50%; background: currentColor; }
.celeo-actu__titre{
  font-family: var(--celeo-font-titre); font-weight:650;
  font-size: 1.2rem; line-height:1.25; letter-spacing: var(--celeo-ls-titre);
  color: var(--celeo-nuit); margin:0;
}
.celeo-actu__extrait{ font-size: var(--celeo-t-petit); color: var(--celeo-gris-clair); margin:0; }
.celeo-actu__lire{
  margin-top:auto; font-size: var(--celeo-t-petit); font-weight:600; color: var(--celeo-nuit);
  display:inline-flex; align-items:center; gap:.4em;
}
.celeo-actu__lire::after{ content:"→"; transition: transform var(--celeo-transition); }
.celeo-actu:hover .celeo-actu__lire::after{ transform: translateX(3px); }

/* =========================================================
   VARIANTES SOMBRES
   Nécessaires pour la version « bleu nuit prédominant ».
   ========================================================= */

/* -- Cartes actualités sur fond sombre -- */
.celeo-section--nuit .celeo-actu,
.celeo-section--nuit-profond .celeo-actu{
  background: var(--celeo-nuit-3);
  border-color: var(--celeo-ligne);
}
.celeo-section--nuit .celeo-actu:hover,
.celeo-section--nuit-profond .celeo-actu:hover{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.85);
}
.celeo-section--nuit .celeo-actu__visuel,
.celeo-section--nuit-profond .celeo-actu__visuel{ background: var(--celeo-nuit-2); }
.celeo-section--nuit .celeo-actu__titre,
.celeo-section--nuit-profond .celeo-actu__titre{ color: var(--celeo-blanc); }
.celeo-section--nuit .celeo-actu__extrait,
.celeo-section--nuit-profond .celeo-actu__extrait,
.celeo-section--nuit .celeo-actu__meta,
.celeo-section--nuit-profond .celeo-actu__meta{ color: var(--celeo-gris); }
.celeo-section--nuit .celeo-actu__lire,
.celeo-section--nuit-profond .celeo-actu__lire{ color: var(--celeo-blanc); }

/* -- Flèches du carrousel sur fond sombre -- */
.celeo-section--nuit .celeo-carrousel__nav button,
.celeo-section--nuit-profond .celeo-carrousel__nav button{
  border-color: var(--celeo-ligne); color: var(--celeo-blanc);
}
.celeo-section--nuit .celeo-carrousel__nav button:hover,
.celeo-section--nuit-profond .celeo-carrousel__nav button:hover{
  background: var(--celeo-blanc); color: var(--celeo-nuit); border-color: var(--celeo-blanc);
}
.celeo-section--nuit .celeo-carrousel__nav button[disabled]:hover,
.celeo-section--nuit-profond .celeo-carrousel__nav button[disabled]:hover{
  background:transparent; color:var(--celeo-blanc); border-color:var(--celeo-ligne);
}

/* -- Liens de maillage des secteurs sur fond sombre -- */
.celeo-section--nuit .celeo-secteurs-liens,
.celeo-section--nuit-profond .celeo-secteurs-liens{ color: var(--celeo-gris); }
.celeo-section--nuit .celeo-secteurs-liens a,
.celeo-section--nuit-profond .celeo-secteurs-liens a{
  color: var(--celeo-blanc); border-bottom-color: var(--celeo-ligne);
}
.celeo-section--nuit .celeo-secteurs-liens a:hover,
.celeo-section--nuit-profond .celeo-secteurs-liens a:hover{ border-bottom-color: var(--celeo-blanc); }

/* -- Pastilles de secteurs sur fond sombre -- */
.celeo-section--nuit .celeo-secteur,
.celeo-section--nuit-profond .celeo-secteur{ border-color: var(--celeo-ligne); color: var(--celeo-gris); }
.celeo-section--nuit .celeo-secteur:hover,
.celeo-section--nuit-profond .celeo-secteur:hover{ border-color: var(--celeo-blanc); color: var(--celeo-blanc); }

/* =========================================================
   VARIANTES CLAIRES DES PANNEAUX DE COMPARAISON
   ========================================================= */
.celeo-section--clair .celeo-modele,
.celeo-section--casse .celeo-modele{ border-color: var(--celeo-ligne-claire); }

.celeo-section--clair .celeo-modele--celeo,
.celeo-section--casse .celeo-modele--celeo{
  background: var(--celeo-blanc);
  border-color: rgba(7,11,16,.28);
  box-shadow: 0 26px 60px -34px rgba(7,11,16,.45);
}
.celeo-section--clair .celeo-modele__etiquette,
.celeo-section--casse .celeo-modele__etiquette{ color: var(--celeo-gris-clair); }
.celeo-section--clair .celeo-modele--celeo .celeo-modele__etiquette,
.celeo-section--casse .celeo-modele--celeo .celeo-modele__etiquette{ color: var(--celeo-nuit); }

.celeo-section--clair .celeo-etape,
.celeo-section--casse .celeo-etape{ color: var(--celeo-gris-clair); border-color: var(--celeo-ligne-claire); }
.celeo-section--clair .celeo-etape:not(:last-child)::after,
.celeo-section--casse .celeo-etape:not(:last-child)::after{ color: var(--celeo-gris-clair); }

.celeo-section--clair .celeo-modele--marche .celeo-etape--pivot,
.celeo-section--casse .celeo-modele--marche .celeo-etape--pivot{
  text-decoration-color: rgba(7,11,16,.35);
}
.celeo-section--clair .celeo-modele--celeo .celeo-etape,
.celeo-section--casse .celeo-modele--celeo .celeo-etape{ color: var(--celeo-nuit); border-color: rgba(7,11,16,.24); }
.celeo-section--clair .celeo-modele--celeo .celeo-etape--pivot,
.celeo-section--casse .celeo-modele--celeo .celeo-etape--pivot{
  background: var(--celeo-signal); color: var(--celeo-nuit); border-color: var(--celeo-signal);
}
.celeo-section--clair .celeo-modele--celeo .celeo-etape:not(:last-child)::after,
.celeo-section--casse .celeo-modele--celeo .celeo-etape:not(:last-child)::after{ color: var(--celeo-nuit); }

.celeo-section--clair .celeo-modele__verdict,
.celeo-section--casse .celeo-modele__verdict{ color: var(--celeo-gris-clair); }
.celeo-section--clair .celeo-modele--celeo .celeo-modele__verdict,
.celeo-section--casse .celeo-modele--celeo .celeo-modele__verdict{ color: var(--celeo-nuit); }

.celeo-section--clair .celeo-modeles__vs::before,
.celeo-section--clair .celeo-modeles__vs::after,
.celeo-section--casse .celeo-modeles__vs::before,
.celeo-section--casse .celeo-modeles__vs::after{ background: var(--celeo-ligne-claire); }

/* Séquence chronométrée sur fond clair */
.celeo-section--clair .celeo-sequence li,
.celeo-section--casse .celeo-sequence li{ border-bottom-color: var(--celeo-ligne-claire); color: var(--celeo-gris-clair); }
.celeo-section--clair .celeo-sequence li:last-child,
.celeo-section--casse .celeo-sequence li:last-child{ color: var(--celeo-nuit); }
.celeo-section--clair .celeo-sequence li:last-child span,
.celeo-section--casse .celeo-sequence li:last-child span{ color: var(--celeo-nuit); }

/* =========================================================
   FAQ - utile aux visiteurs, et fortement repris par les IA
   ========================================================= */
.celeo-faq{ display:grid; gap:0; border-top:1px solid var(--celeo-ligne-claire); }
.celeo-section--nuit .celeo-faq,
.celeo-section--nuit-profond .celeo-faq{ border-top-color: var(--celeo-ligne); }
.celeo-faq details{
  border-bottom:1px solid var(--celeo-ligne-claire);
  padding: var(--celeo-e-4) 0;
}
.celeo-section--nuit .celeo-faq details,
.celeo-section--nuit-profond .celeo-faq details{ border-bottom-color: var(--celeo-ligne); }
.celeo-faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:var(--celeo-e-4);
  font-family: var(--celeo-font-titre);
  font-size: var(--celeo-t-h3); font-weight:650;
  letter-spacing: var(--celeo-ls-titre);
}
.celeo-faq summary::-webkit-details-marker{ display:none; }
.celeo-faq summary::after{
  content:"+"; font-family: var(--celeo-font-mono); font-size:1.25rem;
  flex:0 0 auto; transition: transform var(--celeo-transition);
}
.celeo-faq details[open] summary::after{ transform: rotate(45deg); }
.celeo-faq details > p{ margin: var(--celeo-e-4) 0 0; max-width: var(--celeo-max-texte); }

/* Emplacement d'asset non encore livré */
.celeo-placeholder{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(41,224,107,.30), transparent 62%),
    radial-gradient(1200px 700px at 20% 90%, rgba(11,20,32,.9), transparent 70%),
    linear-gradient(180deg, #0A121B 0%, #070B10 100%);
}
.celeo-placeholder::after{
  content:"";
  position:absolute; left:50%; top:16%; transform:translateX(-50%);
  width:3px; height:46%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.06));
  box-shadow:0 0 40px 6px var(--celeo-signal-halo);
}

/* =========================================================
   11. NAVIGATION AU DÉFILEMENT
   Translucide au-dessus du hero, opaque dès le premier scroll.
   La classe est posée par le script du thème.
   ========================================================= */
.celeo-nav{
  transition: background var(--celeo-transition), backdrop-filter var(--celeo-transition), border-color var(--celeo-transition);
  border-bottom: 1px solid transparent;
}
body.home .celeo-nav.est-figee{
  /* déjà sticky : au scroll on ne fait qu'opacifier le fond */
  background: rgba(7,11,16,.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--celeo-ligne);
  padding-block: var(--celeo-e-3);
}
.celeo-nav.est-figee{ padding-block: var(--celeo-e-3); }

/* =========================================================
   13. ARTICLES ET PAGES INTÉRIEURES
   Gabarit de lecture pour le blog et les pages sans mise en
   page sur mesure. Les pages construites en blocs HTML
   pleine largeur n'utilisent pas ce conteneur.
   ========================================================= */
.celeo-article{
  padding-block: var(--celeo-section-y);
  padding-inline: var(--celeo-gouttiere);
  background: var(--celeo-blanc);
}
.celeo-article__entete{
  max-width: var(--celeo-max-texte); margin:0 auto var(--celeo-e-12);
}
.celeo-article__meta{
  font-family: var(--celeo-font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--celeo-gris-clair); margin:0 0 var(--celeo-e-4);
}
.celeo-article__corps{ max-width: var(--celeo-max-texte); margin-inline:auto; }
.celeo-article__corps > *{ margin-block: var(--celeo-e-6); }
.celeo-article__corps h2{ margin-top: var(--celeo-e-12); }
.celeo-article__corps h3{ margin-top: var(--celeo-e-8); }
.celeo-article__corps ul,
.celeo-article__corps ol{ padding-left: var(--celeo-e-6); }
.celeo-article__corps li{ margin-block: var(--celeo-e-2); }
.celeo-article__corps img{ border-radius: var(--celeo-radius); }
.celeo-article__corps a{ color: var(--celeo-nuit); text-decoration:underline; }
.celeo-article__corps blockquote{
  border-left:2px solid var(--celeo-ligne-claire);
  padding-left: var(--celeo-e-6); font-style:normal;
  color: var(--celeo-nuit);
}

/* Bandeau de titre des pages intérieures */
.celeo-entete-page{
  background: var(--celeo-nuit);
  color: var(--celeo-blanc);
  padding-block: var(--celeo-e-24) var(--celeo-e-16);
  padding-inline: var(--celeo-gouttiere);
}
.celeo-entete-page > *{ max-width: var(--celeo-max); margin-inline:auto; }
.celeo-entete-page h1{ margin:0; }

/* =========================================================
   12. BARRE DE CONTACT MOBILE
   Appel et devis toujours accessibles au pouce.
   ========================================================= */
/* Deux pilules flottantes côte à côte (retour Samuel 24/08), plus de barre
   pleine largeur. pointer-events:none sur le conteneur : seuls les boutons
   captent le tap, la page reste cliquable entre et autour. */
.celeo-sticky{
  display:none;
  position:fixed; left:0; right:0; bottom:calc(.9rem + env(safe-area-inset-bottom, 0px)); z-index:60;
  justify-content:center; gap:.6rem; padding:0 1rem;
  background:transparent; pointer-events:none;
}
.celeo-sticky a{
  pointer-events:auto;
  flex:0 1 auto; max-width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center; text-decoration:none; white-space:nowrap;
  padding:.8em 1.5em; border-radius: var(--celeo-radius-pill);
  font-size: var(--celeo-t-petit); font-weight:600;
  background: var(--celeo-nuit); color: var(--celeo-blanc);
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 28px -10px rgba(7,11,16,.55);
}
.celeo-sticky a.est-primaire{ background: var(--celeo-signal); color: var(--celeo-nuit); border-color:transparent; }
@media (max-width: 780px){
  .celeo-sticky{ display:flex; }
  body{ padding-bottom: 4.5rem; }
}
.celeo-note-asset{
  position:absolute; bottom:var(--celeo-e-4); right:var(--celeo-gouttiere); z-index:6;
  font-family:var(--celeo-font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.42);
}
.celeo-asset-vide{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:180px; padding:var(--celeo-e-6); text-align:center;
  font-family:var(--celeo-font-mono); font-size:var(--celeo-t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--celeo-gris);
}

/* =========================================================
   10. PLEINE LARGEUR DANS GUTENBERG
   Neutralise la contrainte de largeur du thème parent pour les
   blocs HTML personnalisés, qui gèrent eux-mêmes leur mise en page.
   ========================================================= */
.wp-site-blocks > .wp-block-html,
.entry-content > .wp-block-html,
.wp-block-post-content > .wp-block-html{
  max-width: none !important;
  margin-inline: 0 !important;
}

/* =========================================================
   11. CENTRAGE MOBILE (<= 900px) - demande client
   Sur petit écran, tout le contenu est centré : sur-titres,
   titres, textes, boutons, médias et cartes (déjà en 1 colonne).
   Placé en fin de feuille pour primer sur les alignements de base.
   ========================================================= */
@media (max-width: 900px){
  /* Hero + corps de section : texte centré. */
  .celeo-hero--gauche,
  .celeo-section .celeo-wrap{ text-align: center; }
  /* Le bloc hero a un text-align:left explicite (0,2,0) : on le neutralise
     avec la même spécificité, en fin de feuille pour primer. */
  .celeo-hero--gauche .celeo-hero__contenu{
    text-align: center; margin-inline: auto;
  }

  /* Sur-titres, accroches et boutons recentrés. */
  .celeo-kicker{ justify-content: center; }
  .celeo-lede{ margin-inline: auto; }
  .celeo-cta{ justify-content: center; }

  /* La phrase signature : on retire la barre latérale gauche,
     qui n'a plus de sens une fois le texte centré. */
  .celeo-signature{
    margin-inline: auto; text-align: center;
    border-left: 0; padding-left: 0;
  }

  /* Médias et figures centrés. */
  .celeo-section figure,
  .celeo-section .celeo-media{ margin-inline: auto; }

  /* Contenu des cartes centré. */
  .celeo-carte{ text-align: center; }

  /* FAQ : le titre de section est centré, mais les réponses
     restent alignées à gauche pour la lisibilité (les questions
     le sont déjà via leur agencement flex). */
  .celeo-faq details > p{ text-align: left; }
}

/* =========================================================
   AJOUTS 07/08 : VS comparatif · cartes cliquables · alerte
   ========================================================= */

/* -- Colonne « Tour CELEO » mise en avant (sur fond clair) --
   Colonne blanche encadrée + en-tête nuit = colonne vedette, sans recourir au
   vert (réservé au point de signal de l'en-tête). */
.celeo-section--clair .celeo-compare__celeo,
.celeo-section--casse .celeo-compare__celeo{
  background: var(--celeo-blanc);
  box-shadow: inset 1px 0 0 var(--celeo-ligne-claire),
              inset -1px 0 0 var(--celeo-ligne-claire);
  color: var(--celeo-nuit); font-weight: 600;
}
.celeo-section--clair .celeo-compare__row:last-child .celeo-compare__celeo,
.celeo-section--casse .celeo-compare__row:last-child .celeo-compare__celeo{
  box-shadow: inset 1px 0 0 var(--celeo-ligne-claire),
              inset -1px 0 0 var(--celeo-ligne-claire),
              inset 0 -1px 0 var(--celeo-ligne-claire);
}
.celeo-section--clair .celeo-compare__head .celeo-compare__celeo,
.celeo-section--casse .celeo-compare__head .celeo-compare__celeo{
  background: var(--celeo-nuit); color: var(--celeo-blanc);
  box-shadow: inset 1px 0 0 var(--celeo-nuit), inset -1px 0 0 var(--celeo-nuit);
}
/* En pile mobile, la colonne vedette garde son fond blanc mais sans encadrement latéral. */
@media (max-width: 680px){
  .celeo-section--clair .celeo-compare__celeo,
  .celeo-section--casse .celeo-compare__celeo{ box-shadow: none; }
  .celeo-section--clair .celeo-compare__head .celeo-compare__celeo,
  .celeo-section--casse .celeo-compare__head .celeo-compare__celeo{ box-shadow: none; }
}

/* -- Carte entièrement cliquable (gamme) --
   L'<article> devient un <a> : tout le bloc est cliquable, le lien-flèche
   n'est plus qu'un repère visuel qui réagit au survol de la carte. */
a.celeo-carte{ display: block; text-decoration: none; color: inherit; }
a.celeo-carte .celeo-lien-fleche{ pointer-events: none; }
a.celeo-carte:hover .celeo-lien-fleche{ color: var(--celeo-signal); }
a.celeo-carte:hover .celeo-lien-fleche::after{ transform: translateX(4px); }

/* -- Section « L'alerte en direct » : mockups app + canaux --
   Contenu centré, écrans bien espacés, titres de groupe affirmés. */
.celeo-section--alerte .celeo-wrap{ text-align: center; }
.celeo-section--alerte .celeo-lede{ margin-left: auto; margin-right: auto; }

.celeo-alerte-groupe{ margin-top: var(--celeo-e-12); }
.celeo-alerte-groupe__titre{
  font-family: var(--celeo-font-titre);
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; color: var(--celeo-nuit);
  margin: 0 auto var(--celeo-e-8);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.celeo-alerte-groupe__titre::before,
.celeo-alerte-groupe__titre::after{
  content:""; flex: 0 1 64px; height: 2px; border-radius: 2px;
  background: var(--celeo-ligne-claire);
}
.celeo-section--nuit .celeo-alerte-groupe__titre,
.celeo-section--nuit-profond .celeo-alerte-groupe__titre{ color: var(--celeo-blanc); }
.celeo-section--nuit .celeo-alerte-groupe__titre::before,
.celeo-section--nuit .celeo-alerte-groupe__titre::after,
.celeo-section--nuit-profond .celeo-alerte-groupe__titre::before,
.celeo-section--nuit-profond .celeo-alerte-groupe__titre::after{ background: var(--celeo-ligne); }

.celeo-alerte-grille{ display: grid; gap: var(--celeo-e-8); grid-template-columns: 1fr; justify-items: center; }
@media (min-width: 440px){ .celeo-alerte-grille--4{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px){ .celeo-alerte-grille--4{ grid-template-columns: repeat(4, 1fr); } }
.celeo-alerte-grille--2{ max-width: 760px; margin-inline: auto; }
@media (min-width: 560px){ .celeo-alerte-grille--2{ grid-template-columns: repeat(2, 1fr); } }
.celeo-alerte-grille .celeo-illu{ width: 100%; }
.celeo-alerte-grille .celeo-illu__note{ text-align: center; }

/* Sur section claire, le cadre des mockups garde son fond sombre (écran de
   téléphone), mais la bordure s'adoucit. */
.celeo-section--casse .celeo-illu,
.celeo-section--clair .celeo-illu{ border-color: var(--celeo-ligne-claire); }
.celeo-section--casse .celeo-illu__note,
.celeo-section--clair .celeo-illu__note{ color: var(--celeo-gris-clair); }

/* =========================================================
   HEADER V2 TRANSPARENT sur la home (doublon accueil-v2)
   Actif seulement quand body porte .chv2-hero-nav (posée par
   functions.php sur la page accueil-v2). Placé ici, dans la
   feuille globale versionnée, pour un cache navigateur fiable.
   ========================================================= */
body.chv2-hero-nav .celeo-nav.chdr2{
  position: sticky; top: 0;
  --celeo-nav-h: 82px;
  margin-bottom: calc(-1 * var(--celeo-nav-h));
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.chv2-hero-nav.admin-bar .celeo-nav.chdr2{ top: 32px; }
body.chv2-hero-nav .celeo-nav.chdr2.est-figee{
  background: rgba(7,11,16,.94);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--celeo-ligne);
}

/* =========================================================
   CORPS D'ARTICLE DE BLOG (single.html — fond clair)
   ========================================================= */
.celeo-article__corps{ max-width: 720px; }
.celeo-article__corps .celeo-lede{ font-size: var(--celeo-t-lede); color: var(--celeo-nuit); margin-bottom: var(--celeo-e-8); }
.celeo-article__corps h2{ margin-top: var(--celeo-e-10); }
.celeo-article__corps h3{ margin-top: var(--celeo-e-6); font-size: var(--celeo-t-h3); }
.celeo-article__corps p, .celeo-article__corps li{ color: var(--celeo-gris-clair); line-height: 1.75; }
.celeo-article__corps ul, .celeo-article__corps ol{ margin: var(--celeo-e-4) 0; padding-left: 1.3em; }
.celeo-article__corps li{ margin-bottom: .5rem; }
.celeo-article__cta{ margin-top: var(--celeo-e-12); padding: var(--celeo-e-8); border: 1px solid var(--celeo-ligne-claire); border-radius: var(--celeo-radius); background: var(--celeo-blanc-casse); text-align: center; }
.celeo-article__cta p{ color: var(--celeo-nuit); margin: 0 auto var(--celeo-e-6); max-width: 46ch; font-weight: 500; }
.celeo-article__cta .celeo-btn{ margin: .3rem; }

/* ===== Article : box "Appeler un conseiller" (milieu d'article) ===== */
.celeo-article__appel{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; justify-content:space-between; background:var(--celeo-signal); color:var(--celeo-nuit); border-radius:16px; padding:clamp(1.3rem,3vw,1.8rem) clamp(1.4rem,3vw,2rem); margin:2.6rem 0; }
.celeo-article__appel-txt{ flex:1 1 320px; }
.celeo-article__appel-titre{ font-weight:800; font-size:1.15rem; margin:0 0 .25em; color:var(--celeo-nuit); }
.celeo-article__appel-sous{ margin:0; color:rgba(7,11,16,.82); font-size:.97rem; line-height:1.5; }
.celeo-article__appel .celeo-btn{ background:var(--celeo-nuit); color:#fff; border-color:var(--celeo-nuit); white-space:nowrap; flex:0 0 auto; }
.celeo-article__appel .celeo-btn:hover{ background:#000; color:#fff; }

/* ===== Comparatif CELEO vs alternative : colonne CELEO verte, alternative rouge ===== */
.celeo-section--casse .celeo-compare__row:not(.celeo-compare__head) .celeo-compare__celeo{ background:rgba(41,224,107,.12); }
.celeo-section--casse .celeo-compare__row:not(.celeo-compare__head) .celeo-compare__cell:nth-child(3){ background:rgba(214,64,64,.10); }
.celeo-section--clair .celeo-compare__row:not(.celeo-compare__head) .celeo-compare__celeo{ background:rgba(41,224,107,.12); }
.celeo-section--clair .celeo-compare__row:not(.celeo-compare__head) .celeo-compare__cell:nth-child(3){ background:rgba(214,64,64,.10); }

/* ===== Titres de section et de hero centrés (global) ===== */
.celeo-section .celeo-wrap > .celeo-kicker{ justify-content:center; }
.celeo-section .celeo-wrap > h2{ text-align:center; }
.celeo-section .celeo-wrap > .celeo-lede{ text-align:center; margin-inline:auto; }
.celeo-hero--page .celeo-hero__contenu{ text-align:center; align-items:center; margin-inline:auto; }
.celeo-hero--page .celeo-hero__contenu .celeo-kicker{ justify-content:center; }
.celeo-hero--page .celeo-hero__contenu .celeo-lede{ margin-inline:auto; }
.celeo-hero--page .celeo-hero__contenu .celeo-cta{ justify-content:center; }

/* Corps de section sous un titre centré : CENTRÉ lui aussi (retour client 22/08,
   annule la consigne du 19/08 « texte à gauche ») : pas d'effet entonnoir. Le texte
   peut être plus large que le titre (max-width 820-840px) mais à marges symétriques. */
.celeo-section .celeo-wrap:not(.celeo-final) > .celeo-lede{ text-align:center; margin-inline:auto; }
.celeo-section .celeo-wrap > p:not(.celeo-kicker):not(.celeo-lede){ text-align:center; margin-inline:auto; }

/* Kicker de section centré (aligné avec le titre centré) */
.celeo-section .celeo-wrap > .celeo-kicker{ display:flex; justify-content:center; }

/* ===== Carte avec vignette image ===== */
.celeo-carte--img{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.celeo-carte--img > img{ width:100%; height:172px; object-fit:cover; display:block; }
.celeo-carte--img .celeo-carte__txt{ padding:var(--celeo-e-6); display:flex; flex-direction:column; flex:1 1 auto; }
.celeo-carte--img .celeo-carte__txt h3{ margin:0 0 .4em; }
.celeo-carte--img .celeo-carte__txt p{ margin:0; }
.celeo-carte--img .celeo-carte__lire{ margin-top:auto; padding-top:var(--celeo-e-3); color:var(--celeo-nuit); font-weight:600; }
.celeo-section--casse .celeo-carte--img:hover .celeo-carte__lire{ color:#0c8a3e; }

/* Lire l'article : bouton vert centré, aligné en bas des cartes */
.celeo-section--casse .celeo-carte--img .celeo-carte__lire{ margin-top:auto; align-self:center; display:inline-flex; align-items:center; background:var(--celeo-signal); color:var(--celeo-nuit); font-weight:700; padding:.55rem 1.15rem; border-radius:999px; font-size:.88rem; }
.celeo-section--casse .celeo-carte--img:hover .celeo-carte__lire{ background:#22c95f; color:var(--celeo-nuit); }
/* Cibles secteur : cartes à gauche + image à droite */
.secteur-cibles{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--celeo-e-6); align-items:stretch; margin-top:var(--celeo-e-8); }
.secteur-cibles__cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--celeo-e-4); }
.secteur-cibles__media{ border-radius:var(--celeo-radius); overflow:hidden; border:1px solid var(--celeo-ligne-claire); min-height:100%; }
.secteur-cibles__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:900px){ .secteur-cibles{ grid-template-columns:1fr; } .secteur-cibles__cards{ grid-template-columns:1fr 1fr; } .secteur-cibles__media{ min-height:220px; } }
@media(max-width:560px){ .secteur-cibles__cards{ grid-template-columns:1fr; } }

/* Fix : forcer la carte-image en colonne flex (bouton aligné en bas) */
.celeo-section--casse .celeo-carte--img{ display:flex; flex-direction:column; height:100%; padding:0; overflow:hidden; }

/* ===== Carte France (villes) ===== */
.celeo-mapsec{ text-align:center; }
.celeo-map{ max-width:520px; margin:var(--celeo-e-8) auto 0; }
.celeo-map svg{ width:100%; height:auto; display:block; overflow:visible; }
.celeo-map__fr{ fill:var(--celeo-nuit-3); stroke:rgba(255,255,255,.16); stroke-width:1.5; }
.celeo-pin__halo{ fill:var(--celeo-signal); opacity:.16; }
.celeo-pin__dot{ fill:var(--celeo-signal); }
.celeo-pin__label{ fill:var(--celeo-blanc); font-size:12px; font-weight:700; text-anchor:middle; opacity:0; paint-order:stroke; stroke:var(--celeo-nuit); stroke-width:3px; }
.celeo-pin.is-current .celeo-pin__dot{ r:7; }
.celeo-pin.is-current .celeo-pin__label{ opacity:1; }
.celeo-pin.is-current .celeo-pin__halo{ opacity:.5; transform-origin:center; transform-box:fill-box; animation:celeo-ping 2s ease-out infinite; }
@keyframes celeo-ping{ 0%{ transform:scale(.5); opacity:.5; } 70%{ transform:scale(2.6); opacity:0; } 100%{ opacity:0; } }
.celeo-map__note{ color:var(--celeo-gris); font-size:.9rem; margin-top:var(--celeo-e-6); }

/* Box conseiller : texte lisible sur vert */
.celeo-article__appel-titre{ color:var(--celeo-nuit); }
.celeo-article__appel-sous{ color:var(--celeo-nuit); opacity:.88; }
/* Boutons : jamais de soulignement */
.celeo-article .celeo-btn, .celeo-article__appel .celeo-btn, .celeo-article__cta .celeo-btn{ text-decoration:none !important; }

/* ===================================================================
   Refonte articles (single.html) : hero, image à la une, espacement
   =================================================================== */
.celeo-arthead{ max-width:800px; margin:0 auto; padding:var(--celeo-e-16) var(--celeo-gouttiere) var(--celeo-e-8); }
.celeo-arthead .celeo-fil{ margin:0 0 var(--celeo-e-6); font-size:.85rem; color:var(--celeo-gris-clair); display:flex; gap:.5em; flex-wrap:wrap; align-items:center; }
.celeo-arthead .celeo-fil a{ color:var(--celeo-gris-clair); text-decoration:none; }
.celeo-arthead .celeo-fil a:hover{ color:var(--celeo-nuit); text-decoration:underline; }
.celeo-arthead .celeo-fil span[aria-hidden]{ opacity:.5; }
.celeo-art__cat{ font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:#0c8a3e; margin:0 0 .7rem; }
.celeo-art__cat a{ color:#0c8a3e; text-decoration:none; }
.celeo-art__title{ font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.14; letter-spacing:-.02em; margin:0 0 .55rem; color:var(--celeo-nuit); }
.celeo-art__date{ color:var(--celeo-gris-clair); font-size:.9rem; margin:0; }
.celeo-artcover{ max-width:1000px; margin:0 auto var(--celeo-e-12); padding-inline:var(--celeo-gouttiere); }
.celeo-artcover img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--celeo-radius); display:block; }
.celeo-artwrap{ max-width:748px; margin:0 auto; padding:0 var(--celeo-gouttiere) var(--celeo-e-24); }

/* Typographie du corps (enfants directs, pour ne pas toucher box conseiller / CTA) */
.celeo-article{ max-width:none; margin:0; }
.celeo-article > p{ font-size:1.09rem; line-height:1.8; color:#28323c; margin:0 0 1.5em; }
.celeo-article > p.celeo-lede{ font-size:1.28rem; line-height:1.6; color:var(--celeo-nuit); font-weight:500; margin:0 0 1.7em; }
.celeo-article > h2{ font-size:clamp(1.45rem,3vw,1.9rem); line-height:1.2; letter-spacing:-.01em; color:var(--celeo-nuit); margin:2.3em 0 .6em; }
.celeo-article > h3{ font-size:1.24rem; line-height:1.3; color:var(--celeo-nuit); margin:1.9em 0 .55em; }
.celeo-article > ul, .celeo-article > ol{ margin:0 0 1.6em; padding-left:1.4em; }
.celeo-article > ul > li, .celeo-article > ol > li{ font-size:1.09rem; line-height:1.75; color:#28323c; margin-bottom:.7em; padding-left:.2em; }
.celeo-article > ul > li::marker{ color:#0c8a3e; }
.celeo-article strong{ color:var(--celeo-nuit); font-weight:700; }
.celeo-article > p a, .celeo-article > ul a, .celeo-article > ol a{ color:#0c8a3e; text-decoration:underline; text-underline-offset:2px; }
.celeo-article__aussi{ background:var(--celeo-blanc-casse); border-radius:var(--celeo-radius); padding:var(--celeo-e-6) var(--celeo-e-8); list-style:none; }
.celeo-article__aussi li{ margin-bottom:.6em; }
.celeo-article__aussi li:last-child{ margin-bottom:0; }
/* espace autour box conseiller et CTA */
.celeo-article__appel{ margin:2.6rem 0; }
.celeo-article__cta{ margin-top:2.6rem; }
@media(max-width:640px){ .celeo-artwrap{ padding-bottom:var(--celeo-e-16); } }

/* Pins carte cliquables + CTA de section centré */
.celeo-pin{ cursor:pointer; }
.celeo-pin:hover .celeo-pin__dot{ r:9; }
.celeo-pin:hover .celeo-pin__label{ opacity:1; }
.celeo-pin:focus-visible{ outline:none; }
.celeo-pin:focus-visible .celeo-pin__dot{ r:9; }
.celeo-pin:focus-visible .celeo-pin__label{ opacity:1; }
.celeo-section .celeo-wrap > .celeo-cta{ justify-content:center; }

/* Note de sources en bas d'article */
.celeo-article__source{ font-size:.85rem; color:var(--celeo-gris-clair); font-style:italic; border-top:1px solid var(--celeo-ligne-claire); padding-top:1em; margin-top:2.5em; }

/* Alignement titres/textes : sections à en-tête en pleine largeur (façon « Notre réponse ») */
.celeo-section .celeo-wrap.celeo-reveal[style*="max-width"]{ max-width:var(--celeo-max) !important; }
.celeo-section .celeo-wrap.celeo-reveal > .celeo-lede{ max-width:840px; }
.celeo-section .celeo-wrap.celeo-reveal > p:not(.celeo-lede):not(.celeo-article__source):not(.celeo-kicker){ max-width:820px; }

/* Encarts (garantie) : titre foncé lisible sur sections claires + survol vert lisible */
.celeo-section--clair .celeo-garantie__titre,
.celeo-section--casse .celeo-garantie__titre{ color:var(--celeo-nuit); }
.celeo-section--clair .celeo-carte:hover h3,
.celeo-section--clair .celeo-carte:hover .celeo-garantie__titre,
.celeo-section--casse .celeo-carte:hover h3,
.celeo-section--casse .celeo-carte:hover .celeo-garantie__titre{ color:#0c8a3e; }

/* Responsive : badge « VS » centré et droit sur mobile (modèle marché/CELEO) */
@media (max-width:820px){
  .chv2-m2__vs{ justify-self:center; transform:none !important; }
}

/* (règle « mêmes colonnes sur mobile » du 23/08 supprimée le 25/08 : son
   !important bloquait l'empilement du comparatif ≤780) */

/* -- Anti-intrusion : atterrissage des ancres « En savoir plus » (22/08).
   La section Détection occupe au moins la hauteur de l'écran (moins l'offset
   d'ancre de 7rem) pour que la section sombre suivante ne dépasse pas sous
   la ligne de flottaison au chargement. Plafonnée pour les très grands écrans. -- */
body.page-id-48 #detection{ box-sizing: border-box; min-height: min(calc(100vh - 6rem), 1000px); }
/* Anciennes ancres (cartes) : atterrissent comme la section, titre visible. */
body.page-id-48 #detection-thermique,
body.page-id-48 #detection-ia{ scroll-margin-top: 273px; /* s'ajoute au scroll-padding-top 7rem de html */ }
@media (max-width: 960px){
  body.page-id-48 #detection-thermique,
  body.page-id-48 #detection-ia{ scroll-margin-top: 360px; }
}

/* -- Accueil : « En savoir plus » Dissuasion → section « Ce que vit l'intrus » (#intrus).
   Même logique : la section remplit l'écran pour que la section claire suivante
   ne dépasse pas sous la ligne de flottaison à l'atterrissage. -- */
body.home #intrus{
  box-sizing: border-box;
  min-height: min(100vh, 1200px);
  /* Section sombre : on annule l'offset d'ancre (7rem) pour atterrir flush sous
     le header (sombre sur sombre), sinon la section claire précédente apparaît
     dans l'interstice. Le padding haut (128px) garde le kicker sous le header. */
  scroll-margin-top: -7rem;
}

/* -- Cartes sur sections sombres : un peu plus claires (retour client 22/08).
   Base #131D28 → #1B2734 via la variable locale, bordure légèrement relevée ;
   les étapes « Ce que vit l'intrus » (.chv2-steps, CSS inline des pages) suivent. -- */
.celeo-section--nuit,
.celeo-section--nuit-profond{ --celeo-nuit-3: #1B2734; }
.celeo-section--nuit .celeo-carte,
.celeo-section--nuit-profond .celeo-carte{ background: var(--celeo-nuit-3); border-color: rgba(255,255,255,.15); }
.celeo-section .chv2-steps li{ background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.15); }

/* -- Intros et chapôs : une seule ligne quand c'est possible, sinon lignes
   équilibrées sans mot orphelin (retour client 22/08). Largeur maxi 840 → 1080px ;
   text-wrap:balance répartit les mots sur 2-3 lignes égales. -- */
.celeo-section .celeo-wrap.celeo-reveal > .celeo-lede,
.celeo-section .celeo-wrap.celeo-reveal > p:not(.celeo-lede):not(.celeo-article__source):not(.celeo-kicker){ max-width: 1080px; }
.celeo-section .celeo-lede,
.celeo-section .celeo-wrap > h2,
.celeo-section .celeo-wrap > p:not(.celeo-kicker),
.celeo-hero .celeo-lede,
.celeo-hero h1{ text-wrap: balance; }
/* Heros de pages (centrés) : bloc élargi (640 → 1080px) pour éviter les coupures inutiles. */
.celeo-hero--page .celeo-hero__contenu{ max-width: 1080px; }
/* Chapô de hero : 34rem → 60rem (la règle d'origine, ligne ~276, le bridait à 544px). */
.celeo-hero .celeo-lede{ max-width: 60rem; text-wrap: balance; }
.celeo-section .celeo-wrap > p:not(.celeo-kicker),
.celeo-section .celeo-wrap > p.celeo-lede{ text-wrap: balance; }

/* (22/08) Justification des colonnes texte testée puis RETIRÉE à la demande du client : rivières visibles, rendu jugé bizarre. Rester en alignement à gauche. */

/* -- Sections à deux colonnes : écart texte/visuel UNIQUE (retour client 22/08,
   « pas le même écart qu'au-dessus »). Les paragraphes remplissent leur colonne
   (pas de max-width, pas d'équilibrage qui les rétrécit). -- */
.celeo-grille--2{ column-gap: var(--celeo-e-16, 4rem); }
.celeo-grille--2 > div:not(.celeo-carte):not(.celeo-grille) > p:not(.celeo-kicker),
.celeo-grille--2 > div:not(.celeo-carte):not(.celeo-grille) > .celeo-lede{ max-width: none; text-wrap: pretty; }

/* -- Footer : villes d'intervention (retour client 22/08) : même grille que les colonnes
   du dessus (2fr 1fr 1fr 1fr) : titre à gauche, 3 colonnes de 5 villes alignées
   sous Solutions / Secteurs / CELEO. -- */
.celeo-footer__villes{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--celeo-e-8);
  max-width:var(--celeo-max); margin:var(--celeo-e-12) auto 0;
  padding-top:0; border-top:0; /* trait retiré (retour client 22/08) */
}
.celeo-footer__villes ul li span{ color:var(--celeo-gris); }
.celeo-footer__villes-plus{ margin:var(--celeo-e-2) 0 0; max-width:36ch; }
.celeo-footer__villes-plus a{ color:var(--celeo-blanc); font-weight:600; }
@media (max-width:900px){ .celeo-footer__villes{ grid-template-columns:1fr 1fr; } .celeo-footer__villes > div:first-child{ grid-column:1 / -1; } }
@media (max-width:600px){ .celeo-footer__villes{ grid-template-columns:1fr; } }

/* -- Cartes d'actualités : « Lire l'article → » centré dans la carte (retour client 22/08),
   accueil (.celeo-actu) et archive blog (lien « more » de l'extrait). -- */
.celeo-actu__lire{ align-self: center; justify-content: center; text-align: center; }
.celeo-blog__body .wp-block-post-excerpt__more-text{ text-align: center; }

/* -- Cartes gamme avec vignette photo de la tour à droite (retour client 22/08). -- */
a.celeo-carte.celeo-carte--tour, .celeo-carte--tour{ display:flex; align-items:center; gap:var(--celeo-e-6); } /* a.celeo-carte{display:block} est plus spécifique */
.celeo-carte--tour .celeo-carte__txt{ flex:1 1 auto; min-width:0; }
.celeo-carte--tour .celeo-carte__vignette{ flex:0 0 150px; width:150px; height:190px; object-fit:cover; border-radius:var(--celeo-radius-s); background:var(--celeo-nuit-2); }
@media (max-width:560px){
  .celeo-carte--tour{ flex-direction:column-reverse; align-items:stretch; }
  .celeo-carte--tour .celeo-carte__vignette{ width:100%; height:180px; flex-basis:auto; }
}
/* Anti-intrusion : cartes Détection entièrement centrées (icône, titre, texte). */
body.page-id-48 #detection .celeo-carte{ text-align:center; }

/* -- Anti-intrusion « Sur l'application smartphone » (22/08) : 3 écrans, téléphones sans carte. -- */
@media (min-width: 440px){ .celeo-alerte-grille--3{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px){ .celeo-alerte-grille--3{ grid-template-columns: repeat(3, 1fr); } }
.celeo-illu--nu{ background: transparent; border: 0; box-shadow: none; overflow: visible; }
.celeo-illu--nu .celeo-illu__note{ color: var(--celeo-gris-clair); text-align: center; }

/* -- Anti-intrusion, alertes (22/08) : téléphones réduits ; carte photo (centre de télésurveillance). -- */
.celeo-alerte-grille--3 .celeo-illu--nu svg{ width:80%; max-width:260px; margin-inline:auto; }
.celeo-illu--photo .celeo-illu__media{ position:relative; }
.celeo-illu--photo .celeo-illu__media img{ display:block; width:100%; height:auto; aspect-ratio:320/210; object-fit:cover; }
.celeo-illu__overlay{ position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1rem .9rem; color:#FFFFFF; font-size:var(--celeo-t-petit); line-height:1.4; background:linear-gradient(180deg, rgba(7,11,16,0), rgba(7,11,16,.85)); }

/* -- Comparatif (Anti-intrusion & pages claires) aligné sur le tableau de l'accueil (22/08) :
   en-tête blanc cassé, cellule « Tour CELEO » vert léger (plus de fond noir), en-têtes des colonnes 2-3 centrés. -- */
.celeo-section--clair .celeo-compare__head .celeo-compare__cell,
.celeo-section--casse .celeo-compare__head .celeo-compare__cell{ background: var(--celeo-blanc-casse); color: var(--celeo-nuit); box-shadow: none; }
.celeo-section--clair .celeo-compare__head .celeo-compare__celeo,
.celeo-section--casse .celeo-compare__head .celeo-compare__celeo{ background: rgba(41,224,107,.16); color: var(--celeo-nuit); box-shadow: none; }
.celeo-compare__head .celeo-compare__cell:nth-child(2),
.celeo-compare__head .celeo-compare__cell:nth-child(3){ justify-content: center; text-align: center; }

/* -- Chronologie (Dissuader) : séparateurs plus marqués sur fond sombre (retour client 22/08). -- */
.celeo-section--nuit .celeo-sequence li,
.celeo-section--nuit-profond .celeo-sequence li{ border-bottom: 1px solid rgba(255,255,255,.26); }
.celeo-section--nuit .celeo-sequence li:first-child,
.celeo-section--nuit-profond .celeo-sequence li:first-child{ border-top: 1px solid rgba(255,255,255,.26); }
.celeo-section--nuit .celeo-sequence li:last-child,
.celeo-section--nuit-profond .celeo-sequence li:last-child{ border-bottom: 1px solid rgba(255,255,255,.26); }

/* -- Comparatif : en-tête « Surveillance humaine » = point rouge + fond rouge pâle comme sa colonne (22/08). -- */
.celeo-section--clair .celeo-compare__head .celeo-compare__cell:nth-child(3),
.celeo-section--casse .celeo-compare__head .celeo-compare__cell:nth-child(3){ background: rgba(214,64,64,.10); gap: .5em; }
.celeo-compare__head .celeo-compare__cell:nth-child(3)::before{ content:""; display:inline-block; width:.6em; height:.6em; border-radius:50%; background:#b23b3b; flex:0 0 auto; }

/* -- Alertes, groupe 2 : deux cartes plus larges (760 → 1100px), contenu plus aéré (retour client 22/08). -- */
.celeo-alerte-grille--2{ max-width: 1100px; }

/* -- CTA intermédiaire (secteurs : toutes les 2 sections, retour client 22/08). -- */
.celeo-cta-inline{ margin-top: var(--celeo-e-12); display: flex; justify-content: center; gap: var(--celeo-e-3); flex-wrap: wrap; }

/* -- Pages tours : emphase visuelle forte autour du tableau comparatif (retour client 22/08). -- */
/* v2 (retour client) : plus de contour vert ni de noir ; en-tête blanc cassé comme le tableau de l'accueil,
   colonne « cette page » en vert léger, emphase par l'ombre portée uniquement. Spécificité > CSS inline des pages tours. */
.celeo-section .tour-compare{ border:1px solid var(--celeo-ligne-claire); border-radius:20px; box-shadow:0 34px 80px -40px rgba(7,11,16,.5); }
.celeo-section .tour-compare thead th{ background:var(--celeo-blanc-casse); color:var(--celeo-nuit); border-bottom:1px solid var(--celeo-ligne-claire); }
.celeo-section .tour-compare thead th a{ color:var(--celeo-nuit); }
.celeo-section .tour-compare thead th a:hover{ color:#0c8a3e; }
.celeo-section .tour-compare thead th.is-current{ background:rgba(41,224,107,.18); color:var(--celeo-nuit); }
.celeo-section .tour-compare thead th.is-current small{ color:#0c8a3e; opacity:1; }

/* -- Carte dense (pages villes + hub) : points secondaires, légende, largeur (23/08). -- */
.celeo-villes-map .celeo-map{ max-width:680px; }
.celeo-dot__c{ fill:var(--celeo-signal); opacity:.85; }
.celeo-dot{ cursor:default; }
.celeo-dot:hover .celeo-dot__c, .celeo-dot:focus-visible .celeo-dot__c{ r:6; opacity:1; }
.celeo-dot:hover .celeo-pin__label, .celeo-dot:focus-visible .celeo-pin__label{ opacity:1; }
.celeo-dot:focus-visible{ outline:none; }
.celeo-map__legende{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--celeo-e-3) var(--celeo-e-8); margin-top:var(--celeo-e-6); color:var(--celeo-gris); font-size:var(--celeo-t-petit); }
.celeo-map__legende span{ display:inline-flex; align-items:center; gap:.5em; }
.celeo-map__legende i{ display:inline-block; border-radius:50%; background:var(--celeo-signal); }
.celeo-map__legende i.l2{ width:8px; height:8px; opacity:.85; }

/* -- Duo CNAPS / APSAD : badge VS plus petit et cartes décollées (retour client 23/08). -- */
.celeo-grille.celeo-duo-vs{ column-gap: var(--celeo-e-16); }
.celeo-duo-vs .celeo-vs{ width:38px; height:38px; font-size:.7rem; }
@media (max-width:820px){ .celeo-grille.celeo-duo-vs{ column-gap: var(--celeo-e-4); } }

/* -- Cartes « garantie » alignées sur les cartes à h3 (retour client 23/08 : uniformiser) :
   même taille de titre, même espacement titre/texte. -- */
.celeo-garantie{ gap: var(--celeo-e-3); }
.celeo-garantie > p{ margin: 0; }
.celeo-garantie__titre{ font-size: var(--celeo-t-h3); font-weight: 650; line-height: 1.25; }

/* -- Cartes compactes (étapes alignées sur une image à côté, 23/08). -- */
/* ⚠️ e-5 n'existe pas : le padding entier tombait à 0 (texte collé au bord
   des cartes « Comment ça marche » — retour Samuel 25/08). Au passage :
   léger relief gris clair demandé. */
.celeo-carte--compact{ padding: var(--celeo-e-6); border:1px solid var(--celeo-ligne-claire); }
.celeo-section .celeo-carte.celeo-carte--compact{ background:#F3F6F9; }
.celeo-section .celeo-carte.celeo-carte--compact h3, .celeo-carte--compact h3{ font-size: 1.15rem !important; margin: .15em 0 .3em; }
.celeo-carte--compact p{ font-size: .95rem; margin: 0; }
.celeo-carte--compact .celeo-pilier__num{ font-size: .7rem; }

/* -- Tableaux : filets verticaux entre toutes les cellules, en-tête compris (retour client 23/08). -- */
/* (filet gauche col.3 retiré : doublonnait le filet droit de la colonne CELEO, décalage d'1px) */
.celeo-section--clair .celeo-compare__head .celeo-compare__celeo,
.celeo-section--casse .celeo-compare__head .celeo-compare__celeo{ box-shadow: inset 1px 0 0 var(--celeo-ligne-claire), inset -1px 0 0 var(--celeo-ligne-claire); }
.celeo-section--clair .celeo-compare__head,
.celeo-section--casse .celeo-compare__head{ border-bottom: 1px solid var(--celeo-ligne-claire); }
.celeo-section .tour-compare th + th, .celeo-section .tour-compare td{ border-left: 1px solid var(--celeo-ligne-claire); }

/* -- Chronologie « texte » (phrases longues) : police de texte, pas la police des titres (23/08). -- */
.celeo-sequence--texte li{ font-family: inherit; font-size: var(--celeo-t-lede); letter-spacing: normal; line-height: 1.5; font-weight: 400; }
.celeo-sequence--texte li.est-repart, .celeo-sequence--texte li:last-child{ font-weight: 600; }

/* -- Cartes tours sur secteurs/villes (retour client 23/08) : plus de vignette en haut,
   photo à DROITE sur toute la hauteur de la carte, texte à gauche. -- */
.celeo-section .celeo-carte--img[href^="/celeo-"]{ flex-direction: row-reverse; align-items: stretch; }
.celeo-section .celeo-carte--img[href^="/celeo-"] > img{ width: 42%; flex: 0 0 42%; height: auto; min-height: 210px; object-fit: cover; }
.celeo-section .celeo-carte--img[href^="/celeo-"] .celeo-carte__txt{ justify-content: center; }
@media (max-width: 560px){
  .celeo-section .celeo-carte--img[href^="/celeo-"]{ flex-direction: column; }
  .celeo-section .celeo-carte--img[href^="/celeo-"] > img{ width: 100%; flex-basis: auto; height: 190px; min-height: 0; }
}

/* -- Grilles 1/3 · 2/3 (texte court + grande photo), retour client 23/08. -- */
.celeo-grille--12{ grid-template-columns: 1fr 2fr; column-gap: var(--celeo-e-16); }
.celeo-grille--21{ grid-template-columns: 2fr 1fr; column-gap: var(--celeo-e-16); }
.celeo-grille--12 > div, .celeo-grille--21 > div{ display:flex; flex-direction:column; justify-content:center; }
.celeo-grille--12 > div > p, .celeo-grille--21 > div > p{ max-width:none; text-wrap: pretty; }
/* La photo s'adapte à la hauteur du texte (elle n'impose plus sa propre hauteur). */
.celeo-grille--12 > figure, .celeo-grille--21 > figure{ position: relative; height: auto; min-height: 380px; }
.celeo-grille--12 > figure > img, .celeo-grille--21 > figure > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px){ .celeo-grille--12, .celeo-grille--21{ grid-template-columns: 1fr; } .celeo-grille--21 > figure{ order: 2; } .celeo-grille--12 > figure, .celeo-grille--21 > figure{ min-height: 0; aspect-ratio: 4/3; } }

/* -- Tableau tours : liens d'en-tête (Solar/Connect/Mobile) lisibles et visiblement cliquables (23/08).
   Spécificité > règle inline des pages « .celeo-section--clair .tour-compare thead th a ». -- */
.celeo-section.celeo-section--clair .tour-compare thead th a,
.celeo-section.celeo-section--casse .tour-compare thead th a{ color: var(--celeo-nuit); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(41,224,107,.7); }
.celeo-section.celeo-section--clair .tour-compare thead th a:hover,
.celeo-section.celeo-section--casse .tour-compare thead th a:hover{ color: #0c8a3e; text-decoration-color: #0c8a3e; }

/* =====================================================================
   RESPONSIVE (23/08) : moins de boîtes, pages plus courtes, menus propres
   ===================================================================== */
@media (max-width: 960px){
  /* spécificité > styles inline du header (.chdr2 .chdr2-mega) */
  .celeo-nav.chdr2 .chdr2-mega, .celeo-nav.chdr2 .chdr2-villes, .celeo-nav.chdr2 .celeo-sousmenu--services{ min-width:0; width:100%; padding:0; left:auto; right:auto; transform:none; }
  .celeo-nav.chdr2 .chdr2-mega__grid{ grid-template-columns:1fr; gap:var(--celeo-e-2); }
  .celeo-nav.chdr2 .chdr2-villes__grid{ grid-template-columns:1fr 1fr; }
  .celeo-nav.chdr2 .chdr2-mega__titre{ text-align:center; }
}
@media (max-width: 900px){
  /* paragraphes ajoutés pour l'équilibre desktop : inutiles en une colonne */
  .celeo-equilibre{ display:none !important; }
  /* photos des sections 2 colonnes : format fixe sous le texte, pas de hauteur héritée du desktop */
  .celeo-grille--12 > figure, .celeo-grille--21 > figure,
  .celeo-grille--2 > figure.celeo-media{ min-height:0 !important; aspect-ratio:16/10; height:auto; }
  .celeo-grille--2 > figure.celeo-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .celeo-grille--2 > figure.celeo-media{ position:relative; }
  /* respiration verticale réduite */
  .celeo-section{ padding-block: clamp(3rem, 10vw, 5rem); }
  /* 100svh (Samuel 25/08) : à 90svh la section suivante dépassait sous le
     hero sur mobile — même exigence que sur PC, la photo va jusqu'au bas. */
  .celeo-hero--page{ min-height: calc(100svh - var(--celeo-nav-h, 72px)); }
  /* alertes : téléphones plus petits */
  .celeo-alerte-grille--3 .celeo-illu--nu svg{ max-width:220px; }
  .celeo-alerte-groupe{ margin-top: var(--celeo-e-8); }
}
@media (max-width: 640px){
  /* Cartes : moins de boîtes. Sur sections CLAIRES, les cartes de texte (sans numéro ni photo)
     deviennent une liste séparée par un filet ; sections sombres et étapes numérotées gardent leur boîte. */
  .celeo-section--clair .celeo-carte:not(.celeo-carte--tour):not(.celeo-carte--img):not(.celeo-hub-contact):not(:has(.celeo-pilier__num)),
  .celeo-section--casse .celeo-carte:not(.celeo-carte--tour):not(.celeo-carte--img):not(.celeo-hub-contact):not(:has(.celeo-pilier__num)){
    border:0; border-radius:0; background:transparent; box-shadow:none; padding: var(--celeo-e-4) 0; border-top:1px solid var(--celeo-ligne-claire);
  }
  .celeo-section--clair .celeo-grille:has(> .celeo-carte:not(.celeo-carte--tour):not(.celeo-carte--img):not(:has(.celeo-pilier__num))),
  .celeo-section--casse .celeo-grille:has(> .celeo-carte:not(.celeo-carte--tour):not(.celeo-carte--img):not(:has(.celeo-pilier__num))){ gap:0; }
  .celeo-carte:hover{ transform:none; box-shadow:none; }
  /* cartes tours : photo compacte à droite */
  .celeo-section .celeo-carte--img[href^="/celeo-"]{ flex-direction:row; }
  .celeo-section .celeo-carte--img[href^="/celeo-"] > img{ width:34%; flex-basis:34%; min-height:0; height:auto; }
  a.celeo-carte.celeo-carte--tour{ flex-direction:row; }
  .celeo-carte--tour .celeo-carte__vignette{ width:96px; height:120px; flex-basis:96px; }
  /* CTA (retour Samuel 24/08 v2) : côte à côte ça débordait → empilés
     l'un au-dessus de l'autre, MÊME largeur bornée, centrés. */
  .celeo-cta{ flex-direction:column; align-items:center; gap:.6rem; }
  .celeo-cta .celeo-btn{ box-sizing:border-box; width:100%; max-width:260px; min-width:0; flex:none; justify-content:center; text-align:center; padding:.8em 1.2em; white-space:nowrap; font-size:.95rem; }
  /* le hero de l'accueil embarque un style inline plus spécifique (1.05rem,
     gros padding) : on le surclasse pour rester cohérent */
  .celeo-hero.chv2-hero .celeo-cta .celeo-btn{ font-size:.95rem; padding:.8em 1.2em; }
  /* Retour Samuel 24/08 v3 : les pilules fixes du bas couvrent déjà devis +
     appel → on masque les CTA de CONTENU redondants (sections, heros,
     articles). Les autres boutons (« Voir tous nos secteurs », « Nous
     contacter »…) et les CTA du menu burger restent. Les blocs qui ne
     contiennent QUE devis/appel disparaissent entièrement (:has). */
  .celeo-section a.celeo-btn[href="/devis/"], .celeo-section a.celeo-btn[href^="tel:"],
  .celeo-hero a.celeo-btn[href="/devis/"], .celeo-hero a.celeo-btn[href^="tel:"],
  .celeo-article a.celeo-btn[href="/devis/"], .celeo-article a.celeo-btn[href^="tel:"]{ display:none; }
  .celeo-cta:not(:has(a.celeo-btn:not([href="/devis/"]):not([href^="tel:"]))),
  .celeo-cta-inline:not(:has(a.celeo-btn:not([href="/devis/"]):not([href^="tel:"]))),
  .chv2-cta-inline:not(:has(a.celeo-btn:not([href="/devis/"]):not([href^="tel:"]))){ display:none; }
}
/* Retour Samuel 24/08 : CTA du menu burger retirés partout où les pilules
   fixes existent (même seuil que .celeo-sticky). */
@media (max-width: 780px){
  .celeo-nav__cta-m{ display:none; }
  /* Header mobile plus bas (Samuel 25/08) — !important : le style inline du
     header (chdr2, 1.15rem) passe après style.css. */
  .celeo-nav.chdr2{ padding-block:.5rem !important; }
  /* Les pilules fixes (z60) flottaient PAR-DESSUS le tiroir ouvert (z15) :
     on les masque tant que le menu est ouvert. */
  body.menu-ouvert .celeo-sticky{ display:none; }
  /* Page devis : la pilule « Demander un devis » n'a pas de sens là (on y est)
     — seul « Appeler » reste (Samuel 26/08). */
  body.page-id-153 .celeo-sticky a.est-primaire{ display:none; }
  /* footer villes (retour Samuel 24/08 : « le footer est laid ») : les 3 listes
     en colonnes laissaient de grands vides → une seule coulée de villes en ligne.
     display:block sur le conteneur obligatoire : en grid, les ul inline seraient
     re-blockifiés. */
  .celeo-footer__villes{ display:block; }
  .celeo-footer__villes > div:first-child{ margin-bottom: var(--celeo-e-4); }
  .celeo-footer__villes ul{ display:inline; margin:0; padding:0; }
  .celeo-footer__villes ul li{ display:inline-block; margin:0 .85rem .5rem 0; font-size:.92rem; }
  /* tableau des tours : indication de défilement */
  .celeo-section .tour-compare{ border-radius:12px; }
  /* Tableaux comparatifs v3 (Samuel 25/08) : celeo-compare garde son design
     mobile D'ORIGINE (≤680 : lignes empilées avec étiquettes ::before
     « Tour CELEO » / « Surveillance humaine », en-tête masqué) — ne PAS
     redéfinir __row/__cell ici, ça l'écrasait. chv2-cmp (accueil) : empilé,
     chaque cellule porte déjà son propre label. */
  /* Accueil (Samuel 25/08 : « il faut laisser un tableau avec plusieurs
     colonnes ») : les cellules n'ont PAS d'étiquette interne, l'empilement
     était incompréhensible → 3 colonnes compactes qui tiennent dans l'écran
     (les valeurs ne sont que des badges €/✓/✗, ça passe large).
     Spécificité > CSS inline de la page. */
  .chv2-cmp{ overflow:hidden; }
  .celeo-section .chv2-cmp .chv2-cmp__row{ min-width:0; grid-template-columns:1.2fr 1fr 1fr; }
  /* chaque ligne est une grille indépendante : sans min-width:0 sur les
     cellules, un contenu large élargit sa colonne dans SA ligne seulement
     → séparateurs décalés d'une ligne à l'autre (retour Samuel). */
  .celeo-section .chv2-cmp .chv2-cmp__row > *{ min-width:0; }
  .celeo-section .chv2-cmp .chv2-cmp__crit{ font-size:.82rem; line-height:1.3; padding:.7rem .6rem; justify-content:flex-start; text-align:left; }
  .celeo-section .chv2-cmp .chv2-cmp__cell{ padding:.7rem .4rem; }
  .celeo-section .chv2-cmp .chv2-cmp__head .chv2-cmp__cell{ font-size:.8rem; line-height:1.25; }
  /* pastille « défiler le carrousel » : à moitié coupée sur petits écrans */
  .chv2-carr-hint{ display:none !important; }
  /* logo plus discret (retour Samuel 24/08 : trop gros sur mobile) */
  .celeo-nav.chdr2 .celeo-logo img{ height:16px; }
  /* menu mobile : 2 CTA de même largeur, compacts et centrés (retour Samuel
     24/08 : « boutons trop gros » — box-sizing:border-box indispensable,
     sinon le padding s'ajoute au max-width), « Demander un devis » en texte
     nuit (la couleur blanche des liens du panneau écrasait celle du bouton) */
  .celeo-nav__cta-m .celeo-btn{ box-sizing:border-box; display:flex; width:100%; max-width:240px; margin-inline:auto; justify-content:center; font-size:1rem; padding:.8em 1.2em; }
  .celeo-nav .celeo-nav__cta-m a.celeo-btn--primaire{ color:var(--celeo-nuit) !important; }
  /* pilules du bas : même largeur */
  .celeo-sticky a{ flex:1 1 0; max-width:190px; }
  /* (essai « textes à gauche » du 24/08 retiré le soir même : « pas ouf ») */
}

/* =========================================================
   RETOURS RESPONSIVE 25/08 (mail Samuel du soir)
   ========================================================= */
/* Chronologies : les li sont des flex avec text-align:center hérité → les
   items sur 2 lignes se centraient et pas les autres (rendu incohérent). */
.celeo-sequence li, .celeo-sequence li span{ text-align:left; }
/* Carte « Données en France » : le titre-drapeau est un flex (le drapeau est
   un span), il ignorait le centrage des cartes voisines sur mobile. */
@media (max-width:640px){
  .celeo-carte h3:has(.celeo-badge-fr__drapeau){ justify-content:center; }
}
/* Heros mobiles : blindage anti « bandeau blanc » — quelle que soit la règle
   qui fuit (height:auto d'un reset figure, ratio intrinsèque…), la photo de
   hero couvre TOUJOURS tout le cadre. */
@media (max-width:900px){
  .celeo-hero{ position:relative; overflow:hidden; }
  .celeo-hero img.celeo-hero__media{ position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; }
  /* Incendie, photo CNPP (26/08) : la source est CARRÉE, le recadrage 16/10
     générique coupait la tête de la tour → ratio natif, image entière. */
  .celeo-grille--2 > figure.celeo-media:has(img[src*="tour-thermique"]){ aspect-ratio:1/1 !important; }
}

/* « La gamme CELEO » (kicker hero) en BLANC sur les pages produits (Samuel 03/09) */
.page-id-62 .celeo-hero__contenu .celeo-kicker,
.page-id-63 .celeo-hero__contenu .celeo-kicker,
.page-id-64 .celeo-hero__contenu .celeo-kicker,
.page-id-65 .celeo-hero__contenu .celeo-kicker{ color: var(--celeo-blanc); }

/* FAQ : réponses sur toute la largeur de la colonne (comme les questions) — évite les lignes courtes/sauts inutiles (Samuel 03/09) */
.celeo-faq details > p{ max-width: none; }