/* =====================================================================
   CNFP — composants communs (header, menu mobile, footer, progression)
   Préfixe .cnfp- : aucune collision possible avec les styles de page.
   ===================================================================== */
:root{
  --cnfp-navy:#21365E;
  --cnfp-navy-d:#1A2B4C;
  --cnfp-navy-xd:#101D38;
  --cnfp-terra:#B74732;
  --cnfp-terra-hi:#D95A41;
  --cnfp-steel:#447DAC;
  --cnfp-white:#FFFFFF;
  --cnfp-header-pad:20px;
  --cnfp-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Barre de progression de lecture ---------- */
.cnfp-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--cnfp-terra) 0%,var(--cnfp-terra-hi) 60%,var(--cnfp-steel) 100%);
  z-index:1300;pointer-events:none;
  transition:width .12s linear;
}

/* ---------- Header ---------- */
.cnfp-header{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--cnfp-header-pad) clamp(18px,4.5vw,56px);
  transition:background .35s var(--cnfp-ease),box-shadow .35s var(--cnfp-ease),padding .35s var(--cnfp-ease);
}
.cnfp-brand{display:flex;align-items:center;line-height:0}
/* Bloc horizontal : blanc sur l'en-tête transparent, couleur une fois le
   fond blanc posé au défilement. Le filtre évite d'entretenir deux fichiers. */
.cnfp-logo{
  height:52px;width:auto;display:block;
  filter:brightness(0) invert(1);
  transition:height .35s var(--cnfp-ease),filter .35s var(--cnfp-ease)
}
.cnfp-header.is-scrolled{
  background:var(--cnfp-white);
  box-shadow:0 8px 30px -12px rgba(16,29,56,.18);
  padding:12px clamp(18px,4.5vw,56px);
}
.cnfp-header.is-scrolled .cnfp-logo{height:42px;filter:none}

.cnfp-nav{display:flex;align-items:center;gap:34px}
.cnfp-nav a{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cnfp-white);
  position:relative;padding:6px 0;text-decoration:none;
  /* Une entrée de menu ne se coupe pas : « Qui sommes-nous » tombait
     sur quatre lignes dès que la barre se resserrait, et l'en-tête
     doublait de hauteur. La barre demande la place qu'il lui faut ;
     la césure du burger s'occupe du reste. */
  white-space:nowrap;
  transition:color .3s var(--cnfp-ease);
}
.cnfp-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--cnfp-terra-hi);transition:width .3s var(--cnfp-ease);
}
.cnfp-nav a:hover::after,
.cnfp-nav a.is-active::after{width:100%}
.cnfp-header.is-scrolled .cnfp-nav a{color:var(--cnfp-navy)}

/* « Mon espace » se réduit à la silhouette de compte.
   C'est le pictogramme le mieux compris du web : personne n'a besoin qu'on
   lui écrive où se connecter. Le nom reste porté par `aria-label` et par
   l'infobulle — un lien sans texte n'est muet que pour l'œil. */
.cnfp-nav .cnfp-nav-discret{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px;opacity:.82;
  transition:opacity .3s var(--cnfp-ease),color .3s var(--cnfp-ease);
}
.cnfp-nav .cnfp-nav-discret svg{width:21px;height:21px;flex:none}
/* Pas de trait terracotta : il souligne des mots, pas un pictogramme. */
.cnfp-nav .cnfp-nav-discret::after{display:none}
.cnfp-nav .cnfp-nav-discret:hover{opacity:1}
.cnfp-nav .cnfp-nav-discret.is-active{opacity:1;color:var(--cnfp-terra-hi)}

/* Dans le menu du téléphone, l'icône garde ses mots : la liste y est
   verticale et pleine de texte, un pictogramme seul y serait une énigme. */
.cnfp-menu nav a.cnfp-nav-discret{display:inline-flex;align-items:center;gap:10px}
.cnfp-menu nav a.cnfp-nav-discret svg{width:20px;height:20px;flex:none}

/* Bouton devis — terracotta plein, cadrage optique */
.cnfp-cta{
  display:inline-block;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--cnfp-white);text-align:center;
  background:var(--cnfp-terra);border:1.5px solid var(--cnfp-terra);
  border-radius:999px;padding:14px 26px 13px;
  line-height:1;white-space:nowrap;
  transition:background .3s var(--cnfp-ease),border-color .3s var(--cnfp-ease);
}
.cnfp-cta::after{display:none}
.cnfp-cta:hover{background:var(--cnfp-terra-hi);border-color:var(--cnfp-terra-hi);color:var(--cnfp-white)}

/* ---------- Burger ---------- */
.cnfp-burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:0;z-index:1250;
}
.cnfp-burger span{
  display:block;width:26px;height:2px;background:var(--cnfp-white);
  transition:transform .35s var(--cnfp-ease),opacity .25s,background .3s;
}
.cnfp-header.is-scrolled .cnfp-burger span{background:var(--cnfp-navy)}
body.cnfp-menu-open .cnfp-burger span{background:var(--cnfp-white)}
body.cnfp-menu-open .cnfp-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.cnfp-menu-open .cnfp-burger span:nth-child(2){opacity:0}
body.cnfp-menu-open .cnfp-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Menu mobile plein écran ---------- */
.cnfp-menu{
  position:fixed;inset:0;z-index:1100;
  background:linear-gradient(160deg,var(--cnfp-navy) 0%,var(--cnfp-navy-xd) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--cnfp-ease),visibility .4s;
}
.cnfp-menu.is-open{opacity:1;visibility:visible}
.cnfp-menu nav{display:flex;flex-direction:column;align-items:center;gap:6px}
.cnfp-menu nav a{
  font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
  /* Le menu tenait de la page d'affiche : cinq entrées à 34 px remplissaient
     l'écran d'un téléphone et repoussaient les coordonnées hors de vue. Une
     taille de menu, pas de titre. */
  letter-spacing:.06em;font-size:clamp(18px,4.6vw,24px);
  color:var(--cnfp-white);text-decoration:none;padding:9px 14px;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--cnfp-ease),transform .45s var(--cnfp-ease),color .3s;
}
.cnfp-menu.is-open nav a{opacity:1;transform:none}
.cnfp-menu.is-open nav a:nth-child(1){transition-delay:.08s}
.cnfp-menu.is-open nav a:nth-child(2){transition-delay:.14s}
.cnfp-menu.is-open nav a:nth-child(3){transition-delay:.20s}
.cnfp-menu.is-open nav a:nth-child(4){transition-delay:.26s}
.cnfp-menu nav a:hover,
.cnfp-menu nav a.is-active{color:var(--cnfp-terra-hi)}
.cnfp-menu .cnfp-cta{
  margin-top:22px;opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--cnfp-ease) .32s,transform .45s var(--cnfp-ease) .32s,
             background .3s,border-color .3s;
}
.cnfp-menu.is-open .cnfp-cta{opacity:1;transform:none}
.cnfp-menu-coord{
  /* L'adresse est la seule ligne longue du menu : sans marge, elle vient
     buter contre les deux bords de l'écran et se coupe n'importe où. */
  margin-top:28px;padding:0 28px;text-align:center;
  font-family:'Open Sans',sans-serif;font-size:13.5px;line-height:1.9;
  color:rgba(255,255,255,.6);
  opacity:0;transition:opacity .45s var(--cnfp-ease) .4s;
}
.cnfp-menu.is-open .cnfp-menu-coord{opacity:1}
.cnfp-menu-coord a{color:rgba(255,255,255,.85);text-decoration:none}
.cnfp-menu-coord a:hover{color:var(--cnfp-white)}

/* ---------- Footer ---------- */
.cnfp-footer{
  background:linear-gradient(180deg,var(--cnfp-navy-d) 0%,var(--cnfp-navy-xd) 100%);
  color:rgba(255,255,255,.78);
  font-family:'Open Sans',sans-serif;font-size:14.5px;line-height:1.75;
}
.cnfp-footer-grid{
  max-width:1240px;margin:0 auto;
  padding:74px clamp(20px,5vw,64px) 54px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;
}
.cnfp-f-logo{height:64px;width:auto;display:block;margin-bottom:18px}
.cnfp-f-desc{margin:0;max-width:34ch}
.cnfp-footer h4{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cnfp-steel);
  margin:4px 0 16px;
}
.cnfp-f-col a,.cnfp-f-col span{
  display:block;color:rgba(255,255,255,.78);text-decoration:none;
  padding:4px 0;transition:color .25s,transform .25s;
}
.cnfp-f-col a:hover{color:var(--cnfp-white);transform:translateX(3px)}
.cnfp-f-col a.is-active{color:var(--cnfp-white)}
.cnfp-socials{display:flex;gap:12px;margin-top:20px}
.cnfp-socials a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  transition:background .3s,border-color .3s,transform .3s;
}
.cnfp-socials a:hover{background:var(--cnfp-terra);border-color:var(--cnfp-terra);transform:translateY(-2px)}
.cnfp-socials svg{width:17px;height:17px;fill:var(--cnfp-white)}
.cnfp-footer-legal{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:1240px;margin:0 auto;
  padding:26px clamp(20px,5vw,64px) 34px;
  font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.55);
}
.cnfp-footer-legal b{color:rgba(255,255,255,.8);font-weight:700}

/* ---------- Sélection de texte ---------- */
/* Le site est sombre là où l'application est claire. Sans cette règle, c'est
   celle de l'application qui s'applique — un texte marine sur un voile bleu
   translucide — et la sélection devient illisible sur les bandes marine :
   c'est ce qu'on voyait dans le pied de page. Terracotta sur blanc, la
   sélection se lit partout, sur fond clair comme sur fond sombre. */
.site-cnfp ::selection{background:var(--cnfp-terra);color:var(--cnfp-white)}
.site-cnfp::selection{background:var(--cnfp-terra);color:var(--cnfp-white)}

/* ---------- Curseur personnalisé (desktop, mouvements non réduits) ---------- */
.cnfp-cursor,.cnfp-cursor-ring{
  display:none;position:fixed;top:0;left:0;border-radius:50%;
  pointer-events:none;z-index:1600;transform:translate(-50%,-50%);
}
@media (pointer:fine){
  html.cnfp-fx .cnfp-cursor,
  html.cnfp-fx .cnfp-cursor-ring{display:block}
}
.cnfp-cursor{width:7px;height:7px;background:var(--cnfp-terra)}
.cnfp-cursor-ring{
  width:34px;height:34px;border:1.5px solid rgba(183,71,50,.45);
  transition:width .3s ease,height .3s ease,border-color .3s ease,background .3s ease;
}
.cnfp-cursor-ring.on{width:58px;height:58px;border-color:rgba(183,71,50,.2);background:rgba(183,71,50,.06)}

/* ---------- Barre d'admin WordPress ---------- */
body.admin-bar .cnfp-header{top:32px}
body.admin-bar .cnfp-progress{top:32px}
body.admin-bar .cnfp-menu{top:32px}
@media (max-width:782px){
  body.admin-bar .cnfp-header,
  body.admin-bar .cnfp-progress,
  body.admin-bar .cnfp-menu{top:46px}
}

/* ---------- Responsive ---------- */
/* Juste avant la bascule en burger, la barre est trop courte pour six
   entrées et le bouton de devis : le menu venait buter contre le logo et
   dépassait de deux pixels. On y resserre l'espacement plutôt que de
   basculer plus tôt en menu mobile — à cette largeur, un menu déployé
   reste plus rapide qu'un menu à ouvrir. */
@media (min-width:1001px) and (max-width:1240px){
  /* Sans cette marge, « Qui sommes-nous » vient buter contre le logo. */
  .cnfp-nav{gap:22px;margin-left:26px}
  .cnfp-nav a{font-size:11.5px;letter-spacing:.08em}
  .cnfp-nav .cnfp-cta{padding:12px 18px 11px;font-size:11.5px;letter-spacing:.08em}
}

@media (max-width:1000px){
  .cnfp-nav{display:none}
  .cnfp-burger{display:flex}
  .cnfp-logo{height:40px}
  .cnfp-header.is-scrolled .cnfp-logo{height:34px}
  .cnfp-footer-grid{grid-template-columns:1fr 1fr;gap:38px;padding-top:60px}
}
@media (max-width:600px){
  .cnfp-footer-grid{grid-template-columns:1fr;gap:34px}
}

/* ---------- Titre de bandeau à deux lignes ---------- */
/* L'effet des pages du thème : chaque ligne est masquée, et son texte monte
   depuis le bas. Le masque fait tout — sans `overflow:hidden`, le texte
   glisserait par-dessus ce qui l'entoure au lieu de sortir de sa ligne.
   Le `padding-bottom` compensé par une marge négative laisse passer les
   jambages des lettres, que le masque couperait sinon. */
.cnfp-titre-ligne{
  display:block;overflow:hidden;
  padding-bottom:.08em;margin-bottom:-.08em;
}
.cnfp-titre-ligne > span{
  display:inline-block;
  transform:translateY(110%);
  animation:cnfpTitreMonte .9s cubic-bezier(.19,1,.22,1) forwards;
}
/* La seconde ligne suit la première, sans quoi les deux monteraient
   ensemble et l'effet se lirait comme un simple fondu. */
.cnfp-titre-ligne:nth-of-type(2) > span{animation-delay:.2s}
@keyframes cnfpTitreMonte{to{transform:none}}
@media (prefers-reduced-motion: reduce){
  .cnfp-titre-ligne > span{transform:none;animation:none}
}

/* ---------- Cibles tactiles ---------- */
/* Au doigt, un lien haut de 19 px se rate une fois sur deux : les
   coordonnées du menu et les liens du pied de page passent à 44 px, la
   mesure retenue par les recommandations d'accessibilité. Réservé aux
   écrans tactiles — à la souris, l'espacement d'origine reste plus serré
   et plus juste. */
@media (pointer:coarse){
  .cnfp-menu-coord a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:0 10px;
  }
  .cnfp-f-col a{display:flex;align-items:center;min-height:44px;padding:0}
  .cnfp-socials a{width:44px;height:44px}
  .cnfp-footer-legal a{display:inline-block;padding:6px 0}
}

/* ---------- Accessibilité ---------- */
.cnfp-header a:focus-visible,
.cnfp-menu a:focus-visible,
.cnfp-footer a:focus-visible,
.cnfp-burger:focus-visible{
  outline:2px solid var(--cnfp-terra-hi);outline-offset:3px;border-radius:3px;
}
@media (prefers-reduced-motion:reduce){
  .cnfp-header,.cnfp-logo,.cnfp-nav a,.cnfp-nav a::after,.cnfp-cta,
  .cnfp-menu,.cnfp-menu nav a,.cnfp-menu .cnfp-cta,.cnfp-menu-coord,
  .cnfp-burger span,.cnfp-progress,.cnfp-f-col a,.cnfp-socials a{
    transition:none !important;
  }
}


/* ---------- Entrée du bandeau de page ----------
   Le fil d'Ariane, le trait, le titre et le chapô montent l'un après
   l'autre, comme sur « Qui sommes-nous » — d'où l'animation vient.

   En CSS et non en JavaScript, à dessein. Le bandeau est visible dès le
   chargement : il n'y a rien à observer, et un script qui échouerait
   laisserait un titre invisible. Une animation d'entrée ne doit jamais
   pouvoir escamoter le contenu.

   Le décalage reste court. Au-delà d'une demi-seconde, l'animation cesse
   d'accompagner la page pour la faire attendre. */
@keyframes cnfpMonte{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
.cnfp-entree{animation:cnfpMonte .85s cubic-bezier(.19,1,.22,1) both}
.cnfp-entree-1{animation-delay:.06s}
.cnfp-entree-2{animation-delay:.16s}
.cnfp-entree-3{animation-delay:.26s}
.cnfp-entree-4{animation-delay:.38s}

/* Qui demande moins de mouvement n'en reçoit aucun : le contenu s'affiche
   d'emblée, sans que rien ne bouge. */
@media (prefers-reduced-motion: reduce){
  .cnfp-entree{animation:none}
}


/* ---------- Bande de références (pages métier) ---------- */
/* Défilement en CSS pur : la piste porte deux fois la même série et glisse
   d'exactement sa moitié, ce qui la fait boucler sans saut visible. */
/* `contain:inline-size` n'est pas un détail : sans lui, la piste ci-dessous
   — large par nature, puisqu'elle porte deux fois la série — imposait sa
   largeur à toute la page. `overflow:hidden` ne cache que ce qui dépasse ;
   il n'empêche pas le contenu de compter dans la largeur minimale du
   parent. Sur un téléphone, la colonne passait ainsi à 952 px et le site
   entier défilait de côté. La containment fait mesurer la bande sans
   regarder ce qu'elle contient : elle prend la largeur qu'on lui donne. */
.bande-refs{overflow:hidden;position:relative;contain:inline-size}
.bande-refs::before,.bande-refs::after{
  content:"";position:absolute;top:0;bottom:0;width:36px;z-index:1;pointer-events:none;
}
.bande-refs::before{left:0;background:linear-gradient(90deg,var(--cnfp-white),transparent)}
.bande-refs::after{right:0;background:linear-gradient(270deg,var(--cnfp-white),transparent)}
.bande-refs-piste{
  display:flex;align-items:center;gap:30px;width:max-content;
  animation:bande-refs-defile 32s linear infinite;
}
/* Un visiteur qui reconnaît un nom veut le lire, pas le poursuivre. */
.bande-refs:hover .bande-refs-piste{animation-play-state:paused}
@keyframes bande-refs-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .bande-refs-piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .bande-refs::before,.bande-refs::after{display:none}
}


/* ---------- Bulle de messagerie WhatsApp ---------- */
/* Le panneau est le nôtre : aucun script tiers n'est chargé, et le seul
   départ est un lien `wa.me`. Une bulle du marché aurait installé un
   mouchard pour afficher un rond vert. */
.cnfp-wa-zone{position:fixed;right:18px;bottom:18px;z-index:1150;display:flex;flex-direction:column;align-items:flex-end;gap:12px}

.cnfp-wa{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;width:56px;border:0;border-radius:50%;cursor:pointer;
  background:#25D366;color:#fff;
  box-shadow:0 10px 28px -8px rgba(18,140,80,.55);
  transition:transform .2s var(--cnfp-ease);
}
.cnfp-wa svg{width:27px;height:27px;fill:currentColor}
.cnfp-wa:hover{transform:translateY(-2px)}
.cnfp-wa:focus-visible{outline:3px solid var(--cnfp-navy);outline-offset:3px}

.cnfp-wa-panneau{
  width:min(340px,calc(100vw - 36px));
  background:var(--cnfp-white);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(16,29,56,.45);
  animation:cnfp-wa-ouvre .22s var(--cnfp-ease);
}
@keyframes cnfp-wa-ouvre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.cnfp-wa-tete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#075E54;color:#fff;padding:14px 16px;
}
.cnfp-wa-nom{margin:0;font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px}
.cnfp-wa-etat{margin:2px 0 0;font-size:11.5px;opacity:.85}
.cnfp-wa-fermer{background:none;border:0;color:#fff;font-size:15px;cursor:pointer;padding:4px;line-height:1;opacity:.85}
.cnfp-wa-fermer:hover{opacity:1}

.cnfp-wa-corps{padding:16px;background:#ECE5DD}
/* La bulle d'accueil, posée comme un message reçu : c'est ce qui fait
   reconnaître une conversation plutôt qu'un formulaire. */
.cnfp-wa-bulle{
  margin:0 0 10px;background:var(--cnfp-white);border-radius:0 12px 12px 12px;
  padding:11px 13px;font-size:13.5px;line-height:1.55;color:var(--cnfp-navy);
  box-shadow:0 1px 2px rgba(16,29,56,.12);
}
.cnfp-wa-contexte{margin:0 0 10px;font-size:11.5px;line-height:1.5;color:#4c5a70}
.cnfp-wa-contexte strong{color:var(--cnfp-navy)}
.cnfp-wa-label{
  display:block;margin-bottom:5px;
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#4c5a70;
}
.cnfp-wa-champ{
  width:100%;border:1px solid #cfd6e0;border-radius:10px;
  padding:9px 11px;font-family:'Open Sans',sans-serif;font-size:13.5px;
  color:var(--cnfp-navy);background:var(--cnfp-white);resize:vertical;
}
.cnfp-wa-champ:focus{outline:none;border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.cnfp-wa-envoyer{
  display:block;margin-top:10px;text-align:center;text-decoration:none;
  background:#25D366;color:#fff;border-radius:10px;padding:11px 14px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;
}
.cnfp-wa-envoyer:hover{background:#1fbe5b}
.cnfp-wa-note{margin:9px 0 0;font-size:10.5px;line-height:1.5;color:#5b6a80}

@media (max-width:640px){
  .cnfp-wa-zone{right:14px;bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .cnfp-wa,.cnfp-wa-panneau{transition:none;animation:none}
  .cnfp-wa:hover{transform:none}
}