/* ==========================================================================
   RIG'UP - Design system
   Noir · capitales grotesques · corps sérif éditorial · accent cuivre
   Traits repris de es.global (typo display en caps, corps sérif, plein cadre)
   ========================================================================== */


/* ---------------------------------------------------------------------------
   Pont theme.json → noms courts utilisés dans tout ce fichier.
   Les couleurs, polices et tailles sont déclarées dans theme.json : ne les
   redéfinissez pas ici, sinon l'éditeur WordPress et le site divergeront.
   --------------------------------------------------------------------------- */
:root{
  /* Surfaces - depuis la palette theme.json */
  --bg:var(--wp--preset--color--base);
  --bg-2:var(--wp--preset--color--surface);
  --bg-3:var(--wp--preset--color--surface-2);
  --cream:var(--wp--preset--color--cream);
  --cream-2:#E7E2D9;

  /* Encres */
  --ink:#FFFFFF;
  --ink-soft:rgba(255,255,255,.60);
  --ink-dim:rgba(255,255,255,.48);   /* 38 % ne donnait que 3,55:1 */
  --ink-dark:var(--wp--preset--color--base);
  --ink-dark-soft:rgba(14,15,17,.62);

  /* Accent */
  --accent:var(--wp--preset--color--copper);
  --accent-hi:var(--wp--preset--color--copper-hi);
  --accent-dim:rgba(201,118,47,.16);
  /* Encre posée SUR le cuivre. Le blanc n'y atteint que 3,43:1 ; l'encre
     foncée monte à 5,58:1 et passe le niveau AA pour tous les corps. */
  --on-accent:#0E0F11;
  /* Le cuivre de marque ne tient que 2,99:1 sur la crème. Sur surface claire
     on utilise une teinte plus sombre de la même famille : 5,07:1. */
  --accent-on-light:#96551C;

  --line:rgba(255,255,255,.14);        /* séparations décoratives */
  --line-input:rgba(255,255,255,.35);  /* bordures de champs : 3:1 minimum requis */
  --line-dark:rgba(14,15,17,.14);
  --line-dark-ui:rgba(14,15,17,.52);   /* idem sur fond clair : 3:1 minimum */

  /* Typographie - depuis theme.json.
     Une seule famille : Archivo en capitales serrées pour les titres,
     Archivo en bas de casse pour le texte courant. */
  --display:var(--wp--preset--font-family--display);
  --text:var(--wp--preset--font-family--text);

  --fs-hero:clamp(1.875rem,4.8vw,3.75rem);   /* demandé plus petit par le client */
  --fs-h1:clamp(2.25rem,6vw,4.5rem);
  --fs-h2:clamp(1.75rem,4.4vw,3.125rem);
  --fs-h3:clamp(1.1rem,2.2vw,1.625rem);
  --fs-manifesto:clamp(1.5rem,3.6vw,3.125rem);
  --fs-body:clamp(1rem,1.15vw,1.125rem);
  --fs-small:.8125rem;
  --fs-label:.6875rem;

  /* Rythme */
  --gut:clamp(20px,4vw,56px);
  --sec:clamp(72px,11vw,168px);
  --maxw:1560px;
}

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

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
h1,h2,h3,h4,h5,p{margin:0;}
hr{border:0;border-top:1px solid var(--line);margin:0;}
::selection{background:var(--accent);color:var(--on-accent);}

:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;}

/* --------------------------------------------------------- Typographie -- */

.display,h1,h2,h3,.h2,.h3{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.9;
}
.hero-title{font-size:var(--fs-hero);line-height:.86;letter-spacing:-.03em;}
h1,.h1{font-size:var(--fs-h1);}
h2,.h2{font-size:var(--fs-h2);}
h3,.h3{font-size:var(--fs-h3);line-height:1.05;}

.manifesto{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-manifesto);line-height:.96;letter-spacing:-.02em;
}

.label{
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-dim);
  display:flex;align-items:center;gap:12px;
}
.label::before{content:'';width:22px;height:1px;background:currentColor;flex:none;}

.lede{font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.5;color:var(--ink);}
.soft{color:var(--ink-soft);}
.small{font-size:var(--fs-small);line-height:1.6;}
.serif-i{font-style:italic;}

/* ------------------------------------------------------------- Layout -- */

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.section{padding-block:var(--sec);}

/* Quand le contenu d'une page démarre par une section qui porte son propre
   fond, cette section doit toucher le bandeau photo. Sinon la marge haute
   du corps s'intercale et laisse une bande de fond de page entre la photo
   et la couleur : c'est l'espace qu'on voyait sur « À propos ». */
.page-body:has(> .entry-content > .section:first-child){padding-top:0;}
.page-body:has(> .section:first-child){padding-top:0;}
.section--tight{padding-block:clamp(48px,7vw,96px);}
.bleed{width:100%;}

.grid{display:grid;gap:clamp(24px,3vw,48px);}
.g-2{grid-template-columns:1fr;}
.g-3{grid-template-columns:1fr;}
.g-4{grid-template-columns:repeat(2,1fr);}
@media (min-width:760px){
  .g-2{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(3,1fr);}
  .g-4{grid-template-columns:repeat(4,1fr);}
}
.split{display:grid;gap:clamp(24px,4vw,80px);grid-template-columns:1fr;}
@media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;}}
.stack>*+*{margin-top:clamp(16px,2vw,28px);}

/* Surfaces claires */
/* Surface claire : toutes les encres doivent basculer, pas seulement le
   texte courant. Le chapô était resté blanc sur crème - invisible. */
.on-light{background:var(--cream);color:var(--ink-dark);}
.on-light .lede,
.on-light h1,.on-light h2,.on-light h3,.on-light h4,
.on-light p,.on-light li,.on-light span,.on-light strong{color:var(--ink-dark);}
.on-light .soft,.on-light .small.soft,.on-light .card__d,
.on-light .sel-item__spec,.on-light .family__desc{color:var(--ink-dark-soft);}
.on-light .label{color:rgba(14,15,17,.62);}   /* 0,55 plafonnait à 4,07:1 */
.on-light .link-u{border-color:var(--line-dark);}
.on-light .link-u:hover{border-color:var(--accent-on-light);color:var(--accent-on-light);}
.on-light .manifesto .hl,.on-light .stat__n .plus,.on-light a:not(.btn):hover{color:var(--accent-on-light);}
.on-light .cat-search__count,.on-light .family__link:hover{color:var(--accent-on-light);}
.on-light .rows,.on-light .row-item{border-color:var(--line-dark);}
.on-light .row-item__m{color:rgba(14,15,17,.55);}
.on-light hr{border-color:var(--line-dark);}

/* ------------------------------------------------------------ Boutons -- */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  padding:15px 28px;border:1px solid var(--line-input);border-radius:999px;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn .arw{transition:transform .25s;}
.btn:hover .arw{transform:translateX(4px);}
.btn--solid{background:var(--ink);color:var(--ink-dark);border-color:var(--ink);}
.btn--solid:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.btn--accent:hover{background:var(--accent-hi);border-color:var(--accent-hi);}
.btn--ghost:hover{background:var(--ink);color:var(--ink-dark);border-color:var(--ink);}
.on-light .btn{border-color:var(--line-dark-ui);}
.on-light .btn--ghost:hover{background:var(--ink-dark);color:var(--cream);border-color:var(--ink-dark);}
.on-light .btn--solid{background:var(--ink-dark);color:var(--cream);border-color:var(--ink-dark);}

.link-u{
  font-family:var(--display);font-size:.8125rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px;
  padding-bottom:3px;border-bottom:1px solid var(--line);transition:border-color .25s,color .25s;
}
.link-u:hover{border-color:var(--accent);color:var(--accent-hi);}

/* ------------------------------------------------------------- Header -- */

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px var(--gut);
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{background:rgba(14,15,17,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line);}

/* backdrop-filter crée un bloc conteneur pour les descendants en position
   fixed : le panneau de menu se retrouvait enfermé dans la hauteur de
   l'en-tête. On retire le flou le temps que le menu est ouvert. */
html.has-modal-open .site-header,
html.has-modal-open .site-header.is-stuck{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;
}
/* --- Logo ---------------------------------------------------------------
   La pastille est carrée : on la cale sur la hauteur de l'en-tête plutôt
   que sur une largeur, pour qu'elle s'aligne avec les boutons ronds. */
.marque{display:inline-flex;align-items:center;flex:none;}
/* Le lettrage est empilé (rapport 0,81) : on le cale sur sa hauteur.
   54px dans un en-tête de 88px laisse respirer au-dessus et en dessous. */
.marque svg{display:block;height:54px;width:auto;transition:transform .25s;}
.marque:hover svg{transform:scale(1.04);}
.marque__repli{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.04em;font-size:1.375rem;line-height:1;
}
@media (max-width:1039px){.marque svg{height:44px;}}

.nav-main{display:none;gap:clamp(18px,2.4vw,38px);align-items:center;}
@media (min-width:1040px){.nav-main{display:flex;}}
.nav-main a{
  font-family:var(--display);font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-soft);padding:6px 0;position:relative;transition:color .25s;
}
.nav-main a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .3s;
}
.nav-main a:hover,.nav-main a[aria-current="page"]{color:var(--ink);}
.nav-main a:hover::after,.nav-main a[aria-current="page"]::after{right:0;}

.header-actions{display:flex;align-items:center;gap:10px;}

/* --- Sélecteur de langue -------------------------------------------------
   Deux pastilles FR / EN. La langue courante n'est pas cliquable : elle est
   rendue en <span>, ce qui évite un lien qui ne mène nulle part et donne un
   repère visuel net. Taille de cible : 40px de haut, au-dessus du minimum
   recommandé pour le tactile. */
.rigup-langues{
  display:flex;align-items:center;gap:2px;
  padding:0 4px;height:40px;
  border:1px solid var(--line-input);border-radius:999px;
  font-family:var(--display);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}
.rigup-langues__item{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 7px;border-radius:999px;
  color:var(--ink-dim);text-decoration:none;
  transition:color .2s,background-color .2s;
}
a.rigup-langues__item:hover,
a.rigup-langues__item:focus-visible{color:var(--ink);background:rgba(255,255,255,.08);}
.rigup-langues__item.is-active{background:var(--accent);color:var(--on-accent);}
.rigup-langues__sep{color:var(--ink-dim);opacity:.5;font-weight:400;}

.on-light .rigup-langues{border-color:var(--line-dark-ui);}
.on-light .rigup-langues__item{color:rgba(14,15,17,.55);}
.on-light a.rigup-langues__item:hover{color:var(--ink-dark);background:rgba(14,15,17,.07);}

/* Libellé long réservé aux lecteurs d'écran : « Français - FR » se lit mieux
   que deux lettres isolées. */
.screen-reader-text{
  position:absolute;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;
}

.quote-btn{position:relative;}
.quote-btn .count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-family:var(--display);font-size:.6875rem;font-weight:700;
  display:none;align-items:center;justify-content:center;
}
.quote-btn.has-items .count{display:flex;}

.burger{
  width:44px;height:44px;border:1px solid var(--line);border-radius:999px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .25s,border-color .25s;
}
.burger:hover{background:var(--ink);border-color:var(--ink);}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s;}
.burger:hover span{background:var(--ink-dark);}

/* ------------------------------------------------- Overlay menu (ESG) -- */

.overlay{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
  overflow-y:auto;
}
.overlay.is-open{opacity:1;visibility:visible;}
.overlay__top{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);}
.overlay__close{width:44px;height:44px;border:1px solid var(--line);border-radius:999px;font-size:1.25rem;line-height:1;transition:background .25s;}
.overlay__close:hover{background:var(--ink);color:var(--ink-dark);}
.overlay__body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,6vw,72px) var(--gut);}
.overlay__nav a{
  display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(2rem,6.5vw,3.5rem);line-height:1.04;letter-spacing:-.03em;
  padding:clamp(6px,1vw,10px) 0;color:var(--ink-dim);transition:color .25s,transform .35s;
}
.overlay__nav a:hover{color:var(--ink);transform:translateX(12px);}
.overlay__foot{
  display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;
  padding:24px var(--gut) 32px;border-top:1px solid var(--line);
  font-size:var(--fs-small);color:var(--ink-soft);
}

/* --------------------------------------------------------------- Hero -- */

/* L'en-tête est fixe et transparent au-dessus du hero : le contenu doit
   réserver sa hauteur, sinon le titre passe dessous. --header-h sert aussi
   aux ancres et au décalage de la barre d'administration. */
:root{--header-h:88px;}
@media (max-width:760px){:root{--header-h:72px;}}

.hero{
  position:relative;min-height:min(92vh,900px);
  display:flex;align-items:flex-end;overflow:hidden;
}
.hero__media{position:absolute;inset:0;}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,15,17,.72) 0%,rgba(14,15,17,.25) 38%,rgba(14,15,17,.92) 100%);
}
.hero__inner{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--header-h) + clamp(24px,4vh,56px)) var(--gut) clamp(40px,6vw,88px);
}
.hero__inner .lede{max-width:56ch;margin-top:clamp(18px,2.4vw,30px);color:rgba(255,255,255,.82);}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,42px);}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:clamp(32px,4vw,56px);
  padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);
}
.hero--page{min-height:min(62vh,620px);}
.hero--page .hero__media::after{background:linear-gradient(180deg,rgba(14,15,17,.80) 0%,rgba(14,15,17,.55) 50%,rgba(14,15,17,.94) 100%);}

.breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:var(--fs-small);color:var(--ink-dim);margin-bottom:18px;
}
.breadcrumb a:hover{color:var(--ink);}

/* --------------------------------------------- Placeholders "photo"  -- */
/* Remplacer par <img>/<video> réels : le bloc porte les mêmes dimensions. */

.ph{
  position:relative;overflow:hidden;background:var(--bg-2);
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.05) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.05) 75%,transparent 75%),
    radial-gradient(120% 90% at 30% 15%,rgba(201,118,47,.22) 0%,transparent 62%);
  background-size:14px 14px,100% 100%;
}
.ph::after{
  content:attr(data-ph);position:absolute;left:14px;bottom:12px;
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.34);
  max-width:calc(100% - 28px);
}
.ph--4x5{aspect-ratio:4/5;}
.ph--3x2{aspect-ratio:3/2;}
.ph--16x9{aspect-ratio:16/9;}
.ph--1x1{aspect-ratio:1/1;}

/* Bandeau sans photo : on retire le voile sombre. Il sert à rendre le texte
   lisible par-dessus une image ; sans image il ne fait qu'aplatir le motif
   et effacer l'étiquette qui rappelle quelle photo reste à fournir.
   Les rayures sont à 5 % de blanc sur fond sombre : le texte reste lisible. */
/* .ph pose position:relative pour ses cadres au format fixe ; sur un
   bandeau cela écrasait le position:absolute de .hero__media, et le
   placeholder se réduisait à 0 × 0 - d'où des heros entièrement noirs
   partout où la photo manque. On rétablit le calage plein cadre. */
.hero .hero__media.ph{position:absolute;inset:0;}

.hero .hero__media.ph::after{
  content:attr(data-ph);
  inset:auto auto clamp(12px,2vw,20px) clamp(14px,2vw,22px);
  background:none;
}

/* ------------------------------------------------------------ Chiffres -- */

.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);}
@media (min-width:900px){.stats__grid{grid-template-columns:repeat(4,1fr);}}
.stat{padding:clamp(28px,4vw,56px) clamp(16px,2.4vw,36px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
@media (min-width:900px){.stat{border-bottom:0;}}
.stat:last-child{border-right:0;}
@media (max-width:899px){.stat:nth-child(2n){border-right:0;}.stat:nth-child(n+3){border-bottom:0;}}
.stat__n{font-family:var(--display);font-weight:600;font-size:clamp(2.5rem,6vw,4.25rem);line-height:.9;letter-spacing:-.04em;}
.stat__n .plus{color:var(--accent);}
.stat__t{margin-top:10px;font-size:var(--fs-small);color:var(--ink-soft);text-wrap:balance;}

/* ------------------------------------------- Expertises (TaitTowers) -- */

.tiles{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);}
@media (min-width:700px){.tiles{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1200px){.tiles{grid-template-columns:repeat(3,1fr);}}
.tile{
  position:relative;display:block;min-height:clamp(320px,42vw,520px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;isolation:isolate;
}
.tile__media{position:absolute;inset:0;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.tile:hover .tile__media{transform:scale(1.06);}
.tile__media::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,15,17,.15) 0%,rgba(14,15,17,.55) 55%,rgba(14,15,17,.92) 100%);
  transition:opacity .5s;
}
.tile:hover .tile__media::before{opacity:.82;}
/* Tuile d'un matériel photographié sur fond blanc : l'objet occupe le haut
   sur son support clair, le texte reste en bas sur le fond sombre. Mettre
   une telle photo en fond plein cadre rendrait le titre illisible. */
.tile--objet{display:flex;flex-direction:column;}
.tile__objet{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);padding:clamp(14px,2vw,26px);
  overflow:hidden;
}
.tile__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.tile--objet:hover .tile__img{transform:scale(1.05);}
.tile--objet .tile__body{height:auto;flex:none;justify-content:flex-start;}
.tile--objet .tile__n{margin-bottom:6px;}

.tile__body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.6vw,34px);}
.tile__n{
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;
  color:var(--ink-dim);margin-bottom:auto;
}
.tile__t{
  font-size:clamp(1.25rem,2.1vw,1.875rem);
  /* « ÉVÉNEMENTIEL » dépassait de la tuile : on autorise la coupure et on
     retire le letter-spacing négatif qui aggravait le débordement. */
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.tile__d{
  font-size:var(--fs-small);color:var(--ink-soft);margin-top:10px;max-width:38ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s,opacity .35s,margin-top .45s;
}
.tile:hover .tile__d,.tile:focus-visible .tile__d{max-height:8em;opacity:1;}
.tile__go{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-hi);
}

/* -------------------------------------------------------- Manifesto -- */

.manifesto-block{text-align:center;max-width:24ch;margin-inline:auto;}
.manifesto-block--wide{max-width:34ch;}
.manifesto .hl{color:var(--accent);}

/* ------------------------------------------------------- Marquee logos -- */

.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,3vw,38px) 0;}
.marquee__track{display:flex;gap:clamp(36px,5vw,84px);width:max-content;animation:slide 42s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee__item{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.125rem,2vw,1.75rem);color:var(--ink-dim);white-space:nowrap;
  transition:color .25s;
}
/* Un vrai logo remplace le nom : on le ramène à la hauteur de la ligne et
   on le passe en blanc, pour que des logos d'origines diverses forment
   malgré tout un bandeau homogène sur le fond sombre. */
.marquee__item--logo{display:inline-flex;align-items:center;}
.marquee__item--logo img{
  height:clamp(22px,2.4vw,34px);width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.72;
  transition:opacity .25s;
}
.marquee__item--logo img:hover{opacity:1;}
.marquee__item:hover{color:var(--ink);}

/* -------------------------------------------------------------- Cards -- */

.card{display:block;}
/* Les photos de référence n'ont pas toutes le même rapport : on impose le
   cadre 4:5 et on recadre, sinon les cartes s'allongent les unes par rapport
   aux autres et les images paraissent étirées. */
.card__media{margin-bottom:16px;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.card:hover .card__media img{transform:scale(1.04);}
.card__media .ph{width:100%;height:100%;aspect-ratio:auto;}
.card__t{margin-bottom:8px;}
.card__d{font-size:var(--fs-small);color:var(--ink-soft);}
.card a.card__t:hover,.card:hover .card__t{color:var(--accent-hi);}

.rows{border-top:1px solid var(--line);}
.row-item{
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline;justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s,background .3s;
}
.row-item:hover{padding-left:12px;}
.row-item__t{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(1.125rem,2vw,1.5rem);letter-spacing:-.02em;}
.row-item__m{font-size:var(--fs-small);color:var(--ink-dim);font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;}

/* -------------------------------------------------------------- Chips -- */

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.chip{
  font-family:var(--display);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:10px 18px;border:1px solid var(--line-input);border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;transition:all .22s;color:var(--ink-soft);
}
.chip:hover{color:var(--ink);border-color:var(--ink-soft);}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.chip[aria-pressed="true"]::after{content:'×';font-size:1rem;line-height:1;}
.filters__reset{font-size:var(--fs-small);color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px;}
.filters__reset:hover{color:var(--ink);}
.results-count{font-size:var(--fs-small);color:var(--ink-dim);}

.is-hidden{display:none!important;}

/* ---------------------------------------------------------- Formulaires -- */

.form{max-width:860px;}
.field{display:block;margin-bottom:clamp(18px,2.2vw,26px);}
.field>label,.fieldset>legend{
  display:block;font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-bottom:10px;padding:0;
}
.field .req{color:var(--accent);}
.input,.textarea,.select{
  width:100%;padding:14px 0;background:transparent;border:0;border-bottom:1px solid var(--line-input);
  font-family:var(--text);font-size:1.0625rem;color:var(--ink);transition:border-color .25s;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-dim);}
.input:focus,.textarea:focus,.select:focus{outline:none;border-bottom-color:var(--accent);}
.textarea{min-height:150px;resize:vertical;line-height:1.55;}
.fieldset{border:0;padding:0;margin:0 0 clamp(18px,2.2vw,26px);}
.field-row{display:grid;gap:clamp(16px,2vw,32px);grid-template-columns:1fr;}
@media (min-width:640px){.field-row{grid-template-columns:repeat(2,1fr);}}

.checks{display:flex;flex-wrap:wrap;gap:10px;}
.check{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:11px 18px;border:1px solid var(--line-input);border-radius:999px;cursor:pointer;
  transition:all .22s;color:var(--ink-soft);
}
.check input{position:absolute;opacity:0;width:0;height:0;}
.check:hover{color:var(--ink);border-color:var(--ink-soft);}
.check:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.check:has(input:focus-visible){outline:2px solid var(--accent-hi);outline-offset:3px;}

.dropzone{
  border:1px dashed var(--line);border-radius:4px;padding:clamp(24px,4vw,40px);
  text-align:center;transition:border-color .25s,background .25s;cursor:pointer;display:block;
}
.dropzone:hover,.dropzone.is-over{border-color:var(--accent);background:var(--accent-dim);}
.dropzone__t{font-family:var(--display);font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
.dropzone__h{font-size:var(--fs-small);color:var(--ink-dim);margin-top:8px;}
.dropzone input[type=file]{position:absolute;opacity:0;width:0;height:0;}
.file-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.file-list li{font-size:var(--fs-small);color:var(--ink-soft);display:flex;gap:10px;align-items:center;}

.form-note{font-size:var(--fs-small);color:var(--ink-dim);margin-top:18px;max-width:60ch;}
.form-actions{margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* ------------------------------------------------- Sélection de matériel -- */

.selector{border-top:1px solid var(--line);}
.sel-cat{border-bottom:1px solid var(--line);}
.sel-cat__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2vw,24px) 0;text-align:left;
}
.sel-cat__name{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(1rem,1.7vw,1.25rem);letter-spacing:-.01em;}
.sel-cat__meta{display:flex;align-items:center;gap:14px;font-size:var(--fs-small);color:var(--ink-dim);}
.sel-cat__badge{
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-family:var(--display);font-size:.6875rem;font-weight:700;display:none;align-items:center;justify-content:center;
}
.sel-cat.has-sel .sel-cat__badge{display:inline-flex;}
.sel-cat__chev{transition:transform .3s;}
.sel-cat[open] .sel-cat__chev{transform:rotate(180deg);}
.sel-cat__list{padding-bottom:20px;display:grid;gap:2px;}
.sel-item{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  padding:12px 14px;border-radius:4px;transition:background .2s;
}
.sel-item:hover{background:var(--bg-2);}
.sel-item__name{flex:1 1 220px;font-size:.9375rem;}
.sel-item__spec{font-size:var(--fs-small);color:var(--ink-dim);flex:0 1 auto;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.qty button{width:34px;height:34px;font-family:var(--display);font-size:1rem;line-height:1;color:var(--ink-soft);transition:background .2s,color .2s;}
.qty button:hover{background:var(--ink);color:var(--ink-dark);}
.qty input{
  width:46px;height:34px;text-align:center;background:transparent;border:0;
  font-family:var(--display);font-weight:600;font-size:.875rem;-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.recap{border:1px solid var(--line);border-radius:6px;padding:clamp(18px,2.4vw,28px);background:var(--bg-2);}
.recap__list{margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.recap__line{display:flex;justify-content:space-between;gap:16px;font-size:.9375rem;padding-bottom:9px;border-bottom:1px solid var(--line);}
.recap__line .q{font-family:var(--display);font-weight:600;color:var(--accent-hi);flex:none;}
.recap__empty{font-size:var(--fs-small);color:var(--ink-dim);margin-top:12px;}

/* ------------------------------------------------------- Tiroir devis -- */

.drawer-backdrop{position:fixed;inset:0;z-index:90;background:rgba(14,15,17,.6);opacity:0;visibility:hidden;transition:.3s;}
.drawer-backdrop.is-open{opacity:1;visibility:visible;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(420px,92vw);
  background:var(--bg-2);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .38s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
}
.drawer.is-open{transform:none;}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gut) 20px 24px;border-bottom:1px solid var(--line);}
.drawer__body{flex:1;overflow-y:auto;padding:20px 24px;}
.drawer__foot{padding:20px 24px;border-top:1px solid var(--line);display:grid;gap:10px;}
.drawer__item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9375rem;}
.drawer__item .q{font-family:var(--display);font-weight:600;color:var(--accent-hi);}
.drawer__item .rm{margin-left:auto;color:var(--ink-dim);font-size:1.125rem;line-height:1;}
.drawer__item .rm:hover{color:var(--accent);}

/* ------------------------------------------------------------ Timeline -- */

.timeline{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px);display:grid;gap:clamp(28px,4vw,52px);}
.tl{position:relative;}
.tl::before{content:'';position:absolute;left:calc(-1 * clamp(20px,3vw,40px) - 5px);top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent);}
.tl__y{font-family:var(--display);font-weight:600;font-size:var(--fs-label);letter-spacing:.16em;color:var(--accent-hi);}

/* ---------------------------------------------------------------- ESG -- */

.esg{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (min-width:900px){.esg{grid-template-columns:repeat(3,1fr);}}
.esg__c{background:var(--bg);padding:clamp(24px,3vw,40px);}
.esg__l{font-family:var(--display);font-weight:600;font-size:clamp(2.5rem,5vw,3.5rem);line-height:1;color:var(--accent);}
.esg__h{margin:14px 0 12px;}

/* ------------------------------------------------------------- Footer -- */

.site-footer{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,88px);}
.footer__grid{display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:1fr;}
@media (min-width:760px){.footer__grid{grid-template-columns:2fr 1fr 1fr;}}
@media (min-width:1100px){.footer__grid{grid-template-columns:2.4fr 1fr 1fr 1.4fr;}}
.footer__h{font-family:var(--display);font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-dim);margin-bottom:16px;}

/* L'e-mail et le téléphone du pied de page sont l'un sous l'autre, séparés
   par un simple retour à la ligne : 20px entre les deux centres, sous le
   minimum tactile de 24px recommandé. Sur mobile on composait le numéro en
   visant l'adresse. On leur donne une vraie zone cliquable. */
footer p a[href^="mailto:"],
footer p a[href^="tel:"]{
  display:inline-block;padding-block:6px;
}
.footer__nav li+li{margin-top:9px;}
.footer__nav a{font-size:.9375rem;color:var(--ink-soft);transition:color .2s;}
.footer__nav a:hover{color:var(--ink);}
/* Filigrane décoratif : contraste volontairement faible, masqué aux
   lecteurs d'écran par aria-hidden dans le gabarit. */
.footer__big{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(3rem,15vw,11rem);line-height:.8;color:var(--bg-3);
  margin-top:clamp(40px,6vw,80px);user-select:none;
}
.footer__sig{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;
  padding:22px 0 30px;margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line);
  font-size:var(--fs-small);color:var(--ink-dim);
}
.footer__sig a:hover{color:var(--ink);}
.sig-label{display:inline-flex;align-items:center;gap:8px;}
.sig-label strong{color:var(--ink-soft);font-weight:500;}

/* ------------------------------------------------------- Divers / a11y -- */

/* Lien d'évitement. Celui-ci est posé par WordPress lui-même et vise
   l'ancre qu'il ajoute au <main> ; le nôtre pointait vers #main, qui
   n'existe pas, et faisait doublon. On se contente donc de l'habiller. */
.skip,
.wp-block-template-part .skip-link,
.skip-link.screen-reader-text{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;background:var(--accent);color:var(--on-accent);
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  clip:auto;clip-path:none;width:auto;height:auto;
}
.skip:focus,
.skip-link.screen-reader-text:focus{left:var(--gut);top:12px;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

.notice{
  padding:14px 18px;border:1px solid var(--accent);border-radius:4px;background:var(--accent-dim);
  font-size:var(--fs-small);
}

.cookie{
  position:fixed;left:var(--gut);right:var(--gut);bottom:20px;z-index:70;
  max-width:560px;margin-inline:auto;padding:20px 22px;border:1px solid var(--line);
  background:rgba(23,25,28,.96);backdrop-filter:blur(12px);border-radius:6px;
  display:none;gap:16px;flex-wrap:wrap;align-items:center;
}
.cookie.is-on{display:flex;}
.cookie p{font-size:var(--fs-small);color:var(--ink-soft);flex:1 1 260px;}

/* ------------------------------------------- Header compact sur mobile -- */
/* Le CTA devis et le libellé de sélection sont repris dans le menu overlay. */
@media (max-width:719px){
  .site-header{padding:14px var(--gut);}
  .header-actions .btn{padding:11px 16px;font-size:.6875rem;}
  .header-actions>.btn--accent{display:none;}
  .rigup-langues{height:36px;padding:0 3px;font-size:.6875rem;}
  .rigup-langues__item{min-width:26px;height:28px;padding:0 5px;}
  .quote-btn{
    width:44px;height:44px;padding:0;justify-content:center;border-radius:999px;
    font-size:0;letter-spacing:0;
  }
  .quote-btn::before{content:'▤';font-size:.9375rem;letter-spacing:0;}
  .quote-btn .count{font-size:.625rem;min-width:18px;height:18px;}
  .wordmark{font-size:1.125rem;}
}
/* Dans l'overlay, on rappelle le CTA masqué en tête de page */
.overlay__nav a:last-child{color:var(--accent);}

/* Pas de retour à la ligne dans la barre de navigation */
.nav-main a,.btn,.chip,.check,.link-u{white-space:nowrap;}
@media (min-width:1040px) and (max-width:1339px){
  .nav-main{gap:16px;}
  .nav-main a{font-size:.6875rem;letter-spacing:.09em;}
  .header-actions .btn{padding:13px 18px;}
}

/* ------------------------------------------- Catalogue : familles produit -- */
/* Une famille regroupe ses déclinaisons (longueur, CMU, couleur, marque).    */

.family{padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line);}
.family:last-child{border-bottom:0;padding-bottom:4px;}
.family__head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;}
.family__name{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.9375rem,1.5vw,1.125rem);letter-spacing:-.01em;line-height:1.1;
}
.family__count{
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);flex:none;
}
.family__desc{font-size:var(--fs-small);color:var(--ink-soft);margin-top:8px;max-width:72ch;}
.family__list{margin-top:14px;display:grid;gap:2px;}
.family .sel-item{padding:10px 14px;}
.family .sel-item__name{flex:1 1 260px;}
.family--one .family__head{gap:16px;align-items:center;}
.family--one .family__desc{margin-top:10px;}

/* ------------------------------------------------------- Fiche produit -- */
/* Le hero porte le nom, la description et les repères (univers, nombre de
   déclinaisons, référence). Plus bas, la liste des déclinaisons avec leurs
   compteurs. Le nom n'apparaît qu'une fois, contrairement à l'ancien
   montage qui empilait le titre WordPress et la carte de catalogue. */
.hero--fiche{min-height:min(54vh,520px);}

/* --- Photo de produit sur fond blanc ------------------------------------
   Le catalogue est photographié sur fond blanc, le site est sombre. Plutôt
   que de lutter, on assume : l'objet est posé sur un support clair, entier
   et non recadré. C'est lisible, c'est régulier d'une fiche à l'autre, et
   cela marche avec n'importe quelle prise de vue détourée ou non. */
.hero--objet{
  min-height:auto;
  display:grid;grid-template-columns:1fr;align-items:center;
  background:var(--bg);
}
.hero--objet .hero__inner{padding-bottom:clamp(20px,3vw,32px);}

.hero__objet{
  position:relative;
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:0 var(--gut) clamp(36px,5vw,64px);
}
.objet__img{
  display:block;width:100%;height:auto;
  max-height:min(46vh,420px);object-fit:contain;
  background:var(--cream);border-radius:12px;
  padding:clamp(16px,2.4vw,30px);
}

/* Sur grand écran, le texte et l'objet se partagent la largeur. */
@media (min-width:900px){
  /* L'en-tête est fixe : sans cette réserve en haut, l'objet centré
     verticalement passait dessous. */
  .hero--objet{
    grid-template-columns:1fr minmax(300px,38%);align-items:center;gap:0;
    padding-top:var(--header-h);
  }
  .hero--objet .hero__inner{
    max-width:none;grid-column:1;
    padding-top:clamp(24px,4vh,56px);
    padding-right:clamp(20px,3vw,48px);padding-bottom:clamp(40px,6vw,88px);
  }
  .hero__objet{
    grid-column:2;max-width:none;
    padding:clamp(24px,4vh,56px) var(--gut) clamp(40px,6vw,88px) 0;
  }
  .objet__img{max-height:min(48vh,420px);}
}


.prod{background:var(--bg-2);}
.prod__inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}

.prod__head{
  display:flex;flex-wrap:wrap;gap:10px 40px;align-items:baseline;
  justify-content:space-between;
  padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--line);
}
.prod__titre{font-size:var(--fs-h3);}
.prod__aide{font-size:var(--fs-small);color:var(--ink-soft);max-width:48ch;}

.prod__liste{margin-top:clamp(18px,2.4vw,28px);display:grid;gap:2px;}
.prod__liste .sel-item{
  padding:clamp(12px,1.6vw,16px) clamp(14px,2vw,20px);
  background:var(--bg-3);border-radius:10px;
}
.prod__liste .sel-item__name{flex:1 1 240px;font-weight:500;}

.prod__actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(28px,3.6vw,44px);
}

@media (max-width:560px){
  .prod__liste .sel-item{
    flex-wrap:wrap;gap:8px 14px;align-items:center;
  }
  .prod__liste .sel-item__name{flex:1 1 100%;}
  .prod__liste .sel-item__spec{flex:1 1 auto;}
}
.family__spec{font-size:var(--fs-small);color:var(--ink-dim);margin-top:6px;}
.family--one .family__desc:empty,.family__spec:empty{display:none;}


/* --------------------------------------------- Raccords avec WordPress -- */
/* Les blocs natifs portent leurs propres contraintes de largeur : on les
   désactive là où nos sections gèrent déjà la mise en page. */

.wp-site-blocks > *{margin-block:0;}
.wp-block-group.alignfull{margin-inline:0;}
.editor-styles-wrapper .hero{min-height:60vh;}
.wp-block-post-content > *{max-width:none;}

/* Le bloc Navigation natif reprend l'allure de la nav de la maquette. */
.wp-block-navigation{gap:clamp(18px,2.4vw,38px);}
.wp-block-navigation .wp-block-navigation-item__content{
  font-family:var(--display);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft);
}
.wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--ink);}

/* Le bloc Navigation gère lui-même son repli mobile (bouton + panneau) :
   il ne doit pas tomber sous la règle .nav-main{display:none} de la maquette,
   sinon il n'y a plus aucune navigation sur mobile. */
.site-header .wp-block-navigation{display:flex;}
.site-header .wp-block-navigation__responsive-container-open{color:var(--cream);}
/* Le cœur de WordPress impose un fond blanc au panneau ouvert via
   « .wp-block-navigation:not(.has-background) … :not(.disable-default-overlay) ».
   On reprend exactement sa spécificité pour la remplacer, sans !important. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.site-header .wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--bg);
  color:var(--cream);
  padding:clamp(24px,6vw,72px) var(--gut);
}
.site-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){
  color:var(--cream);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  color:var(--cream);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.75rem,6vw,3rem);letter-spacing:-.03em;color:var(--cream);
}

/* Repli du menu : liste inline à partir de 1040 px (largeur à laquelle elle
   tient sur une ligne à côté des deux boutons), bouton d'ouverture en dessous.
   Le bloc Navigation bascule par défaut à 600 px, trop tôt pour cet en-tête. */
@media (max-width:1039px){
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open){display:none;}
  .site-header .wp-block-navigation__responsive-container-open{display:flex;}
}

/* En-tête mobile : la place manque pour le libellé complet des deux boutons.
   On masque le CTA devis (il reste dans le menu et en bas de chaque page) et
   on réduit « Ma sélection » à son compteur. */
@media (max-width:760px){
  .site-header{gap:12px;padding-inline:var(--gut);}
  .site-header .btn--accent{display:none;}
  .site-header .quote-btn{
    font-size:0;padding:11px 14px;gap:0;
  }
  .site-header .quote-btn::before{
    content:'◧';font-size:1rem;line-height:1;color:var(--ink-soft);
  }
  .site-header .quote-btn .count{
    position:static;font-size:.6875rem;margin-left:7px;display:none;
  }
  .site-header .quote-btn.has-items .count{display:inline-flex;}
}

/* ------------------------------------------------------- Fluent Forms -- */
/* Le formulaire natif reprend l'allure des champs de la maquette :
   soulignés plutôt que boîtes, libellés en capitales espacées. */

.fluentform .ff-el-group{margin-bottom:clamp(18px,2.2vw,26px);}
.fluentform .ff-el-input--label label{
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-bottom:10px;
}
.fluentform .ff-el-form-control{
  width:100%;padding:14px 0;background:transparent;border:0;
  border-bottom:1px solid var(--line-input);border-radius:0;
  font-family:var(--text);font-size:1.0625rem;color:var(--ink);
  box-shadow:none;transition:border-color .25s;
}
.fluentform .ff-el-form-control:focus{
  outline:none;border-bottom-color:var(--accent);background:transparent;box-shadow:none;
}
.fluentform .ff-el-form-control::placeholder{color:var(--ink-dim);}
.fluentform textarea.ff-el-form-control{min-height:150px;line-height:1.55;resize:vertical;}
.fluentform .ff-el-is-error .ff-el-form-control{border-bottom-color:var(--error,#E15A4A);}
.fluentform .error-text,.fluentform .ff-el-is-error .text-danger{
  font-size:var(--fs-small);color:#E98B7D;margin-top:6px;
}
.fluentform .ff-el-help-message{font-size:var(--fs-small);color:var(--ink-dim);margin-top:8px;}

/* Cases à cocher : mêmes puces que les filtres de références. */
.fluentform .ff-el-form-check{display:inline-block;margin:0 10px 10px 0;}
.fluentform .ff-el-form-check-label{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);
  padding:11px 18px;border:1px solid var(--line-input);border-radius:999px;
  cursor:pointer;transition:all .22s;margin:0;
}
.fluentform .ff-el-form-check-label:hover{color:var(--ink);border-color:var(--ink-soft);}
.fluentform .ff-el-form-check-input{position:absolute;opacity:0;width:0;height:0;}
.fluentform .ff-el-form-check-label:has(input:checked){
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}

/* Zone de dépôt de fichier. */
.fluentform .ff-el-input--content .ff_upload_btn,
.fluentform .ff-upload-button{
  font-family:var(--display);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  padding:13px 24px;border:1px dashed var(--line);border-radius:4px;
  background:transparent;color:var(--ink-soft);transition:.22s;
}
.fluentform .ff_upload_btn:hover,.fluentform .ff-upload-button:hover{
  border-color:var(--accent);background:var(--accent-dim);color:var(--ink);
}

/* Bouton d'envoi : exactement le bouton cuivre du reste du site. */
.fluentform .ff-btn-submit{
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  padding:15px 28px;border-radius:999px;border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);transition:.25s;
}
.fluentform .ff-btn-submit:hover{background:var(--accent-hi);border-color:var(--accent-hi);}

/* Message de confirmation. */
.ff-message-success{
  padding:18px 22px;border:1px solid var(--accent);border-radius:4px;
  background:var(--accent-dim);color:var(--ink);
}

/* ===================================================== Catalogue - outils == */

.cat-search{margin:0 0 clamp(20px,2.5vw,32px);}
.cat-search__label{
  display:block;font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-bottom:10px;
}
.cat-search__box{position:relative;max-width:520px;}
.cat-search__box input{
  width:100%;padding:14px 44px 14px 0;background:transparent;border:0;
  border-bottom:1px solid var(--line-input);border-radius:0;
  font-family:var(--text);font-size:1.0625rem;color:var(--ink);
  transition:border-color .25s;-webkit-appearance:none;appearance:none;
}
.cat-search__box input::-webkit-search-cancel-button{display:none;}
.cat-search__box input:focus{outline:none;border-bottom-color:var(--accent);}
.cat-search__box input::placeholder{color:var(--ink-dim);}
.cat-search__clear{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;font-size:1.25rem;line-height:1;
  color:var(--ink-dim);transition:color .2s,background .2s;
}
.cat-search__clear:hover{color:var(--ink);background:var(--bg-2);}
.cat-search__count{
  font-size:var(--fs-small);color:var(--accent-hi);margin-top:10px;min-height:1.4em;
}

.cat-tools{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line);
}

/* La famille devient cliquable vers sa fiche. */
.family__link{
  display:inline-flex;align-items:baseline;gap:9px;
  color:inherit;transition:color .2s;
}
.family__link:hover{color:var(--accent-hi);}
.family__go{font-size:.75em;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;}
.family__link:hover .family__go{opacity:1;transform:none;}

/* ======================================= Rappel de sélection sur mobile == */

.sel-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:12px var(--gut);
  background:rgba(23,25,28,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.sel-bar.is-on{transform:none;}
@media (max-width:900px){.sel-bar{display:flex;}}
.sel-bar__voir{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);text-align:left;
}
.sel-bar__n{
  min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  font-size:.75rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}
.sel-bar .btn{padding:11px 18px;font-size:.6875rem;flex:none;}

/* La barre ne doit pas masquer le bas de page. */
@media (max-width:900px){
  body:has(.sel-bar.is-on) .site-footer{padding-bottom:72px;}
}

/* ============================================ Confirmation de formulaire == */

.ff-message-success,.forminator-success,.forminator-response-message{
  padding:18px 22px;border:1px solid var(--accent);border-radius:4px;
  background:var(--accent-dim);color:var(--ink);font-size:1rem;
}

/* ======================================================== Forminator ===== */
/* Le formulaire reprend l'allure des champs de la maquette : soulignés
   plutôt que boîtes, libellés en capitales espacées, bouton cuivre. */

.forminator-ui.forminator-custom-form{--forminator-accent:var(--accent);}
.forminator-ui .forminator-row{margin-bottom:clamp(18px,2.2vw,26px);}
.forminator-ui .forminator-label{
  font-family:var(--display)!important;font-size:var(--fs-label)!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)!important;margin-bottom:10px!important;
}
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui input[type=text],
.forminator-ui input[type=email],
.forminator-ui input[type=tel],
.forminator-ui textarea{
  width:100%;padding:14px 0!important;background:transparent!important;
  border:0!important;border-bottom:1px solid var(--line-input)!important;border-radius:0!important;
  font-family:var(--text)!important;font-size:1.0625rem!important;color:var(--ink)!important;
  box-shadow:none!important;transition:border-color .25s;
}
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui textarea:focus{outline:none;border-bottom-color:var(--accent)!important;}
.forminator-ui textarea{min-height:150px!important;line-height:1.55;resize:vertical;}
.forminator-ui .forminator-description{font-size:var(--fs-small);color:var(--ink-dim);margin-top:8px;}
.forminator-ui .forminator-error-message{font-size:var(--fs-small);color:#E98B7D;margin-top:6px;}

/* Cases à cocher : mêmes puces que les filtres de références. */
.forminator-ui .forminator-checkbox{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);
  padding:11px 18px;border:1px solid var(--line-input);border-radius:999px;
  cursor:pointer;transition:all .22s;margin:0 10px 10px 0;
}
.forminator-ui .forminator-checkbox:hover{color:var(--ink);border-color:var(--ink-soft);}
.forminator-ui .forminator-checkbox:has(input:checked){
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.forminator-ui .forminator-checkbox span[aria-hidden]{display:none;}

/* Zone de dépôt de fichier. */
.forminator-ui .forminator-uploader,
.forminator-ui .forminator-multi-upload{
  border:1px dashed var(--line-input)!important;border-radius:4px!important;
  background:transparent!important;padding:clamp(20px,3vw,32px)!important;
  transition:border-color .25s,background .25s;
}
.forminator-ui .forminator-uploader:hover,
.forminator-ui .forminator-multi-upload:hover{border-color:var(--accent)!important;background:var(--accent-dim)!important;}
.forminator-ui .forminator-multi-upload-message,
.forminator-ui .forminator-uploader span{color:var(--ink-soft)!important;}

/* Bouton d'envoi. */
.forminator-ui .forminator-button-submit{
  font-family:var(--display)!important;font-size:.8125rem!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.08em;
  padding:15px 28px!important;border-radius:999px!important;
  background:var(--accent)!important;color:var(--on-accent)!important;border:1px solid var(--accent)!important;
  transition:.25s;
}
.forminator-ui .forminator-button-submit:hover{background:var(--accent-hi)!important;border-color:var(--accent-hi)!important;}

/* Message de confirmation, bien visible. */
.forminator-ui .forminator-response-message{
  padding:18px 22px!important;border:1px solid var(--accent)!important;border-radius:4px!important;
  background:var(--accent-dim)!important;color:var(--ink)!important;font-size:1rem!important;
}
.btn__poids{opacity:.6;font-weight:400;letter-spacing:0;}

/* Média de fond réel (photo ou vidéo) dans un bandeau ou une tuile. */
.media-fond{overflow:hidden;}
.media-fond__img{width:100%;height:100%;object-fit:cover;display:block;}
.tile__media.media-fond{position:absolute;inset:0;}

/* ------------------------------------------- Boutons sur petit écran --- */
/* « Télécharger le catalogue PDF (70 Mo) » tient sur une ligne au-delà de
   400 px, mais débordait en dessous. On autorise le retour à la ligne et
   on laisse les boutons de bandeau occuper toute la largeur. */

.btn{white-space:normal;text-align:center;}
.btn__poids{white-space:nowrap;}

@media (max-width:420px){
  .hero__cta{flex-direction:column;align-items:stretch;}
  .hero__cta .btn{width:100%;justify-content:center;}
  .cat-tools{flex-direction:column;align-items:stretch;}
  .cat-tools .btn{width:100%;justify-content:center;}
  .form-actions{flex-direction:column;align-items:stretch;}
  .form-actions .btn{width:100%;justify-content:center;}
}

/* ==================================== Largeur du corps de page ========== */
/* Les modèles passent en layout « default » pour que les bandeaux, tuiles
   et grilles occupent toute la largeur. On re-contraint uniquement le texte
   courant, bloc par bloc, pour garder une ligne lisible. */

.page-body > .wp-block-post-content > p,
.page-body > .wp-block-post-content > h2,
.page-body > .wp-block-post-content > h3,
.page-body > .wp-block-post-content > h4,
.page-body > .wp-block-post-content > ul,
.page-body > .wp-block-post-content > ol,
.page-body > .wp-block-post-content > blockquote{
  max-width:min(var(--maxw), 820px);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.page-body > .wp-block-post-content > .split,
.page-body > .wp-block-post-content > .stats,
.page-body > .wp-block-post-content > .tiles{max-width:none;}
.page-body .split,.page-body .rows{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
/* La grille ESG dessine ses filets avec sa couleur de fond : lui donner du
   padding faisait déborder ce fond en deux bandes grises sur les côtés.
   On la contraint par la largeur, pas par le remplissage. */
.page-body .esg{
  width:calc(100% - 2 * var(--gut));
  max-width:calc(var(--maxw) - 2 * var(--gut));
  margin-inline:auto;
  padding-inline:0;
}
.page-body .tiles{max-width:var(--maxw);margin-inline:auto;}

/* ===================================== Survol des boutons (ordinateur) == */
/* Uniquement là où il y a un vrai pointeur : sur tactile, :hover reste
   collé après le tap et donne un état figé. */

@media (hover:hover) and (pointer:fine){
  .btn{
    position:relative;overflow:hidden;isolation:isolate;
    transition:background .28s,color .28s,border-color .28s,transform .18s;
  }
  .btn::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:currentColor;opacity:0;
    transform:translateY(100%);
    transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .34s;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn:active{transform:translateY(0);}

  .btn--accent:hover{background:var(--accent-hi);border-color:var(--accent-hi);}
  .btn--solid:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .btn--ghost:hover{background:var(--cream);color:var(--ink-dark);border-color:var(--cream);}
  .on-light .btn--ghost:hover{background:var(--ink-dark);color:var(--cream);border-color:var(--ink-dark);}

  /* La flèche part vers la droite, le libellé reste en place. */
  .btn .arw{transition:transform .28s cubic-bezier(.16,1,.3,1);}
  .btn:hover .arw{transform:translateX(5px);}

  /* Liens soulignés : le filet se colore et s'épaissit. */
  .link-u{transition:color .25s,border-color .25s,gap .25s;}
  .link-u:hover{border-bottom-width:2px;}

  /* Puces de filtre et cases : léger relief. */
  .chip,.check{transition:background .22s,border-color .22s,color .22s,transform .18s;}
  .chip:hover,.check:hover{transform:translateY(-1px);}

  /* Lignes du catalogue : la flèche n'apparaît qu'au survol. */
  .family__link{transition:color .22s;}
}

/* Accessibilité : le focus clavier doit rester visible malgré les survols. */
.btn:focus-visible,.chip:focus-visible,.link-u:focus-visible{
  outline:2px solid var(--accent-hi);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none;}
  .btn:hover .arw{transform:none;}
  .card:hover .card__media img{transform:none;}
}

/* La carte entière est cliquable via le lien du titre, sans imbriquer de
   bloc dans une ancre (ce que wpautop cassait). */
.card{position:relative;}
.card__link{color:inherit;}
.card__link::after{content:'';position:absolute;inset:0;z-index:1;}
.card:hover .card__link{color:var(--accent-hi);}
.on-light .card:hover .card__link{color:var(--accent-on-light);}

/* ============================== Menu plein écran (registre ES Global) === */
/* Panneau noir intégral, liens alignés à gauche en très grandes capitales,
   entrée décalée, et les coordonnées en bas. */

.site-header .wp-block-navigation__responsive-container.is-menu-open{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,12vh,140px) var(--gut) clamp(90px,14vh,120px);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
  width:100%;max-width:var(--maxw);margin:0 auto;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
  flex-direction:column;align-items:flex-start;gap:0;width:100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--line);}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
  display:block;width:100%;
  font-size:clamp(1.75rem,9vw,3.25rem);line-height:1.1;
  letter-spacing:-.03em;padding:clamp(14px,2.4vh,22px) 0;
  color:var(--cream);transition:color .25s,transform .35s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:hover{color:var(--accent-hi);transform:translateX(10px);}
}

/* Les entrées se posent une par une à l'ouverture. */
@media (prefers-reduced-motion:no-preference){
  .site-header .is-menu-open .wp-block-navigation-item{
    opacity:0;transform:translateY(14px);
    animation:menu-entre .5s cubic-bezier(.16,1,.3,1) forwards;
  }
  .site-header .is-menu-open .wp-block-navigation-item:nth-child(1){animation-delay:.05s;}
  .site-header .is-menu-open .wp-block-navigation-item:nth-child(2){animation-delay:.10s;}
  .site-header .is-menu-open .wp-block-navigation-item:nth-child(3){animation-delay:.15s;}
  .site-header .is-menu-open .wp-block-navigation-item:nth-child(4){animation-delay:.20s;}
  .site-header .is-menu-open .wp-block-navigation-item:nth-child(5){animation-delay:.25s;}
}
@keyframes menu-entre{to{opacity:1;transform:none;}}

/* Bouton de fermeture, calé sur la gouttière. */
.site-header .is-menu-open .wp-block-navigation__responsive-container-close{
  top:clamp(18px,3vh,28px);right:var(--gut);
  width:44px;height:44px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;color:var(--cream);transition:background .25s,color .25s;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-close:hover{
  background:var(--cream);color:var(--ink-dark);
}

/* Coordonnées en pied de panneau, comme sur la maquette. */
.site-header .is-menu-open .wp-block-navigation__responsive-container-content::after{
  content:'office@rig-up.fr · 02 51 81 02 89';
  display:block;margin-top:clamp(28px,5vh,48px);padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--text);font-size:var(--fs-small);color:var(--ink-soft);
  text-align:left;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content{
  text-align:left;
}

/* Le bouton d'ouverture reprend l'allure des autres commandes.
   ATTENTION : ne jamais poser « display » hors du media query - une règle
   plus spécifique que celle du cœur réaffiche le bouton sur grand écran et
   fait passer la navigation à la ligne. */
.site-header .wp-block-navigation__responsive-container-open{
  width:44px;height:44px;border:1px solid var(--line);border-radius:999px;
  place-items:center;color:var(--cream);transition:background .25s,color .25s;
}
@media (max-width:1039px){
  .site-header .wp-block-navigation__responsive-container-open{display:grid;}
}
@media (min-width:1040px){
  .site-header .wp-block-navigation__responsive-container-open{display:none;}
}
.site-header .wp-block-navigation__responsive-container-open:hover{
  background:var(--cream);color:var(--ink-dark);
}

/* ------------------------- Forminator : reprise des couleurs imposées --- */
/* L'extension génère des règles par formulaire, très spécifiques, qui
   forcent color:#000 - invisible sur notre fond sombre. On reprend la main
   sur les seules propriétés de couleur, en gardant sa grille intacte. */

.forminator-ui.forminator-custom-form .forminator-checkbox,
.forminator-ui.forminator-custom-form .forminator-checkbox-label,
.forminator-ui.forminator-custom-form .forminator-radio,
.forminator-ui.forminator-custom-form .forminator-radio-label{
  color:var(--ink-soft)!important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox:hover,
.forminator-ui.forminator-custom-form .forminator-checkbox:hover .forminator-checkbox-label{
  color:var(--ink)!important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox:has(input:checked),
.forminator-ui.forminator-custom-form .forminator-checkbox:has(input:checked) .forminator-checkbox-label{
  color:var(--on-accent)!important;
}
/* La pastille native fait doublon avec la puce : on la retire. */
.forminator-ui.forminator-custom-form .forminator-checkbox-box{display:none!important;}

.forminator-ui.forminator-custom-form .forminator-description,
.forminator-ui.forminator-custom-form .forminator-description *,
.forminator-ui.forminator-custom-form .forminator-file-upload span,
.forminator-ui.forminator-custom-form .forminator-uploaded-file--text{
  color:var(--ink-dim)!important;   /* 48 % → 4,99:1, le gris natif plafonnait à 4,26 */
}
.forminator-ui.forminator-custom-form .forminator-label,
.forminator-ui.forminator-custom-form .forminator-label *{
  color:var(--ink-dim)!important;
}
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea{
  color:var(--ink)!important;
}
.forminator-ui.forminator-custom-form .forminator-required{color:var(--accent-hi)!important;}

/* Le panneau doit couvrir la fenêtre, quel que soit son parent. */
.site-header .wp-block-navigation__responsive-container.is-menu-open{
  position:fixed;inset:0;width:100%;height:100%;
  max-width:none;max-height:none;z-index:200;
  overflow-y:auto;overscroll-behavior:contain;
}

/* ------------------------------------- Raccords verticaux des sections -- */
/* Le blockGap de theme.json glissait un vide noir entre la section claire
   et le bandeau de logos. Les sections gèrent elles-mêmes leur rythme. */
/* WordPress pose « .wp-container-… > * + * { margin-block-start: blockGap } ».
   Une classe pèse plus que deux sélecteurs d'éléments : il faut au moins une
   classe de notre côté pour reprendre la main. */
.wp-site-blocks main > section,
.wp-site-blocks main > .wp-block-group,
.wp-site-blocks main > section + section,
.wp-site-blocks > *{margin-block:0;}
.marquee{margin-top:0;}
.section.on-light + section .marquee{border-top:0;}

/* ----------------------------------------- Catalogue : filet en double -- */
/* .cat-tools portait une bordure basse et .selector une bordure haute :
   deux traits à quelques pixels l'un de l'autre. */
.cat-tools{border-bottom:0;padding-bottom:0;margin-bottom:clamp(20px,2.4vw,28px);}

/* ================= Forminator : grille, proximité et respiration ======== */
/*
 * Trois défauts corrigés ici :
 *
 * 1. Les lignes sortaient en display:block, donc les colonnes ne se
 *    partageaient pas la largeur : « Prénom » et « Nom » s'empilaient sur
 *    741 px chacun. On reprend la grille à notre compte.
 *
 * 2. L'écart libellé → trait valait 63 px alors que l'écart entre deux
 *    champs n'était que de 40 px : l'œil rattachait chaque trait au
 *    libellé SUIVANT. On resserre le couple libellé/champ et on écarte
 *    les groupes, pour que la proximité dise la vérité.
 *
 * 3. Les libellés à 11 px étaient trop petits face à une saisie à 17 px.
 */

.forminator-ui.forminator-custom-form{
  --ff-col-gap:clamp(20px,2.4vw,36px);
  --ff-row-gap:clamp(34px,4vw,52px);
}

/* --- Grille : deux colonnes dès que la place le permet --- */
@media (min-width:700px){
  .forminator-ui.forminator-custom-form .forminator-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--ff-col-gap);
    row-gap:var(--ff-row-gap);
    align-items:start;
  }
  .forminator-ui.forminator-custom-form .forminator-col-12,
  .forminator-ui.forminator-custom-form .forminator-col:only-child{
    grid-column:1 / -1;
  }
}
@media (max-width:699px){
  .forminator-ui.forminator-custom-form .forminator-row{
    display:grid!important;grid-template-columns:1fr;row-gap:var(--ff-row-gap);
  }
}

.forminator-ui.forminator-custom-form .forminator-row{
  margin-bottom:var(--ff-row-gap)!important;
}
.forminator-ui.forminator-custom-form .forminator-row:last-of-type{margin-bottom:0!important;}
.forminator-ui.forminator-custom-form .forminator-col{width:auto!important;padding:0!important;}
.forminator-ui.forminator-custom-form .forminator-field{margin-bottom:0!important;}

/* --- Proximité : le libellé colle à son champ --- */
.forminator-ui.forminator-custom-form .forminator-label{
  display:block;
  margin-bottom:8px!important;          /* 14 px éloignait trop le libellé */
  font-size:.75rem!important;           /* 11 px était illisible face au 17 px saisi */
  letter-spacing:.12em;
  line-height:1.3;
}
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea{
  padding:4px 0 12px!important;          /* le trait remonte sous la saisie */
  line-height:1.4;
}
.forminator-ui.forminator-custom-form .forminator-description{
  margin-top:8px!important;line-height:1.5;
}

/* --- Le trait devient franc au survol et à la saisie --- */
.forminator-ui.forminator-custom-form .forminator-input:hover,
.forminator-ui.forminator-custom-form .forminator-textarea:hover{
  border-bottom-color:var(--ink-soft)!important;
}
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus{
  border-bottom-width:2px!important;border-bottom-color:var(--accent)!important;
  padding-bottom:11px!important;         /* compense le pixel de bordure */
}

/* --- Les blocs à part : besoins, pièce jointe --- */
/* L'espacement suffit à séparer ces blocs : le filet faisait doublon. */
.forminator-ui.forminator-custom-form .forminator-field-checkbox,
.forminator-ui.forminator-custom-form .forminator-field-upload{
  padding-top:clamp(18px,2.2vw,26px);
}
.forminator-ui.forminator-custom-form .forminator-checkbox{
  margin:0 10px 10px 0!important;padding:12px 20px!important;
}

/* --- Zone de dépôt --- */
.forminator-ui.forminator-custom-form .forminator-uploader,
.forminator-ui.forminator-custom-form .forminator-multi-upload{
  min-height:150px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;
}

/* --- Bouton d'envoi détaché --- */
.forminator-ui.forminator-custom-form .forminator-button-submit{
  margin-top:clamp(30px,3.8vw,46px)!important;
}

/* ----------------------------------------- Catalogue : filet en double -- */
/* .cat-tools portait une bordure basse et .selector une bordure haute :
   deux traits à quelques pixels l'un de l'autre. */
.cat-tools{border-bottom:0;padding-bottom:0;margin-bottom:clamp(20px,2.4vw,28px);}

/* --------------------------------------------- Vidéo de bandeau -------- */
.hero video.media-fond__img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* évite le flash blanc le temps de la première image */
  background:var(--bg);
}
/* Par défaut c'est la vidéo qui joue, le repli reste caché. */
.hero .media-fond__repli{display:none;}

/* Mouvement réduit : on échange la vidéo contre l'image fixe. */
@media (prefers-reduced-motion:reduce){
  .hero video.media-fond__img{display:none;}
  .hero .media-fond__repli{display:block;}
}

/* Titre de section qui doit tenir sur une seule ligne tant que la place
   le permet : « Cinq métiers, un seul interlocuteur » se cassait en trois
   lignes bancales à cause d'un max-width de 18 caractères. */
.titre-long{
  margin-top:18px;
  max-width:none;
  text-wrap:nowrap;
}
@media (max-width:1100px){
  .titre-long{text-wrap:balance;}   /* en dessous, on laisse revenir à la ligne proprement */
}

/* La tuile est un lien : la couleur de survol des liens (cuivre, héritée de
   theme.json) repeignait son titre et sa description. On les maintient. */
.tile:hover .tile__t,
.tile:focus-visible .tile__t{color:var(--cream);}
.tile:hover .tile__d,
.tile:focus-visible .tile__d{color:var(--ink-soft);}
.tile:hover .tile__n{color:var(--ink-dim);}

/* ===================== Catalogue : navigation par univers et familles === */

.tile__meta{
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);
  margin-top:8px;
}
.tile--produit{min-height:clamp(260px,32vw,400px);}

/* La barre de recherche devient l'élément principal de la page. */
.cat-search{
  margin:0 auto clamp(28px,3.4vw,44px);
  max-width:760px;text-align:center;
}
.cat-search__label{
  font-size:.8125rem;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:16px;
}
.cat-search__box{
  max-width:none;
  border:1px solid var(--line-input);border-radius:999px;
  background:var(--bg-2);
  display:flex;align-items:center;gap:12px;
  padding:0 22px;
  transition:border-color .25s,background .25s;
}
.cat-search__box:focus-within{border-color:var(--accent);background:var(--bg-3);}
.cat-search__box::before{
  content:'⌕';font-size:1.5rem;line-height:1;color:var(--ink-dim);flex:none;
}
.cat-search__box input{
  flex:1;padding:18px 0;border-bottom:0!important;
  font-size:1.0625rem;text-align:left;
}
.cat-search__clear{position:static;transform:none;flex:none;}
.cat-search__count{margin-top:14px;text-align:center;}

/* Résultats de recherche : une liste simple, qui remplace les tuiles. */
.resultats{
  display:grid;gap:2px;max-width:760px;margin:0 auto clamp(24px,3vw,40px);
}
/* Une ligne, pas une carte : un résultat de recherche se parcourt du
   regard, il ne se contemple pas. La vignette n'est là que si la famille
   a une photo ; sans elle la ligne reste équilibrée. */
.resultat{
  display:flex;align-items:center;gap:clamp(12px,2vw,18px);
  padding:12px clamp(14px,2vw,18px);border-radius:8px;background:var(--bg-2);
  transition:background .2s,transform .2s;
}
.resultat:hover,.resultat:focus-visible{background:var(--bg-3);transform:translateX(3px);}

.resultat__img{
  width:48px;height:48px;flex:none;
  /* contain et non cover : une prise de vue sur fond blanc doit rester
     entière, et le support clair reprend celui de la fiche produit. */
  object-fit:contain;background:var(--cream);
  border-radius:6px;padding:4px;
}

.resultat__txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}

.resultat__nom{
  font-family:var(--display);font-weight:600;font-size:.9375rem;line-height:1.25;
  overflow-wrap:anywhere;
}
.resultat:hover .resultat__nom{color:var(--accent-hi);}

.resultat__meta{display:flex;flex-wrap:wrap;gap:4px 14px;}
.resultat__univers,.resultat__n{
  font-family:var(--display);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);
}

.resultat__go{
  flex:none;color:var(--ink-dim);font-size:1.0625rem;
  transition:transform .2s,color .2s;
}
.resultat:hover .resultat__go{color:var(--accent-hi);transform:translateX(3px);}

.resultat.is-hidden{display:none;}

/* Bandeau court pour les pages d'univers, qui n'ont pas de photo dédiée. */
.hero--court{min-height:auto;}
.hero--court .hero__inner{
  padding-top:calc(var(--header-h) + clamp(40px,7vh,80px));
  padding-bottom:clamp(28px,4vw,52px);
}

/* Deux cadres photo côte à côte dans les pages d'expertise. */
.duo-photos{
  display:grid;gap:clamp(12px,1.6vw,24px);grid-template-columns:1fr;
  margin-top:clamp(32px,4vw,56px);
}
@media (min-width:760px){.duo-photos{grid-template-columns:repeat(2,1fr);}}
.expertise-cta{margin-top:clamp(28px,3.4vw,44px);}

/* ========================================= À propos : rythme et fiches == */
/* Le client trouvait la page « très sombre, dur de différencier les
   parties ». On alterne fond anthracite et fond crème d'une section à
   l'autre, et les caractéristiques deviennent des fiches, pas des lignes
   de tableau qui avaient l'air cliquables. */

.bloc-apropos{background:var(--bg-2);}
.bloc-apropos + .stats{border-top:0;}

.fiches{
  display:grid;gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:6px;overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:600px){.fiches{grid-template-columns:repeat(2,1fr);}}
.fiche{background:var(--cream);padding:clamp(18px,2.2vw,26px);}
.fiche__v{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.02em;
  color:var(--accent-on-light);line-height:1;
}
.fiche__l{
  font-size:var(--fs-small);color:var(--ink-dark-soft);margin-top:10px;line-height:1.45;
}

/* Sur fond clair, les cadres photo prennent une teinte claire aussi. */
.on-light .ph{
  background-color:var(--cream-2);
  background-image:
    linear-gradient(135deg,rgba(14,15,17,.05) 25%,transparent 25%,transparent 50%,rgba(14,15,17,.05) 50%,rgba(14,15,17,.05) 75%,transparent 75%),
    radial-gradient(120% 90% at 30% 15%,rgba(150,85,28,.14) 0%,transparent 62%);
}
.on-light .ph::after{color:rgba(14,15,17,.45);}

/* ------------------------------------------------- Réseaux sociaux ----- */
.reseaux{display:flex;gap:10px;align-items:center;}
.reseaux a{
  width:42px;height:42px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;color:var(--ink-soft);
  transition:background .22s,color .22s,border-color .22s,transform .18s;
}
.reseaux svg{width:19px;height:19px;display:block;}
@media (hover:hover) and (pointer:fine){
  .reseaux a:hover{
    background:var(--cream);color:var(--ink-dark);border-color:var(--cream);
    transform:translateY(-2px);
  }
}
.reseaux a:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;}

/* ------------------------------------------------- Réseaux sociaux ----- */
.reseaux{display:flex;gap:10px;align-items:center;margin-top:4px;}
.reseaux a{
  width:42px;height:42px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;color:var(--ink-soft);
  transition:background .22s,color .22s,border-color .22s,transform .18s;
}
.reseaux svg{width:19px;height:19px;display:block;}
@media (hover:hover) and (pointer:fine){
  .reseaux a:hover{background:var(--cream);color:var(--ink-dark);border-color:var(--cream);transform:translateY(-2px);}
}
.reseaux a:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;}

/* ------------------------------- Image d'habillage du menu plein écran -- */
/* Demandée par le client pour « habiller » la version ordinateur. Elle
   n'apparaît qu'au-delà de 1000 px : sur téléphone elle mangerait la place
   des liens, qui sont l'essentiel. */

@media (min-width:1000px){
  .site-header .wp-block-navigation__responsive-container.is-menu-open{
    padding-left:calc(38% + var(--gut));
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open::before{
    content:'';
    position:absolute;left:0;top:0;bottom:0;width:34%;
    background-image:var(--menu-image,none);
    background-size:cover;background-position:center;
    background-color:var(--bg-2);
  }
  /* Sans image fournie, on garde une bande sobre plutôt qu'un vide. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open::after{
    content:'';position:absolute;left:0;top:0;bottom:0;width:34%;
    background:linear-gradient(90deg,rgba(14,15,17,.25) 0%,rgba(14,15,17,.75) 100%);
    pointer-events:none;
  }
}

/* Tuile dont le lien est porté par le titre : la zone cliquable couvre
   toute la tuile, sans imbriquer de bloc dans une ancre. */
.tile__link{color:inherit;}
.tile__link::after{content:'';position:absolute;inset:0;z-index:3;}
.tile:has(.tile__link:focus-visible){outline:2px solid var(--accent-hi);outline-offset:-3px;}