@charset "UTF-8";
/* =============================================================================
   CESSION TPE — feuille de style du thème (design « Diagonale »)

   Portage de la maquette validée le 17/09/2026
   (maquette-diagonale/cession-tpe-diagonale.src.html) :
   palette « Charte » seule, Montserrat pour tout le site, ni palette « Vive »
   ni option Hedvig ni panneau « Variantes ».

   Les noms de classes de la maquette sont le contrat commun avec les gabarits
   PHP. Ce qui n'existait pas dans la maquette mais que WordPress ou le thème
   exigent (contenu éditorial, formulaires de ct_formulaire(), fil d'Ariane de
   ct_fil_ariane(), pagination, cookies, barre d'administration…) garde les
   noms de classes actuels du thème.

   Organisation
   1.  Jetons
   2.  Base et accessibilité
   3.  Composants communs
   4.  En-tête, navigation, tiroir mobile
   5.  Couleurs propres à chaque rubrique
   6.  Accueil : hero et barre « Je suis / Je cherche »
   7.  Section scindée
   8.  Tuiles « Nos expertises »
   9.  Encadré « Affaires à reprendre »
   10. Cartes photo « Deux parcours »
   11. Bande d'appel diagonale
   12. Chiffres clés
   13. Réseau : huit expertises
   14. Questions fréquentes
   15. Formulaires (maquette et ct_formulaire())
   16. Pages intérieures : bandeau, fil d'Ariane, introduction
   17. Le parcours en étapes
   18. Registre des affaires : filtres, cartes, pagination, état vide
   19. Fiche d'une affaire
   20. Contenu éditorial (.rte) et alignements WordPress
   21. Glissière
   22. Pied de page
   23. Éléments fixes : bouton flottant, retour en haut, cookies, modale
   24. Page 404
   25. Compatibilité : anciennes classes du thème
   26. Mouvement
   27. Requêtes média
   ========================================================================== */

/* =============================================================================
   1. JETONS
   ========================================================================== */

:root{
  --nuit:#0B2138;
  --nuit-2:#08192B;
  --hero:#16395A;
  --bande:#97773B;
  --oblique:#CFAD63;
  --pave-logo:#FFFFFF;
  --tuile-1:#0B2138;
  --tuile-2:#CFAD63;
  --tuile-3:#5E7A93;
  --tuile-4:#7F9C8A;
  --tuile-5:#E4D9C6;
  --panneau-2:#5E7A93;
  --gris:#EEF0F3;
  --ivoire:#F4F0EC;
  --texte:#1E2A37;
  --texte-2:#56616D;
  --blanc:#FFFFFF;
  /* État d'erreur des formulaires (seule teinte hors charte, 6,4:1 sur blanc) */
  --alerte:#A6402E;

  /* Encre posée sur chaque tuile (contraste vérifié) */
  --sur-tuile-1:var(--blanc);
  --sur-tuile-2:var(--nuit);
  --sur-tuile-3:var(--blanc);
  --sur-tuile-4:var(--nuit);
  --sur-tuile-5:var(--nuit);
  /* Fusion de la photo en bichromie : « screen » sur tuile foncée */
  --mode-tuile-1:screen;
  --mode-tuile-2:multiply;
  --mode-tuile-3:multiply;
  --mode-tuile-4:multiply;
  --mode-tuile-5:multiply;
  /* Sur-titre du hero */
  --accent-hero:var(--oblique);

  /* Surfaces qui portent du texte courant.
     Le blanc sur --bande, --panneau-2 et --tuile-3 plafonne entre 4,2 et
     4,5:1 : ces surfaces sont très légèrement approfondies vers --nuit pour
     passer 4,5:1. Valeurs précalculées (équivalent de
     color-mix(in srgb, <teinte> N %, var(--nuit))) : elles s'affichent aussi
     dans les navigateurs qui ne connaissent pas color-mix(). */
  --bande-fond:#896E3B;       /* --bande 90 % */
  --bande-texte:#6D5D3A;      /* --bande 70 % */
  --hero-fond:#153757;        /* --hero 92 % */
  --panneau-2-fond:#56718A;   /* --panneau-2 90 % */
  --fond-tuile-1:var(--tuile-1);
  --fond-tuile-2:var(--tuile-2);
  --fond-tuile-3:#56718A;     /* --tuile-3 90 % */
  --fond-tuile-4:var(--tuile-4);
  --fond-tuile-5:var(--tuile-5);

  --filet:rgba(11, 33, 56, .14);
  --filet-fort:rgba(11, 33, 56, .28);
  --filet-champ:rgba(11, 33, 56, .55);
  --filet-clair:rgba(255, 255, 255, .18);
  --voile:rgba(11, 33, 56, .72);
  --voile-fort:rgba(11, 33, 56, .80);
  --voile-leger:rgba(11, 33, 56, .50);
  --voile-bas:rgba(11, 33, 56, .62);
  --ombre:0 26px 50px -26px rgba(11, 33, 56, .6);
  --ombre-douce:0 10px 30px -14px rgba(11, 33, 56, .4);
  --focus:var(--nuit);

  /* Typographie : Montserrat partout */
  --f-texte:"Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-titre:"Montserrat", "Segoe UI", system-ui, sans-serif;
  --g-titre:700;
  --g-titre-sec:600;
  --ls-titre:-.01em;
  --t-h1:clamp(38px, 4.6vw, 62px);
  --t-bandeau:clamp(30px, 3.4vw, 45px);
  --t-section:clamp(26px, 2.6vw, 36px);
  --t-chapo:clamp(17px, 1.4vw, 20px);

  /* Grille, mouvement, en-tête */
  --wrap:1170px;
  --gout:clamp(16px, 4vw, 32px);
  --ease:cubic-bezier(.22, .61, .36, 1);
  --duree:.3s;
  --pente:.364; /* tan 20° */
  --h-top:32px;
  --h-nav:72px;
  --h-nav-colle:64px;
  --h-barre:0px;
  /* Hauteur du bandeau cookies ouvert (réglée par site.js) */
  --h-cookies:0px;

  /* Images de repli du thème (assets/img) */
  --img-poignee:url(../img/poignee.jpg);
  --img-analyse:url(../img/analyse.jpg);
  --img-reunion:url(../img/reunion.jpg);
  --img-equipe:url(../img/equipe.jpg);
  --img-mono:url(../img/monogramme.png);

  color-scheme:light;
}

/* Barre d'administration WordPress (utilisateur connecté) : les éléments
   fixes ou collants descendent d'autant. 46 px sous 783 px (requêtes média). */
.admin-bar{--admin:32px}

/* =============================================================================
   2. BASE ET ACCESSIBILITÉ
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
html.bloque{overflow:hidden}
body{
  margin:0;
  background:var(--blanc);
  color:var(--texte);
  font-family:var(--f-texte);
  font-size:16px;
  line-height:1.75;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
main{display:block;overflow-x:clip}
img,svg{max-width:100%}
img{height:auto;display:block}
img.emoji,img.wp-smiley{display:inline;width:1em;height:1em;margin:0 .07em;vertical-align:-.1em}
h1,h2,h3{
  margin:0;
  font-family:var(--f-titre);
  font-weight:var(--g-titre);
  letter-spacing:var(--ls-titre);
  line-height:1.18;
  text-wrap:balance;
}
h4,h5,h6{margin:0;font-family:var(--f-titre)}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
iframe,embed,object,video{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
/* Les sections qui reçoivent le focus après une navigation par ancre ne
   portent pas de contour : le focus sert à reprendre la tabulation au bon
   endroit, pas à encadrer un bloc de 600 px. */
section[tabindex="-1"]:focus,div[id][tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}
html{scroll-padding-top:calc(env(safe-area-inset-top, 0px) + var(--h-nav-colle) + var(--h-barre) + 16px);scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
.fonce{color:var(--blanc);--focus:var(--blanc)}

/* Texte réservé aux lecteurs d'écran : classe de la maquette et classe WordPress */
.sr-only,
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  word-wrap:normal !important;
}
.screen-reader-text:focus{
  top:calc(env(safe-area-inset-top, 0px) + var(--admin, 0px) + 12px);left:16px;z-index:100;
  width:auto;height:auto;margin:0;padding:10px 20px;clip:auto !important;clip-path:none;white-space:normal;
  background:var(--blanc);color:var(--nuit);border-radius:100px;box-shadow:var(--ombre-douce);
  font:700 14px/1.3 var(--f-texte);text-decoration:none;
}

/* Lien d'évitement « Aller au contenu » (.evitement : maquette ; .skip : thème actuel) */
.evitement,
.skip{
  position:fixed;left:16px;top:-120px;z-index:100;
  background:var(--blanc);color:var(--nuit);padding:10px 20px;border-radius:100px;
  font:700 15px/1.3 var(--f-texte);text-decoration:none;box-shadow:var(--ombre-douce);
}
.evitement:focus,
.skip:focus{top:calc(env(safe-area-inset-top, 0px) + var(--admin, 0px) + 12px)}

.wrap{width:min(100% - 2 * var(--gout), var(--wrap));margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:middle}

/* Photos : l'image est lue dans --img, le cadrage dans --pos */
.img-poignee{--img:var(--img-poignee);--pos:50% 45%}
.img-analyse{--img:var(--img-analyse);--pos:55% 50%}
.img-reunion{--img:var(--img-reunion);--pos:58% 35%}
.img-equipe{--img:var(--img-equipe);--pos:50% 40%}
.photo{
  background-image:var(--img);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--pos, 50% 50%);
}
/* Une image ACF rendue en <img> (ct_image) remplace le fond de repli :
   elle remplit son cadre de la même façon. */
.photo > img,
.hero-photo > img,
.scinde-photo > img,
.bandeau-photo > img,
.appel-photo > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos, 50% 50%);
}
img.photo,
img.hero-photo,
img.scinde-photo,
img.bandeau-photo,
img.appel-photo{object-fit:cover;object-position:var(--pos, 50% 50%)}

/* =============================================================================
   3. COMPOSANTS COMMUNS
   ========================================================================== */

/* --- Titres et textes --- */
.surtitre{
  font:600 15px/1.4 var(--f-texte);
  letter-spacing:.02em;
  color:var(--oblique);
  margin-bottom:14px;
}
.surtitre--clair{color:var(--bande-texte)}
.surtitre-pilule{
  display:inline-block;
  background:var(--nuit);color:var(--blanc);
  font:700 11.5px/1 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border-radius:100px;margin-bottom:22px;
}
.barre{
  display:inline-block;
  font-family:var(--f-texte);font-weight:900;
  color:var(--barre, var(--oblique));
  margin-right:8px;
}
.titre-section{
  font-size:var(--t-section);
  font-weight:var(--g-titre-sec);
  line-height:1.2;
  color:var(--nuit);
}
.fonce .titre-section{color:var(--blanc)}
.titre-bandeau{font-size:var(--t-bandeau);line-height:1.18}
.titre-panneau{font-size:clamp(24px, 2.2vw, 28px);line-height:1.25}
.chapo{
  font-size:var(--t-chapo);line-height:1.5;color:var(--texte-2);
  max-width:62ch;margin-top:14px;
}
.fonce .chapo{color:var(--blanc)}
.entete-section{margin-bottom:clamp(32px, 4vw, 52px)}
.section{padding-block:clamp(64px, 8vw, 110px)}
.section--serree{padding-block:clamp(48px, 6vw, 80px)}
.section + .section{padding-top:0}
.filigrane{
  position:absolute;z-index:-1;
  font:900 clamp(220px, 30vw, 420px)/.8 var(--f-texte);
  color:var(--blanc);
  pointer-events:none;user-select:none;
}

/* --- Liens --- */
.lien-souligne{
  font-weight:700;font-size:15px;color:var(--nuit);
  text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--oblique);text-underline-offset:.35em;
  transition:text-decoration-color var(--duree) var(--ease);
}
.lien-souligne:hover{text-decoration-color:currentColor}
.fonce .lien-souligne{color:var(--blanc)}
.lien-fleche{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-weight:700;color:var(--blanc);
  text-decoration:underline;text-decoration-color:var(--oblique);
  text-decoration-thickness:2px;text-underline-offset:.4em;
}
/* .fl : flèche de la maquette ; .arw : flèche des gabarits actuels (ct_formulaire) */
.fl,.arw{display:inline-block;transition:transform var(--duree) var(--ease)}
a:hover .fl,button:hover .fl,
a:hover .arw,button:hover .arw{transform:translateX(4px)}

/* --- Boutons pilule ---
   Un .btn sans modificateur (bouton d'envoi de ct_formulaire(), bandeau
   cookies) prend la couleur de la bande. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:12px 28px;border-radius:100px;
  border:2px solid transparent;
  background:var(--bande-fond);color:var(--blanc);
  font:700 16px/1.2 var(--f-texte);text-align:center;text-decoration:none;
  cursor:pointer;
  transition:background-color var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.btn:hover{background:var(--nuit);color:var(--blanc)}
.btn--blanc{background:var(--blanc);color:var(--nuit);--focus:var(--blanc)}
.btn--blanc:hover{background:var(--oblique);color:var(--nuit)}
.btn--contour{background:transparent;border-color:var(--blanc);color:var(--blanc)}
.btn--contour:hover{background:var(--blanc);color:var(--nuit)}
.btn--bande{background:var(--bande-fond);color:var(--blanc)}
.btn--bande:hover{background:var(--nuit)}
.btn--oblique{background:var(--oblique);color:var(--nuit)}
.btn--oblique:hover{background:var(--blanc)}
.btn--petit{padding:10px 26px;font-size:15px;min-height:44px}
.btn .ico,.btn svg{width:18px;height:18px}

/* --- Marque en version claire / foncée (monogramme masqué + nom) --- */
.marque{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.marque-mono{
  display:block;flex:none;width:40px;aspect-ratio:365 / 241;
  background:currentColor;
  -webkit-mask:var(--img-mono) center / contain no-repeat;
  mask:var(--img-mono) center / contain no-repeat;
}
.marque-nom{
  font:700 11px/1 var(--f-texte);letter-spacing:.3em;text-transform:uppercase;
  white-space:nowrap;margin-right:-.3em;
}

/* =============================================================================
   4. EN-TÊTE, NAVIGATION, TIROIR MOBILE
   ========================================================================== */

.entete{
  position:fixed;top:calc(env(safe-area-inset-top, 0px) + var(--admin, 0px));left:0;right:0;z-index:50;
  color:var(--blanc);--focus:var(--blanc);
  transition:background-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}
.entete .wrap{--wrap:1170px} /* même largeur que le contenu : logo et menu alignés sur les sections */
.entete.est-plein,
.entete--plein{background:var(--nuit);box-shadow:var(--ombre-douce)}
.entete-top{
  background:var(--nuit-2);height:var(--h-top);overflow:hidden;
  font:600 12.5px/1 var(--f-texte);
  transition:height var(--duree) var(--ease);
}
.est-plein .entete-top{height:0}
.entete.est-plein .entete-top:focus-within{height:var(--h-top)}
.entete-top-in{height:var(--h-top);display:flex;align-items:center;justify-content:flex-end;gap:24px}
.top-droite{display:flex;align-items:center;gap:28px}
.top-item{display:inline-flex;align-items:center;gap:8px;color:var(--blanc);text-decoration:none;white-space:nowrap}
.top-item .ico,.top-item svg{width:14px;height:14px;color:var(--oblique)}
a.top-item:hover{text-decoration:underline}
.top-droite,a.top-item{align-self:stretch}
/* La barre coupe ce qui dépasse (overflow:hidden) : contour de focus rentré */
.top-item:focus-visible{outline-offset:-4px}
.top-lieu,.top-cherche{display:none}

.entete-nav{height:var(--h-nav);transition:height var(--duree) var(--ease)}
.est-plein .entete-nav{height:var(--h-nav-colle)}
.entete-grille{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Pavé du logo */
.pave{
  align-self:flex-start;flex:none;
  display:flex;align-items:center;justify-content:center;
  height:calc(var(--h-nav) + 8px);padding:0 16px;
  background:var(--pave-fond, var(--pave-logo));color:var(--pave-encre, var(--nuit));
  text-decoration:none;box-shadow:var(--ombre-douce);
  --focus:var(--pave-encre, var(--nuit));
  transition:height var(--duree) var(--ease), background-color var(--duree) var(--ease);
}
.est-plein .pave{height:calc(var(--h-nav-colle) + 6px)}
.pave-logo,
.pave .brand-img,
.pave .custom-logo{height:44px;width:auto;max-width:none;transition:height var(--duree) var(--ease)}
.est-plein .pave-logo,
.est-plein .pave .brand-img,
.est-plein .pave .custom-logo{height:38px}
.pave .marque{display:none;flex-direction:column;gap:6px}
.pave .marque-mono{width:44px}
.pave:focus-visible{outline-offset:-7px}

/* Navigation (bureau uniquement, voir requêtes média) */
.nav{display:none}
.nav-liste{display:grid;grid-template-columns:repeat(var(--nav-colonnes, 3), minmax(0, 1fr));align-items:center;justify-items:center;gap:8px}
.nav-liste > li{min-width:0}
.nav-lien{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:8px 2px;border:0;background:none;
  font:600 13px/1.25 var(--f-texte);color:var(--blanc);
  text-align:center;text-decoration:none;text-wrap:balance;
}
.nav-lien::after{
  content:"";position:absolute;left:2px;right:2px;bottom:1px;height:2px;
  background:var(--oblique);transform:scaleX(0);transform-origin:left;
  transition:transform var(--duree) var(--ease);
}
.nav-lien:hover::after,.nav-lien[aria-current="page"]::after{transform:scaleX(1)}
/* Rubrique ancêtre de la page courante (ct_menu : nav-lien--actif) */
.nav-lien--actif::after{transform:scaleX(1)}
.nav-lien .ico,.nav-lien svg{width:12px;height:12px;transition:transform var(--duree) var(--ease)}
.nav-deroulant{position:relative}
.nav-deroulant.ouvert .nav-bouton .ico,
.nav-deroulant.ouvert .nav-bouton svg{transform:rotate(180deg)}
.sous-menu{
  position:absolute;top:calc(100% + 12px);left:50%;z-index:2;
  min-width:270px;padding:10px 0;border-radius:6px;
  background:var(--blanc);color:var(--nuit);box-shadow:var(--ombre);
  --focus:var(--nuit);
  opacity:0;visibility:hidden;transform:translate(-50%, 8px);
  transition:opacity var(--duree) var(--ease), transform var(--duree) var(--ease), visibility 0s linear var(--duree);
}
.sous-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-deroulant.ouvert .sous-menu{opacity:1;visibility:visible;transform:translate(-50%, 0);transition-delay:0s}
/* Sans JavaScript, le survol et le clavier ouvrent le sous-menu. */
html:not(.js) .nav-deroulant:hover .sous-menu,
html:not(.js) .nav-deroulant:focus-within .sous-menu{opacity:1;visibility:visible;transform:translate(-50%, 0);transition-delay:0s}
.sous-menu a{
  display:block;padding:9px 24px;
  font:600 13px/1.4 var(--f-texte);color:var(--nuit);text-decoration:none;white-space:nowrap;
  transition:background-color var(--duree) var(--ease);
}
.sous-menu a:hover{background:var(--gris)}
.sous-menu a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--oblique);background:var(--gris)}

/* Burger */
.burger{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 4px;border:0;background:none;color:var(--blanc);
  font:700 12.5px/1 var(--f-texte);letter-spacing:.1em;text-transform:uppercase;
}
.burger-traits{position:relative;display:block;width:26px;height:18px}
.burger-traits span{
  position:absolute;left:0;right:0;height:2px;background:currentColor;
  transition:transform var(--duree) var(--ease), opacity var(--duree) var(--ease);
}
.burger-traits span:nth-child(1){top:0}
.burger-traits span:nth-child(2){top:8px}
.burger-traits span:nth-child(3){top:16px}
.burger[aria-expanded="true"] .burger-traits span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-traits span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-traits span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Tiroir mobile plein écran */
.tiroir{
  position:fixed;inset:0;z-index:48;
  display:flex;flex-direction:column;gap:32px;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--nuit);color:var(--blanc);--focus:var(--blanc);
  padding:calc(env(safe-area-inset-top, 0px) + var(--admin, 0px) + var(--h-nav-colle) + 24px) var(--gout) calc(28px + var(--h-cookies, 0px) + env(safe-area-inset-bottom, 0px));
}
/* Sans JavaScript, le burger peut pointer sur #tiroir : l'ancre l'ouvre. */
html:not(.js) .tiroir:target{display:flex !important}
html:not(.js) .tiroir-sous[hidden]{display:block !important}
.tiroir-liste > li{border-bottom:1px solid var(--filet-clair)}
.tiroir-liste a,
.tiroir-titre{
  display:block;padding:14px 0;
  font:700 clamp(21px, 5.6vw, 26px)/1.25 var(--f-texte);color:var(--blanc);text-decoration:none;
}
.tiroir-liste a[aria-current="page"]{color:var(--oblique)}
.tiroir-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tiroir-pli{
  flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--filet-clair);background:transparent;color:var(--blanc);
}
.tiroir-pli .ico,.tiroir-pli svg{width:16px;height:16px;transition:transform var(--duree) var(--ease)}
.tiroir-pli[aria-expanded="true"] .ico,
.tiroir-pli[aria-expanded="true"] svg{transform:rotate(180deg)}
.tiroir-sous{margin:0 0 16px;padding:2px 0 2px 18px;border-left:2px solid var(--oblique)}
.tiroir-sous a{font-size:16px;font-weight:600;padding:9px 0}
.tiroir-pied{margin-top:auto;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.tiroir-pied .btn.btn{padding:12px 16px}

/* =============================================================================
   5. COULEURS PROPRES À CHAQUE RUBRIQUE
   Seule la bande oblique du bandeau change de couleur selon la rubrique. Le
   pavé du logo reste blanc partout, avec le logo dans ses couleurs d'origine :
   c'est la demande du client (plus de pavé coloré ni de logo en version claire
   dans l'en-tête). La classe du <body> porte la rubrique : classes dédiées
   (vue-ceder, vue-affaires) ou classes posées par WordPress.
   ========================================================================== */

.vue-ceder,
.page-template-page-parcours,
.page-template-page-parcours-php{
  --bandeau-oblique:var(--bande);
}
.vue-affaires,
.post-type-archive-affaire,
.tax-secteur,
.tax-zone,
.single-affaire{
  --bandeau-oblique:var(--oblique);
}

/* =============================================================================
   6. ACCUEIL — HERO ET BARRE « JE SUIS / JE CHERCHE »
   ========================================================================== */

.hero{
  position:relative;isolation:isolate;
  overflow:hidden;overflow:clip;
  background:var(--hero-fond);color:var(--blanc);--focus:var(--blanc);
  padding:calc(env(safe-area-inset-top, 0px) + var(--h-top) + var(--h-nav) + 36px) 0 56px;
}
/* Sur mobile et tablette, la bande ne passe que derrière la photo (jamais sous le texte) */
.hero-bande{
  position:absolute;left:60%;bottom:-40px;z-index:-1;
  width:72px;height:340px;background:var(--oblique);
  transform:skewX(-20deg);
}
.hero-grille{position:relative;display:grid;gap:40px}
.hero-texte{min-width:0}
.hero-sur{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font:600 15px/1.4 var(--f-texte);color:var(--accent-hero);
}
.hero-sur .barre{color:var(--oblique);margin:0}
.hero-titre{font-size:var(--t-h1);line-height:1.08;color:var(--blanc);max-width:14ch}
.hero-chapo{font-size:var(--t-chapo);line-height:1.5;max-width:560px;margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.gages{
  display:flex;flex-direction:column;flex-wrap:wrap;row-gap:4px;margin-top:30px;
  font:700 11.5px/1.4 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;
}
.gages li + li::before{display:none;content:"·";content:"·" / "";margin:0 10px;color:var(--oblique)}
.hero-visuel{position:relative}
.hero-cadre{
  --h:260px;
  position:relative;height:var(--h);overflow:hidden;
  clip-path:polygon(calc(var(--h) * var(--pente)) 0, 100% 0, calc(100% - var(--h) * var(--pente)) 100%, 0 100%);
}
.hero-photo{position:absolute;inset:0}
img.hero-photo{width:100%;height:100%}

.oriente{position:relative;z-index:40;background:var(--bande-fond);color:var(--blanc);--focus:var(--blanc);transition:box-shadow var(--duree) var(--ease)}
.oriente.est-collee{box-shadow:var(--ombre-douce)}
.oriente form{margin:0}
.oriente-in{display:grid;gap:12px;padding-block:18px 22px}
.oriente-champ{display:grid;gap:6px;min-width:0}
.oriente-label{font:700 16px/1.2 var(--f-texte)}
.pilule-select{position:relative;min-width:0}
.pilule-select select{
  -webkit-appearance:none;appearance:none;
  width:100%;height:46px;padding:0 46px 0 16px;border:0;border-radius:100px;
  background:var(--blanc);color:var(--bande-texte);
  font:700 16px/1 var(--f-texte);text-overflow:ellipsis;cursor:pointer;
}
.pilule-select select:focus-visible{outline-offset:2px}
.chev-rond{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--bande-fond);color:var(--blanc);pointer-events:none;
}
.chev-rond .ico,.chev-rond svg{width:14px;height:14px}
.oriente-ok{
  height:46px;padding:0 34px;border:0;border-radius:100px;
  background:var(--blanc);color:var(--bande-texte);
  font:700 16px/1 var(--f-texte);
  transition:background-color var(--duree) var(--ease), color var(--duree) var(--ease);
}
.oriente-ok:hover{background:var(--nuit);color:var(--blanc)}

/* =============================================================================
   7. SECTION SCINDÉE (photo / panneau coupé en diagonale)
   ========================================================================== */

.scinde{position:relative;display:grid;overflow:hidden;overflow:clip;container-type:inline-size;--coupe:clamp(44px, 12vw, 110px)}
.scinde-photo{position:relative;min-height:300px}
img.scinde-photo{width:100%;height:100%;align-self:stretch}
.scinde-panneau{
  position:relative;z-index:1;
  margin-top:calc(-1 * var(--coupe));
  clip-path:polygon(0 var(--coupe), 100% 0, 100% 100%, 0 100%);
  background:var(--panneau-fond, var(--nuit));
  padding:calc(var(--coupe) + 40px) var(--gout) 64px;
}
.panneau--nuit{--panneau-fond:var(--nuit)}
.panneau--bande{--panneau-fond:var(--bande-fond);--barre:var(--nuit)}
.panneau--p2{--panneau-fond:var(--panneau-2-fond);--barre:var(--oblique)}
.scinde-contenu{max-width:560px;min-width:0}
.scinde-contenu .titre-panneau{margin-bottom:16px}
.scinde-contenu p:not([class]){font-size:15.5px;line-height:2}
.scinde-contenu p + p{margin-top:14px}
.argument + .argument{margin-top:36px;padding-top:32px;border-top:1px solid var(--filet-clair)}

/* =============================================================================
   8. TUILES « NOS EXPERTISES »
   ========================================================================== */

.tuiles{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.tuile{
  position:relative;isolation:isolate;overflow:hidden;
  display:block;aspect-ratio:1 / 1.1;
  background:var(--t-fond);color:var(--t-encre);text-decoration:none;
  --focus:var(--nuit);
}
.tuile--1{--t-fond:var(--fond-tuile-1);--t-encre:var(--sur-tuile-1);--t-mode:var(--mode-tuile-1)}
.tuile--2{--t-fond:var(--fond-tuile-2);--t-encre:var(--sur-tuile-2);--t-mode:var(--mode-tuile-2)}
.tuile--3{--t-fond:var(--fond-tuile-3);--t-encre:var(--sur-tuile-3);--t-mode:var(--mode-tuile-3)}
.tuile--4{--t-fond:var(--fond-tuile-4);--t-encre:var(--sur-tuile-4);--t-mode:var(--mode-tuile-4)}
.tuile--5{--t-fond:var(--fond-tuile-5);--t-encre:var(--sur-tuile-5);--t-mode:var(--mode-tuile-5)}
.tuile-titre{
  position:relative;z-index:2;padding:16px 16px 0;
  font-size:clamp(15px, 1.3vw, 17px);font-weight:var(--g-titre-sec);line-height:1.3;
  -webkit-hyphens:auto;hyphens:auto;
}
/* Pas de z-index ici : la photo doit se fondre avec le fond de la tuile */
.tuile-image{position:absolute;left:0;right:0;bottom:0;height:58%;overflow:hidden}
.tuile-image::before{
  content:"";position:absolute;inset:0;
  background:var(--img) var(--pos, 50% 50%) / cover no-repeat;
  filter:grayscale(1) contrast(1.08);
  mix-blend-mode:var(--t-mode, multiply);
  transition:transform .5s var(--ease);
}
.tuile-image > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos, 50% 50%);
  filter:grayscale(1) contrast(1.08);
  mix-blend-mode:var(--t-mode, multiply);
  transition:transform .5s var(--ease);
}
.tuile-plus{
  position:absolute;left:0;bottom:0;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;
  background:var(--t-fond);color:var(--t-encre);
}
.tuile-plus .ico,.plus .ico,
.tuile-plus svg,.plus svg{width:22px;height:22px;transition:transform var(--duree) var(--ease)}
.tuile:hover .tuile-plus .ico,.tuile:focus-visible .tuile-plus .ico,
.tuile:hover .tuile-plus svg,.tuile:focus-visible .tuile-plus svg{transform:rotate(90deg)}
.tuile:hover .tuile-image::before,.tuile:focus-visible .tuile-image::before,
.tuile:hover .tuile-image > img,.tuile:focus-visible .tuile-image > img{transform:scale(1.04)}

.tuile-large{
  grid-column:1 / -1;position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:24px;padding:28px 22px;
  background:var(--fond-tuile-5);color:var(--sur-tuile-5);text-decoration:none;
  --focus:var(--nuit);
}
.tuiles + .tuile-large{margin-top:12px}
.tuile-large .filigrane{right:3%;top:-12%}
.tuile-large-titre{font-size:clamp(20px, 2vw, 26px);color:var(--nuit)}
.tuile-large-texte{margin-top:6px;font-weight:600;font-size:15.5px;line-height:1.5}
.pictos .ico,.pictos svg{transition:transform var(--duree) var(--ease)}
.tuile-large:hover .pictos .ico,
.tuile-large:hover .pictos svg{transform:translateY(-3px)}
.tuile-large .lien-souligne{display:inline-block;margin-top:12px}
.pictos{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px 12px;justify-items:start}
.pictos .ico,.pictos svg{width:40px;height:40px;color:var(--nuit)}

/* =============================================================================
   9. ENCADRÉ « AFFAIRES À REPRENDRE » (accueil)
   ========================================================================== */

.encadre{position:relative;isolation:isolate;overflow:hidden;background:var(--gris);padding:clamp(26px, 4vw, 56px)}
.encadre .filigrane{right:-1%;top:-16%}
.encadre-tete{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px 24px;margin-bottom:30px;
}
/* Sur-titre au-dessus du titre : « Tout voir » s'aligne sur le bas du titre */
.encadre-titres + .lien-souligne{align-self:flex-end;margin-bottom:.3em}
.titre-encadre{font-size:clamp(21px, 1.9vw, 25px);color:var(--nuit)}
.annonces{display:grid}
.annonce{display:grid;gap:10px;align-content:start;padding-block:22px;border-top:1px solid var(--filet-fort)}
.annonce:first-child{border-top:0;padding-top:0}
.annonce:last-child{padding-bottom:0}
.annonce-etiquettes{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.etiquette{
  display:inline-block;padding:6px 11px;border-radius:100px;
  background:var(--oblique);color:var(--nuit);
  font:700 10.5px/1.1 var(--f-texte);letter-spacing:.1em;text-transform:uppercase;
}
.etiquette--blanche{background:var(--blanc);color:var(--nuit)}
/* Statut d'une affaire (ct_statut_libelle) */
.etiquette--offre{background:var(--nuit);color:var(--blanc)}
.etiquette--cedee{background:var(--gris);color:var(--nuit);box-shadow:inset 0 0 0 1px var(--filet-fort)}
.annonce-titre{font-size:16px;font-weight:var(--g-titre-sec);line-height:1.35;color:var(--nuit)}
.annonce-titre a{color:inherit;text-decoration:none}
.annonce-titre a:hover{text-decoration:underline;text-decoration-color:var(--oblique)}
.annonce-reperes{font-size:14px;line-height:1.6;color:var(--texte-2);font-variant-numeric:tabular-nums}
.annonce .lien-souligne{justify-self:start;font-size:14px}

/* =============================================================================
   10. CARTES PHOTO « DEUX PARCOURS »
   ========================================================================== */

.cartes-photo{display:grid;gap:32px}
.carte-photo{display:block;color:var(--texte);text-decoration:none}
.carte-photo-img{position:relative;isolation:isolate;overflow:hidden;display:block;aspect-ratio:4 / 3}
.carte-photo-img::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--img) var(--pos, 50% 50%) / cover no-repeat;
  transition:transform .5s var(--ease);
}
.carte-photo-img > img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos, 50% 50%);
  transition:transform .5s var(--ease);
}
.carte-photo-img::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, var(--voile-bas) 0%, transparent 48%);
}
.plus{position:absolute;left:16px;bottom:14px;color:var(--blanc);line-height:0}
.carte-photo:hover .carte-photo-img::before,.carte-photo:focus-visible .carte-photo-img::before,
.carte-photo:hover .carte-photo-img > img,.carte-photo:focus-visible .carte-photo-img > img{transform:scale(1.04)}
.carte-photo:hover .plus .ico,.carte-photo:focus-visible .plus .ico,
.carte-photo:hover .plus svg,.carte-photo:focus-visible .plus svg{transform:rotate(90deg)}
.carte-photo-titre{margin-top:18px;font-size:17px;font-weight:var(--g-titre-sec);line-height:1.35;color:var(--nuit)}
.carte-photo p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--texte-2)}

/* =============================================================================
   11. BANDE D'APPEL DIAGONALE
   ========================================================================== */

.appel{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--ivoire);padding:48px 0 64px}
.appel::before{
  content:"";position:absolute;left:0;right:0;top:calc(48px + (100vw - 2 * var(--gout)) * .25);bottom:0;z-index:-1;
  background:var(--bande-fond);
  clip-path:polygon(0 clamp(64px, 16vw, 100px), 100% 0, 100% 100%, 0 100%);
}
.appel-grille{display:grid;gap:40px}
.appel-photo{position:relative;overflow:hidden;width:80%;aspect-ratio:16 / 10;box-shadow:var(--ombre)}
.appel-texte{min-width:0;color:var(--blanc);--focus:var(--blanc)}
.appel-texte p{margin-top:18px;max-width:52ch;line-height:1.9}
.appel-texte .btn{margin-top:30px}

/* =============================================================================
   12. CHIFFRES CLÉS
   ========================================================================== */

.chiffres{background:var(--blanc);padding-block:clamp(56px, 7vw, 96px)}
.chiffres--filet{border-top:1px solid var(--filet)}
.chiffres-grille{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:40px 56px}
.chiffre{position:relative;padding-left:0;min-width:0}
.chiffre::before,.metier::before,.etape::before{
  content:"";display:none;position:absolute;left:-12px;top:6px;bottom:6px;width:2px;
  background:var(--oblique);transform:skewX(-14deg);
}
.chiffre:nth-child(even)::before{display:block;left:-28px}
.chiffre-valeur{
  font:700 clamp(28px, 3.2vw, 42px)/1.1 var(--f-texte);color:var(--nuit);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.chiffre-libelle{margin-top:10px;font-size:15px;line-height:1.55;color:var(--texte)}

/* =============================================================================
   13. RÉSEAU : HUIT EXPERTISES
   ========================================================================== */

.metiers{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--nuit);padding-block:clamp(64px, 8vw, 110px)}
.metiers .filigrane{right:-2%;bottom:-10%;color:rgba(255, 255, 255, .05)}
.metiers-grille{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:36px 56px}
.metier{position:relative;display:grid;gap:14px;align-content:start;padding-left:0;min-width:0}
.metier:nth-child(even)::before{display:block;left:-28px}
.metier .ico,.metier > svg{width:44px;height:44px;color:var(--oblique)}
.metier-nom{font-size:15.5px;font-weight:600;line-height:1.4}
/* Version détaillée (page Réseau) : texte et liste d'interventions */
.metier p:not([class]){font-size:14.5px;line-height:1.7}
.metier ul{display:grid;gap:6px;font-size:14px;line-height:1.6}
.metier ul li{position:relative;padding-left:18px}
.metier ul li::before{content:"/";content:"/" / "";position:absolute;left:0;top:0;font-weight:900;color:var(--oblique)}

/* =============================================================================
   14. QUESTIONS FRÉQUENTES
   ========================================================================== */

.faq-grille{display:grid;gap:12px}
.faq{min-width:0}
.faq-item{border-bottom:1px solid var(--filet-fort)}
.faq-item:first-child{border-top:1px solid var(--filet-fort)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;list-style:none;cursor:pointer;
  font:600 clamp(16px, 1.3vw, 18px)/1.45 var(--f-texte);color:var(--nuit);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--filet-champ);color:var(--nuit);
  transition:transform var(--duree) var(--ease), background-color var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.faq-plus .ico,.faq-plus svg{width:18px;height:18px}
.faq-item summary:hover .faq-plus{border-color:var(--nuit)}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:var(--oblique);border-color:var(--oblique)}
.faq-reponse{padding:0 0 26px;max-width:68ch;line-height:1.8}
.faq-reponse p + p{margin-top:12px}

/* =============================================================================
   15. FORMULAIRES
   Classes de la maquette (.champs, .champ…) et classes rendues par
   ct_formulaire() dans inc/formulaires.php (.form, .field-grid, .field,
   .wide, .consent, .hp, .form-foot…) : les deux jeux ont le même rendu.
   ========================================================================== */

.contact{background:var(--ivoire);padding-block:clamp(64px, 8vw, 110px)}
.contact-grille{display:grid;gap:40px}
.contact-grille > *{min-width:0}
.coord{display:grid;gap:18px;margin-top:32px}
.coord li{display:grid;grid-template-columns:44px minmax(0, 1fr);gap:14px;align-items:start}
.coord-picto{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--nuit);color:var(--oblique)}
.coord-picto .ico,.coord-picto svg{width:20px;height:20px}
.coord-texte{padding-top:3px;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.coord-texte a{color:var(--nuit);font-weight:700;text-decoration:none}
.coord-texte a:hover{text-decoration:underline}
.coord-texte small,
.coord-texte > span{display:block;font-size:13px;color:var(--texte-2)}
.bloc-confidentialite{margin-top:32px;padding:22px 24px;background:var(--blanc);border-left:4px solid var(--oblique)}
.bloc-confidentialite h2,
.bloc-confidentialite h3{margin-bottom:6px;font-size:17px;color:var(--nuit)}
.bloc-confidentialite p{font-size:14.5px;line-height:1.7}
.carte-form{background:var(--blanc);padding:clamp(22px, 3.5vw, 44px);box-shadow:var(--ombre-douce)}
.onglets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.onglet{
  padding:10px 22px;border:1.5px solid var(--nuit);border-radius:100px;
  background:transparent;color:var(--nuit);font:700 14px/1.2 var(--f-texte);
  transition:background-color var(--duree) var(--ease), color var(--duree) var(--ease);
}
.onglet:hover{background:var(--gris)}
.onglet[aria-selected="true"]{background:var(--nuit);color:var(--blanc)}
.form{position:relative}
.form-intro{margin-bottom:20px;font-size:15px;line-height:1.6;color:var(--texte-2)}
.champs,
.field-grid{display:grid;gap:16px}
.champ,
.field{display:grid;gap:6px;min-width:0;align-content:start}
.champ label,
.field label{font:600 13.5px/1.3 var(--f-texte);color:var(--nuit)}
.field label span[aria-hidden="true"],
.champ label span[aria-hidden="true"]{color:var(--bande-texte)}
.champ input,.champ select,.champ textarea,
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:0 20px;
  border:1.5px solid var(--filet-champ);border-radius:100px;
  background:var(--blanc);color:var(--texte);
  font:500 16px/1.4 var(--f-texte);
  transition:border-color var(--duree) var(--ease);
}
.champ ::placeholder,.field ::placeholder{color:var(--texte-2);opacity:1}
.champ input:hover,.champ select:hover,.champ textarea:hover,
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--nuit)}
.champ textarea,
.field textarea{min-height:120px;padding:14px 20px;border-radius:22px;resize:vertical}
.champ-select{position:relative}
.champ-select select{-webkit-appearance:none;appearance:none;padding-right:48px;text-overflow:ellipsis}
.champ-select .ico,.champ-select svg{position:absolute;right:18px;top:50%;width:14px;height:14px;transform:translateY(-50%);color:var(--nuit);pointer-events:none}
/* ct_formulaire() ne pose pas d'enveloppe .champ-select : le chevron est dessiné en fond. */
.field select{
  -webkit-appearance:none;appearance:none;padding-right:48px;text-overflow:ellipsis;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230B2138' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:14px 14px;
}
.field select option{background:var(--blanc);color:var(--texte)}
.champ--large,
.field.wide{grid-column:1 / -1}
.consentement,
.consent{
  grid-column:1 / -1;display:grid;grid-template-columns:22px minmax(0, 1fr);gap:12px;align-items:start;
  font-size:13.5px;line-height:1.6;color:var(--texte-2);
}
.consent{cursor:pointer}
.consentement input,
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--nuit)}
.consentement a,
.consent a{color:var(--nuit);font-weight:600}
.form-pied,
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:24px}
.form-obl{font-size:12.5px;color:var(--texte-2)}
.form-message{margin-top:16px;padding:14px 18px;background:var(--gris);border-left:4px solid var(--bande-fond);font-weight:600;color:var(--nuit)}
.form-message:empty{margin:0;padding:0;border:0}
.form .form-message{margin:0 0 20px;font-size:15px;line-height:1.6}
.form-message--ok{border-left-color:var(--bande-fond)}
.form-message--ko{border-left-color:var(--alerte);background:#F8ECEA;color:var(--texte)}
.form-message a{color:var(--nuit);font-weight:700}
/* Piège à robots : hors de la vue et du clavier, mais toujours dans le formulaire */
.hp{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Formulaire d'extension (code court renseigné dans « Réglages du site ») */
.form-externe p + p{margin-top:14px}
.form-externe label{font:600 13.5px/1.3 var(--f-texte);color:var(--nuit)}
.form-externe input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.form-externe select,
.form-externe textarea{
  width:100%;min-height:48px;margin-top:6px;padding:0 20px;
  border:1.5px solid var(--filet-champ);border-radius:100px;
  background:var(--blanc);color:var(--texte);font:500 16px/1.4 var(--f-texte);
}
.form-externe textarea{min-height:120px;padding:14px 20px;border-radius:22px}
.form-externe input[type="submit"],
.form-externe button[type="submit"]{
  min-height:48px;padding:12px 28px;border:0;border-radius:100px;
  background:var(--bande-fond);color:var(--blanc);font:700 16px/1.2 var(--f-texte);cursor:pointer;
}
.form-externe input[type="submit"]:hover,
.form-externe button[type="submit"]:hover{background:var(--nuit)}
.form-externe .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:13px;color:var(--alerte)}
.form-externe .wpcf7-response-output{margin:16px 0 0 !important;padding:14px 18px !important;border:0 !important;border-left:4px solid var(--bande-fond) !important;background:var(--gris);font-weight:600;color:var(--nuit)}

/* =============================================================================
   16. PAGES INTÉRIEURES — BANDEAU, FIL D'ARIANE, INTRODUCTION
   ========================================================================== */

.bandeau{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  display:flex;align-items:flex-end;
  min-height:calc(var(--h-top) + var(--h-nav) + 300px);
  padding:calc(env(safe-area-inset-top, 0px) + var(--h-top) + var(--h-nav) + 40px) 0 48px;
  background:var(--nuit);color:var(--blanc);--focus:var(--blanc);
}
.bandeau-photo{position:absolute;inset:0;z-index:-3}
img.bandeau-photo{width:100%;height:100%}
/* Image ACF du bandeau telle que la rend le thème actuel */
.bandeau-img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}
.bandeau::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, var(--voile-fort) 0%, transparent 38%),
    linear-gradient(90deg, rgba(11, 33, 56, .88) 0%, var(--voile-fort) 100%);
}
.bandeau-oblique{
  display:none;
  position:absolute;right:-24px;bottom:-40px;z-index:-1;
  top:calc(var(--h-top) + var(--h-nav) + 10px);
  width:60px;background:var(--bandeau-oblique, var(--oblique));
  transform:skewX(-20deg);transform-origin:50% 100%;
}
.bandeau-contenu{position:relative;min-width:0}
.ariane ol{display:flex;flex-wrap:wrap;font:600 13px/1.4 var(--f-texte)}
.ariane li + li::before{content:"/";content:"/" / "";margin:0 10px;font-weight:900;color:var(--oblique)}
.ariane a{color:var(--blanc)}
.bandeau .surtitre{margin:18px 0 8px}
.bandeau h1{font-size:clamp(30px, 3.6vw, 48px);line-height:1.12;max-width:21ch}
.bandeau-chapo{max-width:580px;margin-top:16px;line-height:1.7}
.bandeau-actions,
.bandeau-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* Fil d'Ariane rendu par ct_fil_ariane() (inc/seo.php) :
   <nav class="fil"><div class="wrap"><a>…</a><i>/</i><span aria-current="page">…</span></div></nav>
   Hors bandeau : fine barre grise. Dans le bandeau : même rendu que .ariane. */
.fil{background:var(--gris);font:600 13px/1.4 var(--f-texte);color:var(--texte-2)}
.fil .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-block:14px}
.fil a{color:var(--nuit);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em}
.fil a:hover{text-decoration-color:var(--oblique)}
.fil i{font-style:normal;font-weight:900;color:var(--bande-texte)}
.fil span[aria-current]{color:var(--nuit)}
.bandeau .fil{background:none;color:var(--blanc)}
.bandeau .fil .wrap{width:auto;margin:0;padding:0}
.bandeau .fil a,
.bandeau .fil span[aria-current]{color:var(--blanc)}
.bandeau .fil a{text-decoration-color:var(--filet-clair)}
.bandeau .fil a:hover{text-decoration-color:var(--oblique)}
.bandeau .fil i{color:var(--oblique)}

.intro{background:var(--nuit);padding-block:clamp(56px, 7vw, 90px)}
.intro-grille{display:grid;gap:24px}
.intro-grille > *{min-width:0}
.intro h2{font-size:clamp(23px, 2.1vw, 26px);line-height:1.3}
.intro-texte p{font-size:15.5px;line-height:2}
.intro-texte p + p{margin-top:14px}

/* =============================================================================
   17. LE PARCOURS EN ÉTAPES
   ========================================================================== */

.frise{position:relative;display:grid;gap:36px}
.etape{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);gap:18px;align-items:start}
.etape:not(:last-child)::after{content:"";position:absolute;left:31px;top:52px;bottom:-36px;width:2px;background:var(--oblique)}
.etape-num{
  position:relative;z-index:1;display:grid;place-items:center;
  min-width:64px;height:52px;padding:0 14px;
  background:var(--oblique);color:var(--nuit);
  font:800 26px/1 var(--f-texte);font-variant-numeric:tabular-nums;
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.etape h3{font-size:18px;line-height:1.35;color:var(--nuit)}
.etape p{margin-top:8px;font-size:15px;line-height:1.75;color:var(--texte-2)}
.etape .etape-duree{
  display:inline-block;margin-top:12px;padding:7px 12px;border-radius:100px;
  background:var(--gris);color:var(--nuit);
  font:700 11.5px/1.1 var(--f-texte);letter-spacing:.08em;text-transform:uppercase;
}

/* =============================================================================
   18. REGISTRE DES AFFAIRES — FILTRES, CARTES, PAGINATION, ÉTAT VIDE
   ========================================================================== */

.avertissement{
  display:flex;gap:12px;align-items:flex-start;margin:24px 0 28px;padding:14px 18px;
  background:var(--gris);border-left:4px solid var(--oblique);
  font-size:14px;line-height:1.6;color:var(--nuit);
}
.avertissement .ico,.avertissement svg{flex:none;width:18px;height:18px;margin-top:2px}

/* Filtres en pilules : boutons (maquette) ou liens vers les taxonomies
   secteur / zone (site), la page courante portant aria-current="page". */
.filtres{display:grid;gap:18px;margin-bottom:18px}
.filtre-groupe{min-width:0;margin:0;padding:0;border:0}
.filtre-groupe legend,
.filtre-titre{
  display:block;margin:0 0 10px;padding:0;
  font:700 12px/1 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);
}
.pilules,
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters + .filters{margin-top:10px}
.pilule,
.filters a,
.filters button{
  display:inline-flex;align-items:center;min-height:44px;
  padding:8px 16px;border:1.5px solid var(--filet-champ);border-radius:100px;
  background:var(--blanc);color:var(--nuit);font:600 13.5px/1.2 var(--f-texte);text-decoration:none;
  transition:background-color var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.pilule,.onglet{min-height:44px;display:inline-flex;align-items:center}
.pilule:hover,
.filters a:hover,
.filters button:hover{border-color:var(--nuit)}
.pilule[aria-pressed="true"],
.pilule[aria-current="page"],
.filters [aria-pressed="true"],
.filters [aria-current="page"]{background:var(--nuit);border-color:var(--nuit);color:var(--blanc)}
.filtres-resultat{margin-bottom:24px;font-size:14px;color:var(--texte-2)}

.cartes-affaires{display:grid;gap:24px}
.carte-affaire{
  position:relative;
  display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--filet);
  color:inherit;text-decoration:none;
  transition:box-shadow var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.carte-affaire:hover{box-shadow:var(--ombre);transform:translateY(-3px)}
.carte-tete{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:space-between;gap:10px;
  min-height:112px;padding:18px 20px;
  background:var(--t-fond);color:var(--t-encre);
}
.carte-tete .filigrane{right:14px;top:-34px;font-size:190px;color:rgba(255, 255, 255, .16)}
.carte-tete.tuile--2 .filigrane,
.carte-tete.tuile--4 .filigrane,
.carte-tete.tuile--5 .filigrane{color:rgba(11, 33, 56, .12)}
.carte-tete .etiquette--offre,
.carte-tete .etiquette--cedee{position:absolute;top:18px;right:20px}
.carte-corps{display:flex;flex-direction:column;flex:1;gap:6px;padding:22px 20px 24px}
.carte-ref{font:700 12px/1.2 var(--f-texte);letter-spacing:.08em;color:var(--texte-2)}
.carte-corps h2,
.carte-corps h3{font-size:18px;line-height:1.35;color:var(--nuit);min-height:calc(2 * 1.35em)}
/* Le titre porte le lien vers la fiche : toute la carte devient cliquable,
   le bouton « Recevoir le dossier » reste au-dessus. */
.carte-corps h2 a,
.carte-corps h3 a{color:inherit;text-decoration:none}
.carte-corps h2 a::after,
.carte-corps h3 a::after{content:"";position:absolute;inset:0;z-index:0}
.carte-corps h2 a:hover,
.carte-corps h3 a:hover{text-decoration:underline;text-decoration-color:var(--oblique)}
.carte-accroche{font-size:14px;line-height:1.55;color:var(--texte-2);min-height:calc(2 * 1.55em)}
.reperes{display:grid;margin:14px 0 22px}
.reperes div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--filet)}
.reperes dt{font-size:13px;color:var(--texte-2)}
.reperes dd{font:700 14.5px/1.3 var(--f-texte);color:var(--nuit);text-align:right;font-variant-numeric:tabular-nums}
.carte-corps .btn{margin-top:auto;align-self:flex-start}
.carte-corps .btn,
.carte-corps .lien-souligne{position:relative;z-index:1}
.cartes-vide{padding:28px;background:var(--gris);text-align:center;color:var(--nuit)}
.cartes-vide .btn{margin-top:14px}

/* Pagination (paginate_links, the_posts_pagination, wp_link_pages) */
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(36px, 4vw, 56px)}
.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pagination .page-numbers,
.pagination .post-page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;
  border:1.5px solid var(--filet-champ);border-radius:100px;
  background:var(--blanc);color:var(--nuit);
  font:700 14px/1 var(--f-texte);font-variant-numeric:tabular-nums;text-decoration:none;
  transition:background-color var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.pagination a.page-numbers:hover,
.pagination a.post-page-numbers:hover{border-color:var(--nuit)}
.pagination .page-numbers.current,
.pagination .post-page-numbers.current{background:var(--nuit);border-color:var(--nuit);color:var(--blanc)}
.pagination .page-numbers.dots{min-width:0;padding:0 4px;border-color:transparent;background:transparent}

/* État vide : aucune affaire, aucun résultat */
.vide,
.reg-vide{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:16px;justify-items:start;
  padding:clamp(28px, 4vw, 56px);
  background:var(--gris);color:var(--texte);
}
.vide::before,
.reg-vide::before{
  content:"/";content:"/" / "";
  position:absolute;z-index:-1;right:2%;top:-14%;
  font:900 clamp(180px, 24vw, 320px)/.8 var(--f-texte);color:var(--blanc);
  pointer-events:none;
}
.vide h2,.vide h3,
.reg-vide h2,.reg-vide h3{max-width:32ch;font-size:clamp(21px, 2vw, 26px);font-weight:var(--g-titre-sec);line-height:1.25;color:var(--nuit)}
.vide p,
.reg-vide p{max-width:62ch;line-height:1.75;color:var(--texte-2)}
.vide .btn,
.reg-vide .btn{margin-top:6px}

/* Note de bas de registre ou de fiche */
.disclaimer{
  display:block;margin-top:28px;padding:14px 18px;
  background:var(--gris);border-left:4px solid var(--oblique);
  font-size:14px;line-height:1.65;color:var(--nuit);
}

/* =============================================================================
   19. FICHE D'UNE AFFAIRE
   Deux colonnes sur grand écran : le contenu, et un encadré collant avec les
   repères et le bouton qui ouvre la modale.
   ========================================================================== */

.fiche{display:grid;gap:40px;align-items:start}
.fiche > *{min-width:0}
.fiche-chiffres{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 160px), 1fr));gap:12px;margin:0 0 40px}
.fiche-chiffres > div{padding:18px 20px;background:var(--gris);border-top:4px solid var(--oblique)}
.fiche-chiffres dt{font:700 11.5px/1.3 var(--f-texte);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2)}
.fiche-chiffres dd{margin-top:8px;font:700 clamp(19px, 1.8vw, 24px)/1.2 var(--f-texte);color:var(--nuit);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fiche-bloc{margin-bottom:40px}
.fiche-bloc h2{margin-bottom:16px;font-size:clamp(21px, 2vw, 26px);font-weight:var(--g-titre-sec);line-height:1.25;color:var(--nuit)}
.fiche-bloc p{line-height:1.8}
.fiche-bloc p + p{margin-top:12px}
.fiche-bloc strong{font-weight:700;color:var(--nuit)}
.fiche-points{display:grid;gap:12px}
.fiche-points li{position:relative;padding-left:24px;line-height:1.7}
.fiche-points li::before{content:"/";content:"/" / "";position:absolute;left:0;top:0;font-weight:900;color:var(--oblique)}
.fiche-aside{
  display:grid;gap:24px;align-content:start;
  padding:clamp(24px, 3vw, 36px);
  background:var(--gris);border-top:6px solid var(--oblique);
}
.fiche-aside > div{display:grid;gap:14px;justify-items:start;min-width:0}
.fiche-aside > div + div{padding-top:24px;border-top:1px solid var(--filet-fort)}
.fiche-aside h2{font-size:clamp(21px, 2vw, 25px);font-weight:var(--g-titre-sec);line-height:1.25;color:var(--nuit)}
.fiche-aside p{font-size:14.5px;line-height:1.7}
.fiche-aside a:not(.btn){color:var(--nuit);font-weight:700}
.fiche-aside .reperes{width:100%;margin:0}
.fiche-meta{display:grid;width:100%}
.fiche-meta li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--filet);font-size:13.5px;color:var(--texte-2)}
.fiche-meta b{font:700 14px/1.3 var(--f-texte);color:var(--nuit);text-align:right}
.fiche-meta a{color:inherit;text-decoration:none}
.fiche-meta a:hover{text-decoration:underline;text-decoration-color:var(--oblique)}

/* =============================================================================
   20. CONTENU ÉDITORIAL (.rte) ET ALIGNEMENTS WORDPRESS
   Texte saisi dans l'éditeur WordPress (the_content) ou dans un champ ACF
   « wysiwyg » : titres, listes, liens, citations, images, tableaux.
   ========================================================================== */

.rte{display:flow-root;min-width:0;overflow-wrap:break-word}
.rte > * + *{margin-top:1.1em}
.rte > :first-child{margin-top:0}
.rte p,
.rte li{line-height:1.85}
.rte h2{margin-top:1.8em;font-size:clamp(23px, 2.2vw, 30px);font-weight:var(--g-titre-sec);line-height:1.25;color:var(--nuit)}
.rte h2::before{content:"/";content:"/" / "";display:inline-block;margin-right:8px;font-weight:900;color:var(--oblique)}
.rte h3{margin-top:1.6em;font-size:clamp(19px, 1.6vw, 22px);font-weight:var(--g-titre-sec);line-height:1.3;color:var(--nuit)}
.rte h4,.rte h5,.rte h6{margin-top:1.5em;font:700 17px/1.4 var(--f-texte);color:var(--nuit)}
.rte h2 + *,.rte h3 + *,.rte h4 + *{margin-top:.7em}
.rte a{
  color:var(--nuit);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--oblique);
  text-decoration-thickness:2px;text-underline-offset:.25em;
  transition:text-decoration-color var(--duree) var(--ease);
}
.rte a:hover{text-decoration-color:currentColor}
.rte strong,.rte b{font-weight:700;color:var(--nuit)}
.rte ul,
.rte ol{display:grid;gap:.5em}
.rte ul > li{position:relative;padding-left:22px}
.rte ul > li::before{content:"/";content:"/" / "";position:absolute;left:0;top:0;font-weight:900;color:var(--oblique)}
.rte ol{padding-left:1.5em;list-style:decimal}
.rte ol > li{padding-left:.3em}
.rte ol > li::marker{font-weight:800;color:var(--bande-texte)}
.rte li > ul,
.rte li > ol{margin-top:.5em}
.rte blockquote{
  margin-block:1.6em;padding:4px 0 4px 24px;border-left:4px solid var(--oblique);
  font-size:var(--t-chapo);font-weight:600;line-height:1.55;color:var(--nuit);
}
.rte blockquote p{line-height:inherit}
.rte blockquote p + p{margin-top:.6em}
.rte blockquote cite{display:block;margin-top:10px;font:700 12.5px/1.4 var(--f-texte);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2)}
.rte img{max-width:100%;height:auto}
.rte figure{margin-block:1.6em}
.rte figcaption,
.rte .wp-caption-text,
.rte .wp-element-caption{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--texte-2)}
.rte hr{height:1px;margin-block:2em;border:0;background:var(--filet-fort)}
.rte table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px}
.rte th,
.rte td{padding:12px 14px;border-bottom:1px solid var(--filet);text-align:left;vertical-align:top}
.rte th{font-weight:700;color:var(--nuit)}
.rte code,
.rte kbd{padding:.1em .35em;border-radius:4px;background:var(--gris);font-size:.92em}
.rte pre{overflow-x:auto;padding:16px 18px;background:var(--gris);font-size:14px;line-height:1.6}
.rte iframe,
.rte embed,
.rte video{max-width:100%}

/* Contenu éditorial sur fond foncé (panneaux, bande d'introduction) */
.fonce .rte h2,.fonce .rte h3,.fonce .rte h4,.fonce .rte h5,.fonce .rte h6,
.fonce .rte strong,.fonce .rte b,.fonce .rte a,.fonce .rte blockquote,
.surface-deep .rte h2,.surface-deep .rte h3,.surface-deep .rte h4,
.surface-deep .rte strong,.surface-deep .rte b,.surface-deep .rte a,.surface-deep .rte blockquote{color:var(--blanc)}
.fonce .rte ol > li::marker,
.surface-deep .rte ol > li::marker{color:var(--oblique)}
.fonce .rte figcaption,.fonce .rte blockquote cite,
.surface-deep .rte figcaption,.surface-deep .rte blockquote cite{color:rgba(255, 255, 255, .78)}
.fonce .rte hr,
.surface-deep .rte hr{background:var(--filet-clair)}
.fonce .rte th,.fonce .rte td{border-bottom-color:var(--filet-clair)}
.fonce .rte th{color:var(--blanc)}
.fonce .rte code,.fonce .rte kbd,.fonce .rte pre{background:rgba(255, 255, 255, .08)}

/* Alignements et légendes de l'éditeur WordPress */
.alignleft{float:left;max-width:50%;margin:.3em 1.6em 1em 0}
.alignright{float:right;max-width:50%;margin:.3em 0 1em 1.6em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignnone{max-width:100%}
.rte > .alignleft + *,
.rte > .alignright + *{margin-top:0}
.wp-caption{max-width:100%}
.wp-caption img{display:block;max-width:100%;height:auto}
.wp-caption.aligncenter{margin-left:auto;margin-right:auto}
.gallery{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.gallery-item{margin:0;min-width:0}
.gallery-item img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.gallery-caption{margin-top:6px;font-size:13px;line-height:1.5;color:var(--texte-2)}

/* =============================================================================
   21. GLISSIÈRE
   Défilement natif (scroll-snap) ; les boutons ne font que le déclencher.
   ========================================================================== */

.glisse{position:relative;width:100%;min-width:0}
.glisse-piste{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc(85% - 9px);gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
}
.glisse-piste::-webkit-scrollbar{display:none}
.glisse-item{min-width:0;scroll-snap-align:start;padding:24px;background:var(--gris);border-top:4px solid var(--oblique)}
.glisse-item h3{margin-bottom:8px;font-size:18px;font-weight:var(--g-titre-sec);line-height:1.35;color:var(--nuit)}
.glisse-item p{font-size:15px;line-height:1.7;color:var(--texte-2)}
.fonce .glisse-item,
.surface-deep .glisse-item{background:rgba(255, 255, 255, .08)}
.fonce .glisse-item h3,.fonce .glisse-item p,
.surface-deep .glisse-item h3,.surface-deep .glisse-item p{color:var(--blanc)}
.glisse-nav{display:flex;gap:8px;margin-top:16px}
.glisse-btn{
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1.5px solid var(--filet-champ);border-radius:50%;
  background:transparent;color:var(--nuit);font:700 20px/1 var(--f-texte);
  transition:background-color var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.glisse-btn:hover:not(:disabled){background:var(--nuit);border-color:var(--nuit);color:var(--blanc)}
.glisse-btn:disabled{opacity:.35;cursor:default}
.fonce .glisse-btn,
.surface-deep .glisse-btn{border-color:var(--filet-clair);color:var(--blanc)}
.fonce .glisse-btn:hover:not(:disabled),
.surface-deep .glisse-btn:hover:not(:disabled){background:var(--blanc);border-color:var(--blanc);color:var(--nuit)}

/* =============================================================================
   22. PIED DE PAGE
   ========================================================================== */

.pied{background:var(--nuit);color:var(--blanc);--focus:var(--blanc);padding-top:clamp(56px, 7vw, 90px)}
.pied-grille{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:36px 24px;padding-bottom:48px}
.pied-grille > *{min-width:0}
.pied-titre{margin-bottom:16px;font:600 15px/1.35 var(--f-texte);letter-spacing:0;color:var(--blanc)}
.pied-liens{display:grid;gap:10px}
.pied-liens a{font:600 13px/1.4 var(--f-texte);color:var(--blanc);text-decoration:none}
.pied-liens a:hover{text-decoration:underline;text-decoration-color:var(--oblique)}
.pied-liens a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--oblique)}
.pied-contact{grid-column:1 / -1}
.pied-contact .pied-titre{font-size:17px;max-width:22ch}
.pied-contact .btn{margin-bottom:8px}
.coord--pied{margin-top:24px}
.coord--pied li{grid-template-columns:38px minmax(0, 1fr)}
.coord--pied .coord-picto{width:38px;height:38px;background:transparent;border:1px solid var(--filet-clair)}
.coord--pied .coord-picto .ico,
.coord--pied .coord-picto svg{width:17px;height:17px}
.coord--pied .coord-texte{font-size:13.5px;padding-top:6px}
.coord--pied .coord-texte a{color:var(--blanc)}
.coord--pied .coord-texte small,
.coord--pied .coord-texte > span{color:rgba(255, 255, 255, .78)}
.pied-mentions{padding-bottom:28px;font-size:12.5px;line-height:1.65;color:rgba(255, 255, 255, .78)}
/* Marge basse : le contenu passe au-dessus du bouton flottant et du retour en haut */
.pied-bas{border-top:1px solid var(--filet-clair);padding:22px 0 calc(88px + env(safe-area-inset-bottom, 0px))}
.pied-bas-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.pied-bas .marque-mono{width:36px}
/* Marque et accroche du site (option ACF « accroche_site ») */
.pied-marque{display:grid;gap:10px;justify-items:start;min-width:0}
.pied-accroche{max-width:34ch;font-size:12.5px;line-height:1.55;color:rgba(255, 255, 255, .78)}
/* Liens légaux : une seule ligne à toutes les largeurs (exigence client) */
.legal{display:flex;flex-wrap:nowrap;max-width:100%;white-space:nowrap;font:600 clamp(9px, 2.75vw, 11px)/1.4 var(--f-texte)}
.legal li{flex:none}
.legal li + li::before{content:"·";content:"·" / "";margin:0 .45em;color:var(--oblique)}
.legal a{color:var(--blanc);text-decoration:none;white-space:nowrap}
.legal a:hover{text-decoration:underline}
.signature{display:inline-flex;align-items:center;gap:10px;font:600 12px/1.4 var(--f-texte);color:var(--blanc);text-decoration:none}
.signature img{flex:none;width:30px;height:30px;object-fit:contain}
.signature .ico,.signature svg{width:12px;height:12px;color:var(--oblique);vertical-align:-1px}
.signature .coeur{color:var(--oblique)}
.signature:hover span{text-decoration:underline}

/* =============================================================================
   23. ÉLÉMENTS FIXES : BOUTON FLOTTANT, RETOUR EN HAUT, COOKIES, MODALE
   ========================================================================== */

.flottant{
  position:fixed;right:0;bottom:calc(24px + var(--h-cookies, 0px) + env(safe-area-inset-bottom, 0px));z-index:45;
  display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:14px 20px 14px 18px;border:0;border-radius:100px 0 0 100px;
  background:var(--bande-fond);color:var(--blanc);box-shadow:var(--ombre);
  font:700 12.5px/1 var(--f-texte);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  --focus:var(--nuit);
  transition:padding var(--duree) var(--ease), background-color var(--duree) var(--ease), bottom var(--duree) var(--ease);
}
.flottant:hover{background:var(--nuit);padding-right:28px}
.flottant .ico,.flottant svg{width:18px;height:18px}
.flottant:focus-visible{outline-color:var(--blanc);outline-offset:-6px}

/* Retour en haut (template-parts/cookies.php : #retourHaut) — au-dessus du
   bouton flottant sur mobile, en dessous sur grand écran. */
.haut{
  position:fixed;right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(88px + var(--h-cookies, 0px) + env(safe-area-inset-bottom, 0px));z-index:44;
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1.5px solid var(--filet-clair);border-radius:50%;
  background:var(--nuit);color:var(--blanc);box-shadow:var(--ombre-douce);
  --focus:var(--nuit);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--duree) var(--ease), transform var(--duree) var(--ease), visibility 0s linear var(--duree), background-color var(--duree) var(--ease), bottom var(--duree) var(--ease);
}
.haut.vu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.haut:hover{background:var(--bande-fond)}
.haut i{display:block;width:12px;height:12px;margin-top:6px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.haut .ico,.haut svg{width:18px;height:18px}

/* Bandeau cookies (template-parts/cookies.php : #bandeauCookies) */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--nuit);color:var(--blanc);--focus:var(--blanc);
  border-top:4px solid var(--oblique);
  box-shadow:0 -10px 30px -14px rgba(11, 33, 56, .4);
  transform:translateY(calc(100% + 8px));
  transition:transform .4s var(--ease);
}
.cookies.vu{transform:none}
.cookies-corps{
  width:min(100% - 2 * var(--gout), var(--wrap));margin-inline:auto;
  display:grid;gap:14px;padding-block:18px 20px;
}
.cookies p{max-width:78ch;font-size:14px;line-height:1.65}
.cookies a{color:var(--blanc);font-weight:700;text-decoration:underline;text-decoration-color:var(--oblique);text-decoration-thickness:2px;text-underline-offset:.25em}
.cookies-actions{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
.cookies .cookies-actions .btn{min-height:44px;padding:10px 16px;font-size:14px}
.cookies .btn:not([class*="btn--"]){background:var(--oblique);color:var(--nuit)}
.cookies .btn:not([class*="btn--"]):hover{background:var(--blanc);color:var(--nuit)}

/* Fenêtre modale (template-parts/modale.php : #modaleContact) */
.modale{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:calc(16px + var(--admin, 0px) + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.modale-voile{position:absolute;inset:0;background:var(--voile)}
.modale-boite{
  position:relative;width:min(760px, 100%);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - var(--admin, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow:auto;overscroll-behavior:contain;
  padding:clamp(24px, 4vw, 44px);border-top:6px solid var(--oblique);
  background:var(--blanc);color:var(--texte);box-shadow:var(--ombre);
  --focus:var(--nuit);
}
.modale-fermer{
  position:sticky;top:0;z-index:2;margin:-12px -12px -32px auto;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border-radius:50%;
  border:1.5px solid var(--filet-champ);background:var(--blanc);color:var(--nuit);
  font:500 26px/1 var(--f-texte);
  transition:border-color var(--duree) var(--ease);
}
.modale-fermer:hover{border-color:var(--nuit)}
.modale-fermer .ico,.modale-fermer svg{width:18px;height:18px}
.modale-boite .surtitre,
.modale-boite .eyebrow{color:var(--bande-texte)}
.modale-boite h2{padding-right:52px;font-size:clamp(24px, 2.4vw, 32px);color:var(--nuit)}
.modale-texte{margin:10px 0 18px;color:var(--texte-2)}
.modale-contexte{margin:-6px 0 18px;padding:10px 14px;background:var(--gris);font-size:14px;font-weight:600;color:var(--nuit)}
/* Dans la modale, le formulaire n'a pas de chapô : le titre et le texte suffisent. */
.modale-boite .form-intro{display:none}

/* L'attribut « hidden » ne masque un élément que si aucune règle ne lui donne
   un « display ». .modale et .haut en ont un : sans cette ligne, la fenêtre
   reste dans la page, invisible, et son voile intercepte les clics. */
.modale[hidden],
.haut[hidden]{display:none !important}

/* =============================================================================
   24. PAGE 404
   ========================================================================== */

.puces{display:flex;flex-wrap:wrap;gap:8px}
.puces a,
.puces span{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;
  border:1.5px solid var(--filet-champ);border-radius:100px;
  background:var(--blanc);color:var(--nuit);font:600 14px/1.2 var(--f-texte);text-decoration:none;
  transition:border-color var(--duree) var(--ease), background-color var(--duree) var(--ease), color var(--duree) var(--ease);
}
.puces a:hover{background:var(--nuit);border-color:var(--nuit);color:var(--blanc)}
.error404 .bandeau h1{max-width:18ch}

/* =============================================================================
   25. COMPATIBILITÉ — anciennes classes du thème
   Filet de sécurité : un gabarit qui n'aurait pas encore été repris garde un
   rendu cohérent avec le nouveau design. Les nouveaux gabarits utilisent les
   classes de la maquette.
   ========================================================================== */

.sec{padding-block:clamp(64px, 8vw, 110px)}
.sec--serre{padding-block:clamp(48px, 6vw, 80px)}
.sec--alt{background:var(--ivoire)}
.surface-deep{background:var(--nuit);color:var(--blanc);--focus:var(--blanc)}
.sec-head{display:grid;gap:12px;justify-items:start}
.sec-corps{margin-top:clamp(32px, 4vw, 52px)}
.eyebrow{font:600 15px/1.4 var(--f-texte);letter-spacing:.02em;color:var(--bande-texte)}
.surface-deep .eyebrow,
.fonce .eyebrow,
.bandeau .eyebrow,
.hero .eyebrow{color:var(--oblique)}
.h-sec{font-size:var(--t-section);font-weight:var(--g-titre-sec);line-height:1.2;color:var(--nuit)}
.h-sub{font-size:clamp(21px, 2vw, 26px);font-weight:var(--g-titre-sec);line-height:1.25;color:var(--nuit)}
.surface-deep .h-sec,.surface-deep .h-sub,
.fonce .h-sec,.fonce .h-sub{color:var(--blanc)}
.lede{max-width:62ch;font-size:var(--t-chapo);line-height:1.5;color:var(--texte-2)}
.surface-deep .lede,
.fonce .lede{color:var(--blanc)}
.lnk{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:15px;color:var(--nuit);
  text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--oblique);text-underline-offset:.35em;
  transition:text-decoration-color var(--duree) var(--ease);
}
.lnk:hover{text-decoration-color:currentColor}
.surface-deep .lnk,
.fonce .lnk{color:var(--blanc)}
.btn--ghost{background:var(--nuit);color:var(--blanc)}
.btn--ghost:hover{background:var(--bande-fond);color:var(--blanc)}
.btn--ligne,
.fonce .btn--ghost,
.surface-deep .btn--ghost,
.bandeau .btn--ghost,
.hero .btn--ghost,
.tiroir .btn--ghost,
.cookies .btn--ghost{background:transparent;border-color:var(--blanc);color:var(--blanc)}
.btn--ligne:hover,
.fonce .btn--ghost:hover,
.surface-deep .btn--ghost:hover,
.bandeau .btn--ghost:hover,
.hero .btn--ghost:hover,
.tiroir .btn--ghost:hover,
.cookies .btn--ghost:hover{background:var(--blanc);color:var(--nuit)}
.actions{display:flex;flex-wrap:wrap;gap:14px}

/* =============================================================================
   26. MOUVEMENT (jamais d'opacité : tout reste lisible sans défiler)
   ========================================================================== */

@keyframes bande-entre{
  from{transform:translate(87px, -240px) skewX(-20deg)}
  to{transform:skewX(-20deg)}
}
@keyframes monte-entre{
  from{transform:translateY(28px)}
  to{transform:none}
}
.anime .hero-bande{animation:bande-entre .7s var(--ease) both}
.anime .hero-titre{animation:monte-entre .7s var(--ease) .08s both}
.anime .modale-boite{animation:monte-entre .35s var(--ease) both}
.js-monte .monte{transform:translateY(20px);transition:transform .8s var(--ease)}
.js-monte .monte.vu{transform:none}

/* =============================================================================
   27. REQUÊTES MÉDIA
   ========================================================================== */

@media (max-width: 782px){
  .admin-bar{--admin:46px}
}

@media (max-width: 767px){
  /* Pied de page centré sur mobile : colonnes, logo, coordonnées avec le
     pictogramme posé au-dessus du texte. */
  .pied-grille{text-align:center}
  .pied-liens{justify-items:center}
  .pied-contact .pied-titre{margin-inline:auto}
  .coord--pied li{grid-template-columns:minmax(0, 1fr);justify-items:center;gap:8px}
  .coord--pied .coord-texte{padding-top:0;text-align:center}
  .pied-mentions{text-align:center}
  .pied-bas-in{flex-direction:column;justify-content:center;text-align:center}
  .pied-marque{justify-items:center}
}

@media (max-width: 559px){
  .alignleft,
  .alignright{float:none;max-width:100%;margin:1em 0}
}

@media (min-width: 560px){
  .oriente-in{grid-template-columns:repeat(2, minmax(0, 1fr));align-items:end}
  .oriente-ok{grid-column:1 / -1}
  .hero-cadre{--h:320px}
  .hero-bande{height:400px}
}

@media (min-width: 640px){
  .champs,
  .field-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pied-grille{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

@media (min-width: 768px){
  .btn:not(.btn--petit){padding-inline:45px}
  .cookies .cookies-actions .btn{padding-inline:24px}
  /* À l'ouverture, la barre « Je suis / Je cherche » occupe le bas du premier
     écran : le bouton flottant monte au-dessus pour ne pas la masquer. */
  .flottant{bottom:calc(112px + var(--h-cookies, 0px) + env(safe-area-inset-bottom, 0px))}
  .haut{bottom:calc(32px + var(--h-cookies, 0px) + env(safe-area-inset-bottom, 0px))}
  .pied-bas{padding-bottom:calc(176px + env(safe-area-inset-bottom, 0px))}
  .gages{flex-direction:row}
  .gages li + li::before{display:inline}

  .hero-bande{left:62%;width:96px;height:440px}
  .hero-cadre{--h:360px;margin-left:10%}

  .tuiles{gap:18px}
  .tuiles + .tuile-large{margin-top:18px}
  .tuile-titre{padding:20px 20px 0}

  .cartes-photo{grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px}

  .appel{padding:clamp(72px, 8vw, 110px) 0}
  .appel::before{top:0;clip-path:polygon(40% 0, 100% 0, 100% 100%, 24% 100%)}
  .appel-grille{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);gap:clamp(40px, 5vw, 72px);align-items:center}
  .appel-photo{aspect-ratio:4 / 3;width:auto}

  .bandeau{min-height:calc(var(--h-top) + var(--h-nav) + 360px);padding-bottom:64px}
  .bandeau::before{
    background:
      linear-gradient(180deg, var(--voile-fort) 0, var(--voile-fort) calc(var(--h-top) + var(--h-nav)), transparent calc(var(--h-top) + var(--h-nav) + 140px)),
      linear-gradient(90deg, var(--nuit) 0, var(--voile-fort) calc(max(var(--gout), (100% - var(--wrap)) / 2) + 620px), transparent calc(max(var(--gout), (100% - var(--wrap)) / 2) + 920px));
  }
  .bandeau-oblique{display:block;right:9%;width:clamp(80px, 9vw, 140px)}

  .frise{grid-template-columns:repeat(2, minmax(0, 1fr));gap:48px 56px}
  .etape:not(:last-child)::after{display:none}
  .etape{grid-template-columns:minmax(0, 1fr)}
  .etape-num{justify-self:start;min-width:84px;height:64px;font-size:34px}
  .etape::before{left:-28px}
  .etape:nth-child(even)::before{display:block}

  .cartes-affaires{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .filtres{grid-template-columns:minmax(0, 1fr)}

  .glisse-piste{grid-auto-columns:calc(50% - 9px)}

  .cookies-corps{grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:32px}
  .cookies-actions{display:flex;flex-wrap:wrap}

  .gallery-columns-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
}

@media (min-width: 900px){
  .annonces{grid-template-columns:repeat(3, minmax(0, 1fr));gap:48px}
  .annonce{position:relative;padding:0;border:0}
  .annonce + .annonce::before{
    content:"";position:absolute;left:-24px;top:4px;bottom:4px;width:1px;
    background:var(--filet-fort);transform:skewX(-12deg);
  }
}

@media (min-width: 1024px){
  :root{--h-nav:96px;--h-nav-colle:72px}
  /* Page avec la barre collante : les ancres s'arrêtent sous elle. */
  :root:has(.oriente){--h-barre:74px}

  .champ input,.champ select,.champ textarea,
  .field input,.field select,.field textarea{font-size:15px}
  .pilule-select select{font-size:14px;padding:0 46px 0 18px}

  .gages{flex-direction:column}
  .gages li + li::before{display:none}

  .top-lieu,.top-cherche{display:inline-flex}
  .entete-top-in{justify-content:space-between}

  .nav{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
  .nav-liste{width:calc(50% - 105px - 14px)}
  .pave{position:absolute;left:50%;top:0;transform:translateX(-50%);width:210px;height:calc(var(--h-nav) + 16px);padding:0}
  .est-plein .pave{height:calc(var(--h-nav-colle) + 10px)}
  .pave-logo,
  .pave .brand-img,
  .pave .custom-logo{height:58px;max-width:180px;object-fit:contain}
  .est-plein .pave-logo,
  .est-plein .pave .brand-img,
  .est-plein .pave .custom-logo{height:44px}
  .pave .marque-mono{width:50px}
  .pave .marque-nom{font-size:12px}
  .burger,.tiroir{display:none !important}

  .hero{display:flex;align-items:center;min-height:clamp(680px, 52vw, 760px);padding-top:calc(env(safe-area-inset-top, 0px) + var(--h-top) + var(--h-nav) + 56px);padding-bottom:90px}
  .hero-grille{grid-template-columns:minmax(0, 560px) minmax(0, 1fr);align-items:center;gap:48px}
  .hero-bande{top:calc(env(safe-area-inset-top, 0px) + var(--h-top) + var(--h-nav));bottom:-60px;height:auto;left:max(64%, calc(50% + 200px));width:clamp(110px, 10vw, 160px)}
  .hero-cadre{--h:clamp(400px, 34vw, 500px);margin-left:0}

  .oriente{position:sticky;top:calc(env(safe-area-inset-top, 0px) + var(--admin, 0px) + var(--h-nav-colle))}
  .oriente-in{display:flex;align-items:center;gap:14px;min-height:74px;padding-block:12px}
  .oriente-champ{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
  .oriente-label{font-size:clamp(16px, 1.5vw, 20px);white-space:nowrap}
  .pilule-select{flex:1 1 auto}
  .oriente-ok{flex:none}

  .scinde{grid-template-columns:minmax(0, 45fr) minmax(0, 55fr);min-height:600px;--coupe:clamp(90px, 9vw, 128px)}
  .scinde-photo{grid-column:1;grid-row:1;min-height:0}
  .scinde-panneau{
    grid-column:2;grid-row:1;display:flex;align-items:center;
    margin:0 0 0 calc(-1 * var(--coupe));
    clip-path:polygon(var(--coupe) 0, 100% 0, 100% 100%, 0 100%);
    padding:100px max(var(--gout), calc((100cqw - var(--wrap)) / 2)) 100px calc(var(--coupe) + 64px);
  }
  .scinde--inverse{grid-template-columns:minmax(0, 55fr) minmax(0, 45fr)}
  .scinde--inverse .scinde-photo{grid-column:2}
  .scinde--inverse .scinde-panneau{
    grid-column:1;justify-content:flex-end;
    margin:0 calc(-1 * var(--coupe)) 0 0;
    clip-path:polygon(0 0, 100% 0, calc(100% - var(--coupe)) 100%, 0 100%);
    padding:100px calc(var(--coupe) + 64px) 100px max(var(--gout), calc((100cqw - var(--wrap)) / 2));
  }

  .tuiles{grid-template-columns:repeat(4, minmax(0, 1fr));gap:22px}
  .tuiles + .tuile-large{margin-top:22px}
  .tuile{aspect-ratio:1 / 1}
  .tuile-large{grid-template-columns:minmax(0, 1fr) auto;align-items:center;min-height:205px;padding:40px 48px}
  .pictos{display:flex;flex-wrap:wrap;gap:18px}

  .chiffres-grille{grid-template-columns:repeat(4, minmax(0, 1fr));gap:48px 72px}
  .chiffre:nth-child(n)::before{display:none}
  .chiffre:not(:first-child)::before{display:block;left:-36px}

  .metiers-grille{grid-template-columns:repeat(4, minmax(0, 1fr));gap:52px 72px}
  .metier:nth-child(n)::before{display:none}
  .metier:not(:nth-child(4n+1))::before{display:block;left:-36px}

  .faq-grille{grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:64px;align-items:start}

  .contact-grille{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:64px;align-items:start}

  .intro-grille{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:72px}

  .frise{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .etape:nth-child(n)::before{display:none}
  .etape:not(:nth-child(3n+1))::before{display:block}

  .filtres{grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px}
  .cartes-affaires{grid-template-columns:repeat(3, minmax(0, 1fr));gap:28px}

  .fiche{grid-template-columns:minmax(0, 8fr) minmax(0, 4fr);gap:64px}
  .fiche-aside{position:sticky;top:calc(env(safe-area-inset-top, 0px) + var(--admin, 0px) + var(--h-nav-colle) + 24px)}

  .pied-grille{grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr)}
  .pied-contact{grid-column:auto}
}

@media (min-width: 1024px) and (max-width: 1279px){
  .nav-lien{font-size:12px}
  .pave{width:180px}
  .nav-liste{width:calc(50% - 90px - 12px)}
  .pave-logo,
  .pave .brand-img,
  .pave .custom-logo{max-width:156px}
}

@media (min-width: 1280px){
  .nav-lien{white-space:nowrap}
}

/* Sur un écran tactile, le survol reste collé après l'appui : pas de soulèvement. */
@media (hover: none){
  .carte-affaire:hover{box-shadow:none;transform:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js-monte .monte{transform:none !important}
}

@media print{
  .entete,.tiroir,.oriente,.flottant,.haut,.cookies,.modale,.hero-bande,.bandeau-oblique{display:none !important}
  .hero,.bandeau{padding-top:32px;min-height:0}
  .js-monte .monte{transform:none !important}
}

/* =============================================================================
   RETOUCHES DU CLIENT SUR LA MAQUETTE (17/09/2026)
   Placées en fin de feuille pour passer devant les requêtes 640 / 768 px.
   ========================================================================== */

/* Pied de page sous 1024 px : une colonne pleine largeur par bloc, tout centré,
   pictogramme au-dessus des coordonnées, barre du bas empilée. */
@media (max-width: 1023px){
  .pied .pied-grille{grid-template-columns:minmax(0, 1fr);text-align:center}
  .pied .pied-contact{grid-column:auto}
  .pied-liens{justify-items:center}
  .pied-contact .pied-titre{margin-inline:auto}
  .coord--pied li{grid-template-columns:minmax(0, 1fr);justify-items:center;gap:8px}
  .coord--pied .coord-texte{padding-top:0;text-align:center}
  .pied-mentions{text-align:center}
  .pied-bas-in{flex-direction:column;justify-content:center;text-align:center}
  .pied-marque{justify-items:center}
  .legal{justify-content:center}
}

/* Sur mobile ET tablette (tant que les blocs sont empilés) : haut de page,
   têtes de section, chiffres clés et huit métiers centrés. */
@media (max-width: 1023px){
  .hero-texte{text-align:center}
  .hero-sur{justify-content:center}
  .hero-titre,.hero-chapo{margin-inline:auto}
  .hero-actions{justify-content:center}
  .gages{align-items:center;justify-content:center}

  .bandeau-contenu{text-align:center}
  .ariane ol{justify-content:center}
  .bandeau h1,.bandeau-chapo{margin-inline:auto}
  .bandeau-actions,.bandeau-acts{justify-content:center}

  .entete-section{text-align:center}
  .entete-section .chapo{margin-inline:auto}

  .chiffre,.metier{text-align:center}
  .metier{justify-items:center}
}

/* La bande d'appel passe en deux colonnes dès 768 px : elle n'est centrée
   qu'en dessous. */
@media (max-width: 767px){
  .appel-grille{justify-items:center;text-align:center}
  .appel-photo{margin-inline:auto}
  .appel-texte p{margin-inline:auto}
}

/* Panneau des sections scindées : texte sur toute la largeur du panneau, sans
   bride de mesure — le client ne veut pas de vide à droite. */
.scinde-contenu{max-width:none}

/* Moins d'air au-dessus du titre tant que le hero est empilé : l'en-tête
   mesure déjà 104 px, 36 px de plus laissaient un grand vide. */
@media (max-width: 1023px){
  .hero{padding-top:calc(env(safe-area-inset-top, 0px) + var(--h-top) + var(--h-nav) + 12px)}
}

/* Sur mobile, le panneau « Qui sommes-nous » et la tuile large du réseau sont
   centrés, pictogrammes compris. */
@media (max-width: 767px){
  .scinde-panneau{text-align:center}
  .scinde-contenu .surtitre,
  .scinde-contenu .surtitre-pilule{justify-content:center}
  .tuile-large{text-align:center}
  .tuile-large-corps{justify-items:center}
  .pictos{justify-items:center;justify-content:center}
}

/* Le bouton flottant « Contactez-nous » a été retiré : il ne reste que le
   retour en haut à dégager, et le pied de page n'a plus besoin de sa grande
   marge basse. */
.pied-bas{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
.haut{bottom:calc(20px + var(--h-cookies, 0px) + env(safe-area-inset-bottom, 0px))}
@media (min-width: 768px){
  .pied-bas{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
}

/* Mention « carte T » dans le bandeau supérieur : masquée sur mobile, où la
   place manque à côté du téléphone. */
.top-carte{color:var(--oblique);display:none}
@media (min-width: 900px){
  .top-carte{display:inline-flex}
}

/* =============================================================================
   EN-TÊTE SUR FOND BLANC (demande du client, 18/09/2026)
   La barre de navigation est blanche en permanence, sur le hero comme au
   défilement ; la fine barre supérieure reste nuit. Liens, burger et contour
   de focus passent en nuit ; le pavé du logo, blanc lui aussi, se détache par
   son ombre et son débord sous la barre.
   ========================================================================== */
.entete-nav{background:var(--blanc);color:var(--nuit);--focus:var(--nuit);box-shadow:0 1px 0 var(--filet)}
.entete.est-plein,
.entete--plein{background:var(--blanc)}
.nav-lien{color:var(--nuit)}
.burger{color:var(--nuit)}

/* =============================================================================
   EN-TÊTE : LOGO À GAUCHE, SANS OMBRE (demande du client, 18/09/2026)
   Le logo n'est plus centré dans un pavé qui déborde sous la barre : il est
   posé à gauche, dans la barre blanche, sans ombre ; les six entrées du menu
   se rangent à droite.
   ========================================================================== */
.pave{box-shadow:none;align-self:center;height:100%;padding:0}
.est-plein .pave{height:100%}
@media (min-width: 1024px){
  .pave{position:static;left:auto;top:auto;transform:none;width:auto;height:100%;padding:0}
  .est-plein .pave{height:100%}
  .nav{flex:1 1 auto;width:auto;justify-content:flex-end;gap:clamp(20px, 2.4vw, 40px)}
  .nav-liste{display:flex;align-items:center;width:auto;gap:clamp(20px, 2.4vw, 40px)}
  .nav-lien{white-space:nowrap}
}

/* Sur mobile, les deux boutons du haut de page tiennent côte à côte : largeur
   partagée à parts égales, marges et corps resserrés, jamais de retour à la
   ligne dans un bouton. */
@media (max-width: 767px){
  .hero-actions{flex-wrap:nowrap;gap:10px}
  .hero-actions .btn{flex:1 1 0;min-width:0;padding:12px 8px;gap:.4em;font-size:clamp(12.5px, 3.5vw, 15px);white-space:nowrap}
}