/* forhuman — Design tokens & pattern styles
   Reference stylesheet for the Gutenberg patterns. In a block theme, the tokens
   below are provided by theme.json (var(--wp--preset--*)); these :root vars mirror
   them so the pattern .html files render standalone for review. */
:root{
  --navy-ink:#1C244B; --navy:#324A6D; --red:#AC4848; --red-vivid:#CD1A47;
  --gold:#E9BE66; --surface:#F3F5F8; --paper:#F7F3EC; --ink:#171515;
  --muted:#4A5568; --muted-2:#8892A4; --line:#E6E9EF; --base:#FFFFFF;
  --font-display:'Raleway',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,monospace;
  --r-sm:7px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 3px rgba(28,36,75,.08);
  /* lot 26 : micro-palette tokenisee (audit design 2.5) — memes valeurs au pixel pres */
  --line-2:#D3D8E2; --surface-1:#FBFBFC; --surface-2:#EEF1F6;
  --rose-300:#D9A6A6; --red-100:#FBEAEA; --red-50:#FBF1F1;
  --rose-50:#FDF2F4; --rose-100:#F3D6DB; --rose-200:#F0B7C2; --gold-100:#F0D8BF;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--base);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{opacity:.85}

/* Layout */
.fh-container{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
.fh-section{padding-block:clamp(48px,6vw,96px)}
.fh-section--surface{background:var(--surface)}
.fh-section--navy{background:var(--navy-ink);color:#fff}
.fh-section--paper{background:var(--paper)}

/* Typography helpers */
.fh-eyebrow{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.fh-eyebrow::before{content:"";width:22px;height:1px;background:var(--red)}
.fh-section--navy .fh-eyebrow{color:var(--gold)}
.fh-h1{font-family:var(--font-display);font-size:clamp(32px,4.4vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0}
.fh-h2{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--navy-ink);margin:0}
.fh-h3{font:600 18px/1.3 var(--font-display);color:var(--navy-ink);margin:0}
.fh-lede{font-family:var(--font-body);font-size:clamp(16px,1.4vw,17px);font-weight:400;line-height:1.62;color:var(--muted)} /* lot 18c : mesure 60ch levee, les intros de section prennent la largeur du container (les heros a image gardent la leur, voir bloc 18c) */
.fh-rule{border:0;border-top:2px solid var(--red);width:88px;margin:22px 0}
.fh-source{font-family:var(--font-body);font-style:italic;font-weight:400;font-size:13px;line-height:1.5;color:var(--muted-2)}

/* Buttons — a single primary style */
.fh-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--r-sm);cursor:pointer;font:700 12px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:15px 24px;transition:filter .2s}
.fh-btn--primary{background:var(--red);color:#fff}
.fh-btn--primary:hover{filter:brightness(1.07);opacity:1}
.fh-btn--navy{background:var(--navy);color:#fff}
.fh-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.fh-link{font:600 12px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:8px}

/* Hero */
.fh-hero{position:relative;min-height:480px;display:flex;align-items:center;overflow:hidden;color:#fff}
.fh-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-hero__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,36,75,.86),rgba(28,36,75,.34))}
.fh-hero__inner{position:relative;padding:clamp(32px,5vw,64px);max-width:720px}
.fh-hero .fh-eyebrow{color:var(--gold)}

/* Stats */
.fh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px}
.fh-stat__num{font-family:var(--font-display);font-size:clamp(38px,4.4vw,54px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--red)}
.fh-stat__num--navy{color:var(--navy)}
.fh-stat hr{border:0;border-top:1px solid var(--red);width:56px;margin:15px 0}
.fh-stat__label{font-family:var(--font-body);font-weight:400;font-size:15.5px;line-height:1.5;color:var(--ink);max-width:32ch}

/* Card grid + offer cards */
.fh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.fh-card{background:var(--base);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.fh-card__media{height:130px;overflow:hidden}
.fh-card__media img{width:100%;height:100%;object-fit:cover}
.fh-card__body{padding:18px}
.fh-kicker{font:600 10px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}

/* Quote */
.fh-quote{margin:0;text-align:center}
.fh-quote blockquote{font-family:var(--font-body);font-size:clamp(22px,3vw,32px);font-weight:400;font-style:italic;line-height:1.4;color:#fff;margin:0 auto;max-width:24ch}
.fh-section--paper .fh-quote blockquote{color:var(--navy-ink)}

/* Logos */
.fh-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;align-items:center}
.fh-logo{height:56px;border:1px dashed var(--line-2);border-radius:10px;display:grid;place-items:center;background:var(--surface-1);filter:grayscale(1)}

/* Article card (#Perspectives) */
.fh-article{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
.fh-article__meta{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.4;color:var(--muted-2);display:flex;flex-wrap:wrap;gap:10px}

/* Bio */
.fh-bio{background:var(--base);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;gap:18px;align-items:flex-start}
.fh-bio__avatar{flex:none;width:72px;height:72px;border-radius:50%;background:var(--navy-ink);display:grid;place-items:center;border:2px solid var(--gold);color:#fff;font:300 24px/1 var(--font-display)}
.fh-badge{display:inline-block;font:600 9.5px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:var(--red-100);padding:5px 9px;border-radius:var(--r-pill)}

/* FAQ — native disclosure, FAQPage */
.fh-faq{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 28px}
.fh-faq details{border-bottom:1px solid var(--line)}
.fh-faq details:last-child{border-bottom:0}
.fh-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;cursor:pointer}
.fh-faq summary::-webkit-details-marker{display:none}
.fh-faq summary h3{margin:0;font:600 16px/1.35 var(--font-display);color:var(--navy-ink)}
.fh-faq summary::after{content:"+";font:300 26px/1 var(--font-display);color:var(--red)}
.fh-faq details[open] summary::after{content:"\2212"}
.fh-faq p{font-family:var(--font-body);font-weight:400;font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 4px 22px;max-width:74ch}

/* Form */
.fh-field{display:block;margin-bottom:16px}
.fh-field>span{display:block;font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1;color:var(--navy-ink);margin-bottom:7px}
/* lot 36 : 16px mini sur les champs — sous 16px, iOS zoome au focus */
.fh-input,.fh-select,.fh-textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.4;background:var(--surface-1);color:var(--ink)}
.fh-input:focus,.fh-select:focus,.fh-textarea:focus{outline:none;border-color:var(--red-vivid);box-shadow:0 0 0 3px rgba(205,26,71,.15)}

/* Glossary — DefinedTerm */
.fh-glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:0}
.fh-term{background:var(--surface);border-radius:var(--r-md);padding:24px;border-top:3px solid var(--red)}
.fh-term dt{font:600 17px/1.2 var(--font-display);color:var(--navy-ink)}
.fh-term dd{margin:10px 0 0;font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.55;color:var(--muted)}

/* "En bref" answer-first + compliance */
.fh-brief{display:flex;flex-direction:column;gap:15px;list-style:none;margin:20px 0 0;padding:0}
.fh-brief li{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.55} /* fix: flex fragmentait les inlines */
.fh-compliance .fh-card{border-top:3px solid var(--navy);padding:24px}

/* Footer */
.fh-footer{background:#141B3A;color:#fff;padding:52px 0 26px}
.fh-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:34px}
.fh-footer h4{font:700 10.5px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.fh-footer a{color:rgba(255,255,255,.8);font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.35;display:block;margin:8px 0}

@media(max-width:860px){
  .fh-footer__cols{grid-template-columns:1fr 1fr}
  .fh-hero__veil{background:linear-gradient(180deg,rgba(28,36,75,.35),rgba(28,36,75,.9))}
}

/* adaptations Gutenberg
   La className d'un wp:button tombe sur le wrapper .wp-block-button ;
   on neutralise le wrapper et on applique le style .fh-btn au lien interieur. */
.wp-block-button.fh-btn{background:none;padding:0;border-radius:0}
.wp-block-button.fh-btn .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--r-sm);cursor:pointer;font:700 12px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:15px 24px;transition:filter .2s;text-decoration:none}
.wp-block-button.fh-btn--primary .wp-block-button__link{background:var(--red);color:#fff}
.wp-block-button.fh-btn--primary .wp-block-button__link:hover{filter:brightness(1.07);opacity:1}
.wp-block-button.fh-btn--navy .wp-block-button__link{background:var(--navy);color:#fff}
.wp-block-button.fh-btn--ghost .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
/* variante compacte (en-tete), reprend les overrides inline de C-01 */
.wp-block-button.fh-btn--compact .wp-block-button__link{padding:11px 17px;text-transform:none;letter-spacing:0}
/* fh/stats : le separator core devient le petit filet .fh-stat hr du design.
   lot 18c : :not(.is-style-wide) monte la specificite face a la regle core du
   separator (100px), meme correctif que fh-rule au lot 18b */
.fh-stat .wp-block-separator:not(.is-style-wide){border:0;border-top:1px solid var(--red);width:56px;margin:15px 0;opacity:1}
/* D2 : rythme vertical interne, releve C-04/C-05 (les marges UA et inline des
   maquettes remplacent la marge de flow core de 24px) */
.fh-stat .fh-stat__label{margin:15px 0 0}
.fh-stat .fh-source{margin:14.5px 0 0}
.fh-card__body .fh-kicker{margin:10px 0 0}
.fh-card__body .fh-h3{margin:10px 0 0}
.fh-card__body .fh-lede{margin:6px 0 0}
/* fh/quote : pullquote core rendu comme la figure du design (C-07) ;
   le cite tient le role du figcaption, son ::before porte le filet central.
   Qualifie par figure. et text-transform neutralise : les styles theme du core
   (.wp-block-pullquote :where(cite) uppercase, bordures 4px) chargent avant mais
   ne doivent jamais gagner. */
figure.wp-block-pullquote.fh-quote{margin:0;padding:0;border:0;text-align:center}
figure.wp-block-pullquote.fh-quote blockquote{margin:0 auto;max-width:24ch}
figure.wp-block-pullquote.fh-quote p{font-family:var(--font-body);font-size:clamp(22px,3vw,32px);font-weight:400;font-style:italic;line-height:1.4;color:#fff;margin:0 auto;max-width:24ch}
figure.wp-block-pullquote.fh-quote cite{display:block;font-family:var(--font-body);font-size:clamp(16px,1.4vw,17px);font-weight:400;line-height:1.62;font-style:normal;text-transform:none;color:rgba(255,255,255,.72);margin:30px auto 0;max-width:60ch}
figure.wp-block-pullquote.fh-quote cite::before{content:"";display:block;width:120px;border-top:2px solid var(--red);margin:0 auto 30px}
/* fh/glossaire : groups h3/p equivalents des dt/dd du design (C-13) ;
   le em du terme porte le sous-titre (ex. RPS - Risques psychosociaux) */
.fh-term h3{font:600 17px/1.2 var(--font-display);color:var(--navy-ink);margin:0}
.fh-term h3 em{font:400 12px/1 var(--font-body);color:var(--muted-2);font-style:normal}
.fh-term p{margin:10px 0 0;font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.55;color:var(--muted)}
.fh-term--navy{border-top-color:var(--navy)}
/* fh/logos : eyebrow centre et gris (style inline de C-08) */
.fh-eyebrow--center{justify-content:center;color:var(--muted-2)}
/* fh/bio : marges des styles inline de C-10, lede reduit des cartes/bios */
.fh-lede--sm{font-size:15px}
.fh-bio .fh-bio__avatar{margin:0}
.fh-bio .fh-badge{margin:8px 0 10px}
/* fh/demo-cta : titre leger et liste a filet gauche (styles inline de C-06) */
.fh-lede--light{color:rgba(255,255,255,.72)}
.fh-cta-title{font-family:var(--font-display);font-size:clamp(26px,3.4vw,40px);font-weight:200;line-height:1.12;color:#fff;max-width:20ch;margin:0}
.fh-cta-title strong{font-weight:600}
.fh-cta-list{list-style:none;margin:0;padding:0 0 0 34px;border-left:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:14px;color:rgba(255,255,255,.85);font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5}
/* fh/perspectives-card : media-text core cale sur la carte article de C-09 */
.fh-article .wp-block-media-text__media{min-height:280px}
.fh-article .wp-block-media-text__content{padding:40px}
/* fh/services : separator core en filet fh-rule, kicker rouge vif (C-05).
   lot 18b : :not(.is-style-wide) monte la specificite a (0,3,0) pour battre la
   regle core .wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}
   (a egalite, notre feuille chargee apres gagne) — sans lui le filet rendait 100px */
.wp-block-separator.fh-rule:not(.is-style-wide){border:0;border-top:2px solid var(--red);width:88px;margin:22px 0;opacity:1}
.fh-kicker--vivid{color:var(--red-vivid)}
/* fh/hero : cover core (C-02) — padding:1em du core neutralise, le voile est le
   gradient du cover (dim 100, l'alpha est dans les stops) ; seconde ligne du H1 */
.wp-block-cover.fh-hero{padding:0}
.fh-lede--bright{color:rgba(255,255,255,.92)}
.fh-h1 .fh-h1__soft{font-weight:300;color:var(--gold-100)}
/* correctif alignements : le flow layout de WordPress injecte
   margin-block-start:24px sur tous les enfants d'un groupe sauf le premier ;
   dans nos grilles CSS l'espacement est porte par le gap, on annule ces marges */
.fh-stats > *,.fh-grid > *,.fh-logos > *,.fh-glossary > *{margin-block-start:0}
/* declinaison editeur du meme reset : le wrap d'add_editor_style laisse tel quel
   un selecteur qui contient deja .editor-styles-wrapper, et sa specificite
   (0,2,0) bat la regle de flow generee dans l'iframe ; inerte sur le front */
.editor-styles-wrapper .fh-stats > *,.editor-styles-wrapper .fh-grid > *,.editor-styles-wrapper .fh-logos > *,.editor-styles-wrapper .fh-glossary > *,.editor-styles-wrapper .fh-approche > *,.editor-styles-wrapper .fh-proof > *,.editor-styles-wrapper .fh-split > *,.editor-styles-wrapper .fh-who > *,.editor-styles-wrapper .fh-step > *,.editor-styles-wrapper .fh-checks--grid > *,.editor-styles-wrapper .fh-tri > *,.editor-styles-wrapper .fh-fact > *,.editor-styles-wrapper .fh-claim > *,.editor-styles-wrapper .fh-panel > *,.editor-styles-wrapper .fh-chat > *,.editor-styles-wrapper .fh-nl > *,.editor-styles-wrapper .fh-writers > *,.editor-styles-wrapper .fh-article > *,.editor-styles-wrapper .fh-trust > *,.editor-styles-wrapper .fh-duo2 > *,.editor-styles-wrapper .fh-temps > *,.editor-styles-wrapper .fh-temps__item > *{margin-block-start:0}
/* espacements du design (C-13) : eyebrow -> H2 12px, H2 -> glossaire 26px */
.fh-eyebrow + .fh-h2{margin-block-start:12px}
.fh-glossary{margin-top:26px}
/* en-tete : logo image (forhuman-logo.svg), hauteur 32px */
.fh-header .fh-brand{margin:0}
.fh-header .fh-brand img{height:32px;width:auto}
/* hero : l'inner prend la geometrie du conteneur (aligne sur .fh-container),
   la largeur de lecture ~720px passe sur ses enfants */
.wp-block-cover.fh-hero .fh-hero__inner{max-width:1180px;margin-inline:auto;padding-inline:24px;padding-block:clamp(32px,5vw,64px)}
.wp-block-cover.fh-hero .fh-hero__inner > *{max-width:720px}
/* fh/faq : details core (C-11) — le summary est en texte simple (le core
   n'accepte pas de heading dedans), le style du summary h3 du design est
   reporte sur le summary ; max-width 860 du style inline du design */
.fh-faq{max-width:860px}
.fh-faq summary{font:600 16px/1.35 var(--font-display);color:var(--navy-ink)}
/* fh/form : coquille de la carte formulaire (C-12), moteur CK Form en preprod */
.fh-h2--sm{font-size:20px}
.fh-form-card{max-width:640px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
/* page d'accueil : sections propres a la maquette pages/accueil.html */
.fh-approche{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.fh-approche > *{margin-block-start:0}
.fh-approche h3{font:600 16px/1.2 var(--font-display);color:var(--navy-ink);margin:0}
.fh-approche p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:var(--muted);margin:5px 0 0}
.fh-more{margin:12px 0 0}
.fh-more a{font:600 12px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.fh-more--light a{font:600 13px/1 var(--font-display);color:#fff;text-transform:none;letter-spacing:0;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px}
.fh-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fh-checks li{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:rgba(255,255,255,.88);position:relative;padding-left:28px}
.fh-checks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold);font-weight:700}
.fh-shot{border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px -24px rgba(28,36,75,.55);margin:0} /* lot 24 : ombre navy, noir pur proscrit */
.fh-shot img{display:block;width:100%}
.fh-proof{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fh-proof > *{margin-block-start:0}
.fh-proof__card{background:var(--surface);border-radius:var(--r-md);padding:22px}
/* correctif recette lot 54 : les items de grille refusent de retrecir
   (min-width:auto) et l'icone 150px fige la carte -> debordement a 390
   sur forhuman-connect. min-width:0 + image fluide, aucun changement
   visuel quand la place suffit. */
.fh-proof__card{min-width:0}
.fh-proof__card img{max-width:100%;height:auto}
.fh-proof__num{font:700 28px/1 var(--font-display);color:var(--navy);margin:0}
.fh-proof__num--red{color:var(--red)}
.fh-proof__label{font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.5;color:var(--muted);margin:8px 0 0}
.fh-cta-title--gold strong{color:var(--gold)}
.fh-section--paper figure.wp-block-pullquote.fh-quote p{color:var(--navy-ink)}
.fh-section--paper figure.wp-block-pullquote.fh-quote p strong{color:var(--red);font-weight:600}
.fh-section--paper figure.wp-block-pullquote.fh-quote cite{color:var(--muted)}
.fh-section--paper figure.wp-block-pullquote.fh-quote cite strong{color:var(--navy-ink)}
.fh-feature.wp-block-cover{border-radius:14px;overflow:hidden;padding:32px}
.fh-feature__kicker{font:700 10px/1 var(--font-mono);color:var(--gold);margin:0}
.fh-badge--red{color:#fff;background:var(--red)}
.fh-feature__title{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:300;line-height:1.15;color:#fff;margin:0;max-width:18ch}
.fh-feature__title strong{font-weight:600}
.fh-feature .fh-article__meta{color:rgba(255,255,255,.75);margin:14px 0 0}

/* page forhuman-connect : sections propres a la maquette pages/forhuman-connect.html */
.fh-breadcrumb{background:var(--surface-1);border-bottom:1px solid var(--surface-2)}
.fh-breadcrumb p{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1;color:var(--muted-2);margin:0;padding:11px 0}
.fh-breadcrumb a{color:var(--muted-2)}
.fh-breadcrumb strong{color:var(--navy);font-weight:400}
.fh-hero__tag{font:600 12px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:0}
.fh-split{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fh-split > *{margin-block-start:0}
.fh-split__main{padding:36px;border-right:1px solid var(--line)}
.fh-split__aside{padding:36px;background:var(--surface)}
.fh-kicker--muted{color:var(--muted-2)}
.fh-brief--checks li{position:relative;padding-left:32px}
.fh-brief--checks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--navy);font-weight:700}
.fh-brief--checks strong{color:var(--navy-ink)}
.fh-who{display:flex;flex-direction:column;gap:14px}
.fh-who > *{margin-block-start:0}
.fh-who__item{padding-bottom:13px;border-bottom:1px solid var(--line)} /* lot 24 : doublon de gris rabattu sur le token */
.fh-who__item:last-child{padding-bottom:0;border-bottom:0}
.fh-who h3{font:600 13.5px/1.3 var(--font-display);color:var(--navy-ink);margin:0}
.fh-who p{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.5;color:var(--muted);margin:3px 0 0} /* lot 36 : plafonne par le h3 voisin (13.5px), hierarchie gardee */
.fh-problem-title strong em{color:var(--gold);font-style:normal}
.fh-checks--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px} /* lot 3b : aere l'intro plateforme */
.fh-checks--grid li{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:var(--ink)}
.fh-checks--grid li::before{color:var(--red)}
.fh-shot--light{border-color:var(--line);border-radius:14px;box-shadow:0 26px 54px -26px rgba(28,36,75,.45)}
.fh-step{background:var(--base);border:1px solid var(--line);border-radius:var(--r-md);padding:26px}
.fh-step > *{margin-block-start:0}
.fh-step__num{font:700 13px/1 var(--font-mono);color:var(--red);margin:0}
.fh-step h3{font:600 16px/1.25 var(--font-display);color:var(--navy-ink);margin:14px 0 6px}
.fh-step p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:var(--muted);margin:0}
.fh-pill{font:600 10px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--base);border:1px solid var(--line-2);padding:8px 12px;border-radius:var(--r-pill);margin:0}
.fh-compliance .fh-card h3{font:600 15px/1.25 var(--font-display);color:var(--navy-ink);margin:0 0 6px}
.fh-compliance .fh-card p{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.5;color:var(--muted);margin:0} /* lot 36 : plafonne par le h3 des cartes (15px) */
/* lot 3b : icones fichiers svg (24px), decoratives */
.fh-icon{margin:0}
.fh-icon img{width:32px;height:32px}
/* lot 3b : filets des cartes conformite declines charte (rouge = accent fort, or parcimonieux) */
.fh-compliance .fh-card--red{border-top-color:var(--red)}
.fh-compliance .fh-card--gold{border-top-color:var(--gold)}
/* lot 3b : bloc demo sur navy clair (intention maquette), distinct du footer navy fonce */
.fh-section--demo{background:var(--navy)}
/* D3 : rythme du demo-cta, releve C-06 — gap colonnes 40px, lede 16px au-dessus / 26px sous (avant le bouton) */
.fh-section--demo .wp-block-columns{gap:40px}
.fh-section--demo .fh-lede{margin:16px 0 26px}
/* lot 5 : page gestion de crise — bouton d'urgence rouge vif (variante du patron),
   grille des situations, listes des phases de la methode */
.wp-block-button.fh-btn--alert .wp-block-button__link{background:var(--red-vivid);color:#fff}
.wp-block-button.fh-btn--alert .wp-block-button__link:hover{filter:brightness(1.07);opacity:1}
.fh-situations{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px}
.fh-situations > li{margin-block-start:0}
@media(max-width:1023px){.fh-situations{grid-template-columns:1fr}}
.fh-step ul{list-style:disc;margin:10px 0 0;padding-left:18px}
.fh-step ul li{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:var(--muted);margin:4px 0 0}
/* lot 5b : ajustements page gestion de crise (decisions Olivier, scopes a l'instance) */
.fh-problem--wide{max-width:none}
/* 5d : le wrapper .fh-urgence porte le filet (bouton + textes), la liste interne perd le sien */
.fh-urgence{display:flex;flex-direction:column;gap:12px;align-items:flex-start;border-left:1px solid rgba(255,255,255,.16);padding-left:34px}
.fh-urgence > *{margin-block-start:0}
.fh-urgence .fh-cta-list{border-left:0;padding:0;gap:12px}
.fh-urgence .fh-cta-list a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
@media(max-width:860px){
  .fh-split{grid-template-columns:1fr}
  .fh-split__main{border-right:0;border-bottom:1px solid var(--line)}
}

/* page un-collegue-en-plus : sections propres a la maquette (humain devant) */
.fh-tri{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fh-tri > *{margin-block-start:0}
.fh-tri__cell{padding:28px 26px;border-right:1px solid var(--line)}
.fh-tri__cell:last-child{border-right:0}
.fh-tri__cell--human{background:var(--red-50)}
.fh-tri__cell h3{font:600 17px/1.3 var(--font-display);color:var(--navy-ink);margin:14px 0 6px}
.fh-tri__cell p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:var(--muted);margin:0}
.fh-pill--sol{display:inline-block;font:600 10px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--surface-2);padding:6px 10px;border-radius:var(--r-pill);margin:0}
.fh-fact{background:var(--surface);border-radius:var(--r-md);padding:26px}
.fh-fact > *{margin-block-start:0}
.fh-fact h3{font:600 19px/1.25 var(--font-display);color:var(--navy-ink);margin:10px 0 0}
.fh-fact p{font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.5;color:var(--muted);margin:8px 0 0}
/* lot 4e : longhands explicites (le raccourci font + var() + clamp() est
   invalide au calcul dans certains navigateurs) et specificite montee */
div.wp-block-group.fh-claim{background:var(--paper);border-radius:14px;padding:38px 42px;display:flex;flex-wrap:wrap;gap:30px;align-items:center;margin-top:24px}
div.wp-block-group.fh-claim > *{margin-block-start:0}
.fh-claim > p{font-family:var(--font-body);font-size:15.5px;font-weight:400;line-height:1.55;color:var(--ink);max-width:52ch;margin:0;flex:1;min-width:240px}
.fh-claim > p.fh-claim__num{font-family:var(--font-mono);font-size:clamp(38px,4.4vw,54px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--red);flex:0 0 auto;min-width:0;max-width:none}
/* lot 4b : icone produit UCP dans « Le probleme » */
.fh-ucp-icon{margin:0}
.fh-ucp-icon img{width:200px;height:auto;margin-inline:auto}
/* lot 4b : conversation Sol (illustration en blocs natifs) */
.fh-chat{background:var(--base);border:1px solid var(--line);border-radius:18px;padding:18px 18px 8px;box-shadow:var(--shadow)}
.fh-chat > *{margin-block-start:0}
.fh-chat__head{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding-bottom:12px;border-bottom:1px solid var(--line);margin:0 0 14px}
.fh-chat__head::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.fh-chat__msg{max-width:85%;padding:10px 14px;border-radius:14px;font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.5;margin:0 0 10px} /* lot 36 : illustration de conversation, volontairement sous le corps */
.fh-chat__msg--user{background:var(--surface);color:var(--ink);border-bottom-left-radius:4px;margin-right:auto}
.fh-chat__msg--sol{background:var(--navy);color:#fff;border-bottom-right-radius:4px;margin-left:auto}
/* lot 4c : rangee etapes/discussion deterministe (cote a cote des 1024px) */
.fh-duo{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.fh-duo > *{margin-block-start:0}
@media(max-width:1023px){.fh-duo{grid-template-columns:1fr}}
/* lot 4c : reservation du widget Feedback Packs (Olivier collera le code fourni) */
.fh-widget-slot{border:2px dashed var(--line-2);border-radius:14px;min-height:240px;display:grid;place-items:center;padding:40px;text-align:center;font:600 12px/1.5 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
/* lot 4c : la CSS core des columns (word-break:break-word) coupait les titres
   en plein mot ; on protege tous les headings */
h1,h2,h3,h4{overflow-wrap:normal;word-break:normal;hyphens:none}
.fh-panel{display:flex;flex-direction:column;gap:12px}
.fh-panel > *{margin-block-start:0}
.fh-panel__item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:20px 22px;font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:rgba(255,255,255,.88);margin:0}
.fh-panel__item strong{color:#fff}
@media(max-width:860px){
  .fh-tri{grid-template-columns:1fr}
  .fh-tri__cell{border-right:0;border-bottom:1px solid var(--line)}
  .fh-tri__cell:last-child{border-bottom:0}
}

/* page perspectives : sections propres a la maquette pages/perspectives.html */
.fh-h1--light{font-weight:200;font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-.02em;max-width:15ch}
.fh-h1--light strong{font-weight:600}
.fh-nl{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.fh-nl > *{margin-block-start:0}
.fh-nl__card{background:var(--base);border:1px solid var(--line);border-radius:14px;padding:28px}
.fh-nl__card > *{margin-block-start:0}
.fh-nl__note{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.5;color:var(--muted-2);margin:12px 0 0}
.fh-writers{display:grid;grid-template-columns:1fr 1.4fr;gap:44px;align-items:center}
.fh-writers > *{margin-block-start:0}
/* lot 6b : boucle de requete des numeros — gabarit fh/perspectives-card en blocs dynamiques */
ul.wp-block-post-template.fh-grid{list-style:none;padding:0;margin:20px 0 0}
.fh-article{background:var(--base)}
.fh-article > *{margin-block-start:0}
.fh-article .wp-block-post-featured-image{margin:0}
.fh-article .wp-block-post-featured-image img{width:100%;height:240px;object-fit:cover;display:block}
.fh-article__body{padding:20px 22px}
.fh-article__body > *{margin-block-start:0}
.fh-kicker a{color:inherit}
.fh-article__body .wp-block-post-title{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.25;margin:8px 0 10px}
.fh-article__body .wp-block-post-title a{color:var(--navy-ink)}
.fh-article__body .wp-block-post-excerpt{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.55;color:var(--muted);margin:0}
.fh-article__body .wp-block-post-excerpt__more-link{display:inline-block;font:600 11px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-top:8px}
.fh-article__date{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.4;color:var(--muted-2);margin:10px 0 0}
.wp-block-query .wp-block-query-pagination{margin-top:28px;font:600 12px/1 var(--font-display)}
/* lot 6c : hero editorial — filigrane embleme de la maquette, et fix H1 :
   la regle globale h1{color:navy-ink} rendait le titre invisible sur fond navy */
.fh-hero-ed{position:relative;overflow:hidden}
.fh-hero-ed > .fh-container{position:relative}
.fh-watermark{position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:340px;margin:0;opacity:.05}
.fh-watermark img{width:100%;height:auto}
.fh-section--navy .fh-h1{color:#fff}
/* lot 6c : derniers articles (boucle compacte) */
ul.wp-block-post-template.fh-postlist{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 36px}
.fh-post{border-bottom:1px solid rgba(28,36,75,.12);padding:0 0 14px}
.fh-post > *{margin-block-start:0}
.fh-post .wp-block-post-title{font-family:var(--font-display);font-size:15.5px;font-weight:600;line-height:1.3;margin:4px 0 6px}
.fh-post .wp-block-post-title a{color:var(--navy-ink)}
/* lot 6d : image a la Une des articles, ratio homogene aligne sur les cartes */
.fh-post .wp-block-post-featured-image{margin:0 0 12px}
.fh-post .wp-block-post-featured-image img{width:100%;height:180px;object-fit:cover;border-radius:var(--r-md);display:block}
@media(max-width:1023px){ul.wp-block-post-template.fh-postlist{grid-template-columns:1fr}}
/* page contact : sections propres a la maquette pages/contact.html */
.fh-motif{background:var(--base);border:1px solid var(--line);border-radius:14px;padding:26px;position:relative}
.fh-motif > *{margin-block-start:0}
.fh-motif--hot{border:2px solid var(--red)}
.fh-motif__badge{position:absolute;top:16px;right:16px;font:600 9px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 9px;border-radius:var(--r-pill);margin:0}
.fh-motif h3{font:600 18px/1.25 var(--font-display);color:var(--navy-ink);margin:16px 0 6px}
.fh-motif p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.fh-motif .fh-more{margin:0}
.fh-motif--hot .fh-more a{color:var(--red)}
.fh-motif--crise{background:var(--rose-50);border-color:var(--rose-100)}
.fh-motif--crise h3{color:var(--red-vivid)}
.fh-motif--crise .fh-more a{color:var(--red-vivid);text-transform:none;letter-spacing:0;font:700 13px/1 var(--font-display)}
.fh-contact{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.fh-contact > *{margin-block-start:0}
.fh-side{display:flex;flex-direction:column;gap:16px}
.fh-side > *{margin-block-start:0}
.fh-card--rdv{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px}
.fh-card--rdv > *{margin-block-start:0}
.fh-card--rdv h3{font:600 15px/1.2 var(--font-display);color:var(--navy-ink);margin:0 0 10px}
.fh-card--rdv p{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 14px} /* lot 36 : plafonne par le h3 de la carte (15px) */
.fh-card--crise{background:var(--navy-ink);color:#fff;border-radius:14px;padding:26px;border-top:4px solid var(--red-vivid)}
.fh-card--crise > *{margin-block-start:0}
.fh-card--crise .fh-kicker{color:var(--rose-200)}
.fh-card--crise .fh-tel a{font:700 18px/1.2 var(--font-display);color:#fff}
.fh-card--crise p{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.5;color:rgba(255,255,255,.8);margin:10px 0 0}
.fh-tel{margin:8px 0 0}
.fh-form-note{font:400 13px/1.5 var(--font-body);color:var(--muted-2);margin:4px 0 0}
@media(max-width:1023px){.fh-contact{grid-template-columns:1fr}}
/* page former : cartes feedback (verbatims) */
.fh-fbk{background:var(--base);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow)}
.fh-fbk > *{margin-block-start:0}
.fh-fbk p{font-family:var(--font-body);font-size:15px;font-style:italic;line-height:1.6;color:var(--muted);margin:0}
/* page notre-adn : photo dans l avatar bio */
.fh-bio__avatar{overflow:hidden;padding:0}
.fh-bio__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* page manifeste : corps editorial (mesure de lecture) */
.fh-prose{max-width:68ch}
.fh-prose > *{margin-block-start:0}
.editor-styles-wrapper .fh-prose > *{margin-block-start:0}
.fh-prose p{font-family:var(--font-body);font-size:clamp(16px,1.5vw,17px);font-weight:400;line-height:1.75;color:var(--ink);margin:0 0 1.5em;max-width:none}
.fh-prose p:last-child{margin-bottom:0}
.fh-section--navy .fh-article__meta{color:rgba(255,255,255,.6)}
ul.fh-principes{list-style:none;margin:0 0 1.5em;padding:0}
ul.fh-principes li{font-family:var(--font-body);font-size:clamp(16px,1.45vw,16.5px);font-weight:400;line-height:1.7;color:var(--ink);padding:4px 0 4px 22px;border-left:2px solid var(--gold);margin:0 0 18px}
ul.fh-principes li:last-child{margin-bottom:0}
.fh-exergue{border-left:3px solid var(--navy-ink);background:var(--surface);border-radius:var(--r-md);padding:24px 28px}
.fh-exergue > *{margin-block-start:0}
.editor-styles-wrapper .fh-exergue > *{margin-block-start:0}
.fh-exergue p{font-family:var(--font-body);font-size:clamp(16.5px,1.7vw,19px);font-style:italic;line-height:1.65;color:var(--navy-ink);margin:0}
figure.wp-block-pullquote.fh-quote.fh-quote--long blockquote{max-width:40ch}
figure.wp-block-pullquote.fh-quote.fh-quote--long p{font-size:clamp(18px,2.2vw,25px);max-width:40ch}
@media(max-width:1023px){
  .fh-nl,.fh-writers{grid-template-columns:1fr}
}

/* lot 15 : recette accueil, retouches validees */
/* 15.1 trio Mesurer/Comprendre/Agir — filet rouge au-dessus du titre (variante A) ;
   scope par modificateur : .fh-approche sert aussi sur la page former (autre trio, non concerne) */
.fh-approche--filets h3::before{content:"";display:block;width:28px;height:3px;background:var(--red);border-radius:2px;margin-bottom:14px}
/* 15.2 grille des 5 leviers : une seule rangee des 1200px (cartes compactees pour tenir),
   2 colonnes en dessous, 1 colonne en mobile ; en 2 colonnes la carte impaire de fin
   s'etire sur la rangee — jamais d'orpheline a gauche */
@media(min-width:1200px){
  .fh-grid--leviers{grid-template-columns:repeat(5,1fr);gap:18px}
  .fh-grid--leviers .fh-card__media{height:104px}
  .fh-grid--leviers .fh-card__body .fh-lede--sm{font-size:15px} /* lot 36 : suit la base .fh-lede--sm (plancher cartes 15px) */
}
@media(min-width:641px) and (max-width:1199.98px){
  .fh-grid--leviers{grid-template-columns:repeat(2,1fr)}
  .fh-grid--leviers > .fh-card:nth-child(odd):last-child{grid-column:1/-1}
}
@media(max-width:640px){.fh-grid--leviers{grid-template-columns:1fr}}
/* 15.3 regle generale : un lede suivi d'une liste a coches — 28px avant la liste, 13px entre items */
.fh-lede + .fh-checks{margin-block-start:28px;gap:13px}
/* 15.4 regle generale : respiration preuve -> logos — 72px entre les cartes preuve et l'eyebrow centre */
.wp-block-columns:has(.fh-proof) + .fh-eyebrow--center{margin-block-start:72px}
/* 15.5 a la Une #Perspectives en boucle de requete (1 element, categorie perspectives, date desc) */
ul.wp-block-post-template.fh-feature-loop{list-style:none;margin:0;padding:0}
.fh-feature-loop > li{margin-block-start:0}
.fh-feature .wp-block-post-title a{color:inherit}

/* lot 16 : apparition au scroll — l'etat masque n'existe que sous html.fh-anim,
   classe posee par assets/js/fh-reveal.js (sans JS : rien n'est jamais masque) ;
   reduced-motion coupe tout ici aussi, pas seulement dans le script ;
   opacity/transform uniquement : aucun reflow, aucun decalage de layout */
@media (prefers-reduced-motion: no-preference){
  html.fh-anim .fh-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  html.fh-anim .fh-reveal.fh-in{opacity:1;transform:none}
}

/* lot 17 : carrousel de logos clients (variante 1 : gris, couleur au survol).
   En base : un group .fh-logos-marquee + blocs image, rien d'autre. Sans JS le
   group rend en grille statique centree multi-lignes (regles de base ci-dessous) ;
   fh-marquee.js cree le viewport, clone la piste (aria-hidden) et pose
   .fh-marquee-on. Le mode defilant vit UNIQUEMENT sous cette classe, elle-meme
   sous media no-preference : reduced-motion = statique meme si le JS a tourne. */
.fh-logos-marquee{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 56px}
.fh-logos-marquee > *{margin:0}
.fh-logos-marquee img{height:44px;width:auto;max-width:180px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s}
.fh-logos-marquee img:hover{filter:none;opacity:1}
@media (prefers-reduced-motion: no-preference){
  .fh-marquee-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .fh-marquee.fh-marquee-on{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;animation:fh-marquee 32s linear infinite}
  /* espacement par marges symetriques (2x demi-gap), y compris au raccord :
     la periode de la piste est exactement sa demi-largeur, boucle sans couture */
  .fh-marquee.fh-marquee-on > *{margin:0 28px}
  .fh-marquee-viewport:hover .fh-marquee-on{animation-play-state:paused}
}
@media (prefers-reduced-motion: reduce){
  .fh-marquee [aria-hidden="true"]{display:none}
}
@keyframes fh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* lot 18 : page notre ADN */
/* 18.0 correctif de motif (preexistant, revele par la frise) : .fh-step p (0,1,1)
   battait .fh-step__num (0,1,0) — les numeros d'etapes perdaient leur Roboto Mono
   rouge partout (connect, crise, former aussi). Specificite remontee. */
.fh-step p.fh-step__num{font-family:var(--font-mono);font-size:13px;font-weight:700;line-height:1;color:var(--red);margin:0}
/* 18.1 hero : filet 56x3 sous le titre (specificite calee sur la regle core
   .wp-block-separator:not(...):not(...) qui impose 100px), lede elargi a 62ch */
.wp-block-separator.fh-rule.fh-rule--hero{width:56px;border-top-width:3px}
/* lot 18c : EXCEPTION pleine largeur — dans un hero a image (cover), le lede garde
   sa mesure (60ch, 62ch pour la variante --wide de l'ADN) : le texte doit rester
   sur la partie dense de l'overlay (contraste AA) */
.wp-block-cover.fh-hero .fh-lede{max-width:60ch}
.wp-block-cover.fh-hero .fh-hero__inner > .fh-lede--wide{max-width:62ch}
/* 18.2 frise chronologique : rail 2px au-dessus des cartes paradigmes, un jalon
   rond par carte (tige vers la carte), "Aujourd'hui" (derniere carte) en jalon
   plein avec halo ; sous 900px : empilement simple, rail et jalons masques */
.fh-timeline{position:relative;padding-top:36px;grid-template-columns:repeat(4,1fr)} /* rangee unique garantie tant que le rail est visible */
.fh-timeline::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--red),var(--rose-300))}
.fh-timeline > .fh-step{position:relative}
.fh-timeline > .fh-step::before{content:"";position:absolute;top:-45px;left:26px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--red)}
.fh-timeline > .fh-step::after{content:"";position:absolute;top:-27px;left:34px;width:2px;height:27px;background:var(--rose-300)}
.fh-timeline > .fh-step:last-child::before{background:var(--red);box-shadow:0 0 0 6px rgba(172,72,72,.14)}
@media(max-width:899.98px){
  .fh-timeline{padding-top:0;grid-template-columns:1fr}
  .fh-timeline::before,.fh-timeline > .fh-step::before,.fh-timeline > .fh-step::after{content:none}
}
/* 18.4 icones charte des cartes consequences (hauteur ~46px, proportions gardees) */
.fh-icon--lg img{width:auto;height:46px}
/* 18.5 filet rouge au-dessus d'un h2 (meme motif que le trio de l'accueil) */
.fh-h2--filet::before{content:"";display:block;width:28px;height:3px;background:var(--red);border-radius:2px;margin-bottom:14px}
/* 18.6 reseau 50+ : carte 2 colonnes, image mur de visages en cover avec fondu
   vers la surface cote texte ; sous 900px : empilement, image en bandeau 220px */
.fh-network{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-top:24px}
.fh-network > *{margin-block-start:0}
.editor-styles-wrapper .fh-network > *{margin-block-start:0}
.fh-network__body{padding:38px 42px}
.fh-network__body p{font-family:var(--font-body);font-size:14.5px;font-weight:400;line-height:1.55;color:var(--ink);max-width:52ch;margin:14px 0 0}
.fh-network__body p.fh-network__num{font-family:var(--font-mono);font-size:clamp(38px,4.4vw,54px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--red);max-width:none;margin:0}
.fh-network__media{position:relative;margin:0}
.fh-network__media img{width:100%;height:100%;object-fit:cover;display:block}
.fh-network__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,transparent 45%)}
@media(max-width:899.98px){
  .fh-network{grid-template-columns:1fr}
  .fh-network__media{height:220px}
  .fh-network__media::after{background:linear-gradient(180deg,var(--surface) 0%,transparent 45%)}
}

/* lot 19 : page manifeste */
/* 19.1 hero photo : meta discrete (date) lisible sur l'overlay */
.wp-block-cover.fh-hero .fh-article__meta{color:rgba(255,255,255,.66);margin:14px 0 0}
/* 19.2 les 5 enjeux en accordeon — mecanique native details/summary du motif
   fh-faq, AUCUN JavaScript : numerotation 01-05 en compteur CSS (Roboto Mono
   rouge), "+" rouge qui pivote en croix a l'ouverture, titre du volet ouvert
   en rouge ; titre et numero ranges a gauche, le "+" pousse a droite */
/* (generalise au lot 22) variante .fh-faq--flip : titre a gauche, "+" rouge qui
   pivote en croix a l'ouverture, titre du volet ouvert en rouge — servie par le
   manifeste (avec numerotation .fh-enjeux) et les formations de la page former */
.fh-faq.fh-faq--flip summary{justify-content:flex-start}
.fh-faq.fh-faq--flip summary::after{margin-left:auto}
@media (prefers-reduced-motion: no-preference){
  .fh-faq.fh-faq--flip summary::after{transition:transform .25s ease}
}
.fh-faq.fh-faq--flip details[open] summary::after{content:"+";transform:rotate(45deg)}
.fh-faq.fh-faq--flip details[open] summary{color:var(--red)}
.fh-faq.fh-enjeux{counter-reset:enjeu;margin-top:26px}
.fh-faq.fh-enjeux summary::before{counter-increment:enjeu;content:counter(enjeu,decimal-leading-zero);font-family:var(--font-mono);font-size:13px;font-weight:700;line-height:1;color:var(--red)}
/* 19.3 bloc contact final : grille navy 1.4fr/1fr, colonne droite au filet
   vertical (motif fh-urgence) ; empilement sous 900px */
.fh-cta-duo{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.fh-cta-duo > *{margin-block-start:0}
.editor-styles-wrapper .fh-cta-duo > *{margin-block-start:0}
.fh-cta-duo .fh-lede{margin:16px 0 0}
@media(max-width:899.98px){
  .fh-cta-duo{grid-template-columns:1fr}
  .fh-cta-duo .fh-urgence{border-left:0;padding-left:0}
}

/* lot 20 : page perspectives */
/* 20.1 hero dynamique : le lien vers le dernier numero est un bloc coeur
   read-more (permalien du post courant de la boucle, aucun slug en dur) ;
   il rend un <a> nu, style ici comme le motif fh-more--light */
a.wp-block-read-more.fh-more--light{font:600 13px/1 var(--font-display);color:#fff;text-transform:none;letter-spacing:0;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px}
/* 20.2 pagination coeur des derniers articles, sobre charte : Raleway 600,
   liens navy, page courante en rouge (consigne tronquee apres "stylee" —
   hypothese charte signalee au rapport) */
.wp-block-query-pagination{font:600 12px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase}
.wp-block-query-pagination a{color:var(--navy)}
.wp-block-query-pagination .page-numbers{margin-right:6px}
.wp-block-query-pagination .page-numbers.current{color:var(--red)}

/* lot 21 : attribution de citation liee (cite -> lien discret, herite la couleur du motif) */
figure.wp-block-pullquote.fh-quote cite a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px}

/* lot 22 : page former — feedbacks en carrousel continu (marquee generalise) */
/* etat statique (sans JS) : les 6 cartes en flux centre, gap 22 */
.fh-fbk-marquee{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px}
.fh-fbk-marquee > *{margin:0}
/* carte maquette : ~356px, fond surface, radius 14, guillemet decoratif rouge en coin */
.fh-fbk-marquee .fh-fbk{position:relative;width:356px;flex:none;background:var(--surface);border:0;border-radius:14px;box-shadow:none;padding:46px 24px 24px}
.fh-fbk-marquee .fh-fbk::before{content:"\00AB";position:absolute;top:10px;left:20px;font-family:var(--font-display);font-size:44px;font-weight:700;line-height:1;color:var(--red);opacity:.35}
@media (prefers-reduced-motion: no-preference){
  /* fondu des bords propre aux feedbacks (6/94) et tour plus lent (45s) */
  .fh-marquee-viewport:has(.fh-fbk-marquee){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .fh-fbk-marquee.fh-marquee-on{animation-duration:45s}
  .fh-fbk-marquee.fh-marquee-on > *{margin:0 11px}
}
@media (max-width:640px){
  .fh-fbk-marquee .fh-fbk{width:85vw}
}

/* footer : logo carre blanc (embleme + wordmark + baseline) */
.fh-footer .fh-emblem{margin:0}
.fh-footer .fh-emblem img{height:128px;width:auto}
.fh-footer .wp-block-column a{overflow-wrap:anywhere}

/* lot 31 : LinkedIn — icone au header (remplace le telephone), lien au footer */
.fh-header__lk{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);color:var(--navy-ink);transition:color .2s,background-color .2s}
.fh-header__lk svg{width:21px;height:21px}
.fh-header__lk:hover{color:var(--red);background:var(--surface);opacity:1}
.fh-footer .fh-footer__lk{display:inline-flex;align-items:center;gap:9px;margin:18px 0 0;color:#fff;font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1.3}
.fh-footer__lk svg{width:18px;height:18px;flex:none}
.fh-footer .fh-footer__lk:hover{color:var(--gold);opacity:1}

/* lot logos : rangee references au footer — pastilles blanches, sinon illisibles
   sur navy. french-care.png a ajouter ici meme des televersement (manquant au lot). */
.fh-footer__labels{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px}
.fh-footer__labels a{display:flex}
/* border-box global (l.19) : 58px moins padding = 40px utiles pour le label */
.fh-footer__labels img{height:58px;width:auto;background:#fff;padding:9px 14px;border-radius:10px}

/* ==================================================================
   lot 32 : gabarit d'article (templates/single.html)
   ================================================================== */
/* breadcrumb : le titre courant est un post-title rendu en <p> (level 0) ;
   flex maison (pas de layout flex core) pour maitriser le gap sans lutter
   avec les regles de conteneur generees par WordPress */
.fh-breadcrumb__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.fh-breadcrumb .fh-breadcrumb__current{color:var(--navy)}

/* hero editorial sur surface : kicker mono, H1 Raleway 200 (fh-h1--light),
   meta auteur + date, filet 56x3 (fh-rule--hero) */
.fh-single-hero__kicker{font:700 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 16px}
.fh-single-hero .wp-block-post-title{max-width:26ch} /* les titres d'articles sont plus longs que les H1 de pages (15ch) */
.fh-single-hero__meta{display:flex;flex-wrap:wrap;column-gap:8px;margin-top:18px}
.fh-single-hero__meta > *{margin:0;font:400 13px/1.5 var(--font-body);color:var(--muted)}
.fh-single-hero .fh-rule--hero{margin-top:22px;margin-bottom:0}

/* image a la une debordante sous le hero : le hero ne s'etire que si la
   figure existe (:has) — pas d'image = pas de trou, hero standard */
.fh-single:has(.fh-single-cover) .fh-single-hero{padding-bottom:clamp(96px,11vw,132px)}
.fh-single-cover{max-width:min(880px,calc(100% - 48px));margin:clamp(-96px,-8vw,-56px) auto 0;position:relative;z-index:1}
.fh-single-cover img{width:100%;max-height:400px;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px -30px rgba(28,36,75,.55)}
.fh-single:has(.fh-single-cover) .fh-single-body{padding-top:clamp(40px,5vw,56px)}

/* corps : largeur contentSize standard (portee par le layout constrained du
   bloc post-content, PAS de mesure 68ch forcee — le contenu Elementor des
   posts reels garde ses mises en page). Les styles de prose ne visent que
   les enfants directs simples : les structures Elementor ne sont pas touchees. */
.fh-single-body .wp-block-post-content{font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.75;color:var(--ink)}
.fh-single-body .wp-block-post-content > p{margin:0 0 1.3em}
.fh-single-body .wp-block-post-content > h2{font:600 26px/1.25 var(--font-display);color:var(--navy-ink);margin:1.5em 0 .6em}
.fh-single-body .wp-block-post-content > h3{font:600 20px/1.3 var(--font-display);color:var(--navy-ink);margin:1.4em 0 .55em}
.fh-single-body .wp-block-post-content > ul,
.fh-single-body .wp-block-post-content > ol{margin:0 0 1.3em;padding-left:24px}
.fh-single-body .wp-block-post-content > blockquote{margin:1.5em 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);font-family:var(--font-display);font-size:19px;line-height:1.55;color:var(--navy-ink)}
.fh-single-body .wp-block-post-content > p a{text-decoration:underline;text-underline-offset:3px}

/* bloc auteur en fin d'article : carte discrete au filet --line, avatar rond
   72px, nom Raleway 600 ; masque cote PHP si la bio est vide */
.fh-author-card{max-width:min(780px,100%);margin:56px auto 0;display:flex;gap:20px;align-items:flex-start;background:var(--base);border:1px solid var(--line);border-radius:14px;padding:26px}
.fh-author-card .wp-block-post-author__avatar{flex:none}
.fh-author-card .wp-block-post-author__avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.fh-author-card .wp-block-post-author__name{font:600 16px/1.3 var(--font-display);color:var(--navy-ink);margin:0}
.fh-author-card .wp-block-post-author__bio{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.6;color:var(--muted);margin:8px 0 0}

/* CTA final : bouton or (doctrine lot 37 : l'or = abonnement webzine + Pulse) */
.wp-block-button.fh-btn--gold .wp-block-button__link{background:var(--gold);color:var(--navy-ink)}
.wp-block-button.fh-btn--gold .wp-block-button__link:hover{filter:brightness(1.05)}
.fh-single-cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.fh-single-cta__row > *{margin:0}

/* ==========================================================================
   Lot 35 — recherche #Perspectives (templates/search.html, forhuman/recherche)
   ========================================================================== */

/* hero de resultats sur surface : kicker mono rouge (meme dessin que le
   single), H1 = terme recherche (fh-h1--light, injecte cote PHP), compteur,
   filet 56x3, champ de re-recherche */
.fh-search-hero__kicker{font:700 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 16px}
.fh-search-hero .fh-h1{max-width:26ch;overflow-wrap:break-word} /* un terme long ne doit pas deborder */
.fh-search-resultats{font:400 13px/1.5 var(--font-body);color:var(--muted);margin:18px 0 0}
.fh-search-hero .fh-rule--hero{margin-top:22px;margin-bottom:0}
.fh-search-hero .fh-search-form{margin-top:26px}

/* champ core/search restyle (hero + bandeau navy) : champ arrondi, bouton
   rouge pilule — meme etat focus que fh-input */
.fh-search-form{max-width:560px}
.fh-search-form .wp-block-search__inside-wrapper{display:flex;gap:10px}
.fh-search-form .wp-block-search__input{flex:1;min-width:0;padding:13px 22px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.4;background:var(--surface-1);color:var(--ink)} /* lot 36 : 16px mini, anti-zoom iOS */
.fh-search-form .wp-block-search__input:focus{outline:none;border-color:var(--red-vivid);box-shadow:0 0 0 3px rgba(205,26,71,.15)}
.fh-search-form .wp-block-search__button{border:0;cursor:pointer;margin:0;background:var(--red);color:#fff;font:600 13px/1 var(--font-display);letter-spacing:.02em;padding:13px 26px;border-radius:var(--r-pill)}
.fh-search-form .wp-block-search__button:hover{filter:brightness(1.07)}
@media(max-width:480px){
  .fh-search-form .wp-block-search__inside-wrapper{flex-wrap:wrap}
  .fh-search-form .wp-block-search__button{flex:1 1 100%}
}

/* etat vide : phrase lede, suggestions cliquables, lien vers les numeros */
.fh-search-empty > *{margin-block-start:0}
.fh-search-suggestions{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.fh-search-suggestions a{text-decoration:underline;text-underline-offset:3px}
.fh-search-empty .fh-more{margin-top:22px}

/* bandeau navy de la page #Perspectives : kicker or (fh-eyebrow sur navy),
   phrase au compteur vivant, champ de recherche */
.fh-search-band{padding-block:clamp(44px,5vw,72px)}
.fh-search-band .fh-search-nb-articles{font-family:var(--font-body);font-size:clamp(16px,1.4vw,17px);line-height:1.62;color:rgba(255,255,255,.85);max-width:60ch;margin:0}
.fh-search-band .fh-search-form{margin-top:22px}
.fh-search-band .wp-block-search__input{background:#fff}

/* couverture dynamique du dernier numero ([fh_derniere_couverture]) */
img.fh-derniere-couverture{max-width:100%;height:auto;display:block}

/* ==========================================================================
   Lot 37 — pages solutions Pulse et Enquêtes internes & administratives
   (motifs nouveaux minimaux ; tout le reste reutilise les motifs existants)
   ========================================================================== */

/* hero navy plat des pages solutions (sans photo) : H1 light a la mesure des
   maquettes, lede borne (texte sur fond dense, meme esprit que les heros cover) */
.fh-solhero .fh-h1{font-size:clamp(32px,4.4vw,48px);line-height:1.12;max-width:24ch}
.fh-solhero .fh-lede{max-width:60ch}

/* h2 de section façon maquettes lot 37 : Raleway light, segments en 600 */
.fh-h2--light{font-weight:200}
.fh-h2--light strong{font-weight:600}

/* fh-grid forcee a 3 colonnes (6 cartes "comment ca marche", objectivation) */
@media(min-width:861px){.fh-grid--3{grid-template-columns:repeat(3,1fr);gap:22px}}

/* bloc confidentialite Pulse : grand chiffre sur carte navy + garanties */
.fh-trust{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;margin-top:26px}
.fh-trust > *{margin-block-start:0}
.fh-trust__big{background:var(--navy-ink);border-radius:16px;padding:30px;text-align:center}
.fh-trust__big > *{margin-block-start:0}
/* lot 38a : specificite (0,2,1) pour battre .fh-trust__big p (0,1,1) qui suit —
   meme motif que fh-step__num au lot 18 ; taille fluidifiee ~64px */
.fh-trust__big p.fh-trust__num{font-family:var(--font-display);font-weight:200;font-size:clamp(48px,5vw,64px);line-height:1;color:#fff;margin:0}
.fh-trust__big p.fh-trust__num strong{font-weight:600;color:var(--gold)}
.fh-trust__big p{font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.75);margin:10px 0 0}
ul.fh-trust__list{list-style:none;margin:0;padding:0}
.fh-trust__list li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line);position:relative;font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.6;color:var(--muted)}
.fh-trust__list li:last-child{border-bottom:0}
.fh-trust__list li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:2px;background:var(--red)}
.fh-trust__list li strong{color:var(--navy-ink);font-weight:500}
@media(max-width:860px){.fh-trust{grid-template-columns:1fr}}

/* duo de cartes 1fr/1fr (Pulse seul / avec connect ; employeurs publics / prives) */
.fh-duo2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.fh-duo2 > *{margin-block-start:0}
.fh-duo2__card{background:var(--base);border:1px solid var(--line);border-radius:16px;padding:28px}
.fh-duo2__card > *{margin-block-start:0}
.fh-duo2__card h3{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.3;color:var(--navy-ink);margin:10px 0 8px}
.fh-duo2__card p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.65;color:var(--muted);margin:0}
.fh-duo2__card--navy{background:var(--navy-ink);border-color:var(--navy-ink)}
.fh-duo2__card--navy h3{color:#fff}
.fh-duo2__card--navy p{color:rgba(255,255,255,.85)}
.fh-duo2__card--navy .fh-kicker{color:var(--gold)}
/* lot 39 : lien de pied de carte duo2 (section ecosysteme connect) — meme dessin
   que le lien des portes contact, or sur la carte navy */
.fh-duo2__card .fh-more{margin:6px 0 0}
.fh-duo2__card .fh-more a{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none;color:var(--red)}
.fh-duo2__card--navy .fh-more a{color:var(--gold)}
@media(max-width:860px){.fh-duo2{grid-template-columns:1fr}}

/* callout navy (protection legale du signalement) */
.fh-callout{margin-top:22px;background:var(--navy-ink);border-radius:12px;padding:20px 24px;font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.6;color:rgba(255,255,255,.85)}
.fh-callout strong{color:var(--gold);font-weight:500}

/* les 4 temps du dispositif : rangees numero mono rouge / contenu, filet bas */
.fh-temps > *{margin-block-start:0}
.fh-temps__item{display:grid;grid-template-columns:88px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--line)}
.fh-temps__item > *{margin-block-start:0}
.fh-temps__item p.fh-temps__num{font-family:var(--font-mono);font-weight:500;font-size:30px;line-height:1;color:var(--red);margin:0}
.fh-temps__item h3{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3;color:var(--navy-ink);margin:0 0 8px}
.fh-temps__item p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.65;color:var(--muted);max-width:72ch;margin:0}
.fh-temps__item p.fh-temps__who{display:inline-block;font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 0}
@media(max-width:860px){.fh-temps__item{grid-template-columns:56px 1fr}}

/* option enquete administrative : encart pointille or sur fond paper */
.fh-option{margin-top:26px;border:1.5px dashed var(--gold);border-radius:14px;padding:22px 26px;background:var(--paper)}
.fh-option > *{margin-block-start:0}
.fh-option h4{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.3;color:var(--navy-ink);margin:0 0 6px}
.fh-option p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.6;color:var(--muted);margin:0}

/* grands chiffres de l'objectivation (8 criteres / 1 score / 2 consentements) */
p.fh-objnum{font-family:var(--font-display);font-weight:200;font-size:44px;line-height:1;color:var(--red);margin:0 0 8px}
p.fh-objnum strong{font-weight:600}

/* titre des cartes citation COPSOQ (le p italique vient du motif fh-fbk) */
.fh-fbk h3{font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1.3;color:var(--navy-ink);margin:0 0 6px}

/* ==========================================================================
   Lot 38 — page contact : trio de portes + section « Recevoir une proposition »
   (moteur CF7 ; le formulaire est style via .fh-prop-form, champs 16px mini)
   ========================================================================== */

/* trio de portes : cartes sur la grille fh-grid--3, porte primaire au filet rouge */
.fh-door{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--base);border:1px solid var(--line);border-radius:14px;padding:26px}
.fh-door > *{margin-block-start:0}
.fh-door--primary{border:2px solid var(--red)}
p.fh-door__badge{position:absolute;top:-11px;left:22px;background:var(--red);color:#fff;font-family:var(--font-display);font-weight:700;font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);margin:0}
.fh-door h3{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.3;color:var(--navy-ink);margin:0}
.fh-door p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.6;color:var(--muted);flex:1;margin:0}
.fh-door p.fh-door__badge{flex:none}
.fh-door .fh-more{margin:0;flex:none}
.fh-door .fh-more a{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none;color:var(--red)}

/* section proposition : 380px d'argumentaire / formulaire, empilee sous 880 */
.fh-prop{display:grid;grid-template-columns:380px 1fr;gap:44px;align-items:start;margin-top:26px}
.fh-prop > *{margin-block-start:0}
.fh-prop__side > *{margin-block-start:0}
.fh-prop__side .fh-lede--sm{margin:10px 0 0;line-height:1.7}

/* encart 48h : navy, chiffre or Raleway light, TEXTE BLANC */
.fh-chip48{display:flex;gap:12px;align-items:baseline;background:var(--navy-ink);border-radius:12px;padding:18px 22px;margin-top:22px}
.fh-chip48 > *{margin-block-start:0}
.fh-chip48 p{font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.5;color:#fff;margin:0}
.fh-chip48 p.fh-chip48__h{font-family:var(--font-display);font-weight:200;font-size:34px;line-height:1;color:var(--gold);flex:none}
.fh-chip48 p.fh-chip48__h strong{font-weight:600}

/* coquille du formulaire CF7 : carte blanche, champs 16px mini (zoom iOS),
   le markup interieur vient du modele CF7 (fh-form-row / fh-form-field) */
.fh-prop-form{background:var(--base);border:1px solid var(--line);border-radius:16px;padding:30px}
.fh-prop-form .fh-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}
.fh-prop-form .fh-form-field{margin:0}
.fh-prop-form label{display:block;font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.3;color:var(--navy-ink);margin-bottom:6px}
.fh-prop-form input:not([type=checkbox]):not([type=submit]),.fh-prop-form select,.fh-prop-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.4;color:var(--ink);background:var(--base)}
.fh-prop-form input:focus,.fh-prop-form select:focus,.fh-prop-form textarea:focus{outline:none;border-color:var(--red-vivid);box-shadow:0 0 0 3px rgba(205,26,71,.15)}
.fh-prop-form textarea{min-height:90px;resize:vertical}
/* cases a cocher produits : grille 2 colonnes encadree (markup CF7 wpcf7-checkbox) */
.fh-prop-form .wpcf7-checkbox{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0}
.fh-prop-form .wpcf7-checkbox .wpcf7-list-item{display:block;margin:0}
.fh-prop-form .wpcf7-checkbox label{display:flex;gap:8px;align-items:center;font-family:var(--font-body);font-weight:400;font-size:13.5px;line-height:1.4;color:var(--ink);margin:0;text-transform:none}
.fh-prop-form .wpcf7-checkbox input{width:auto;accent-color:var(--red)}
/* acceptation RGPD : discrete, case alignee en tete */
.fh-prop-form .wpcf7-acceptance .wpcf7-list-item{margin:0}
.fh-prop-form .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.5;color:var(--muted-2);margin:6px 0 18px;text-transform:none}
.fh-prop-form .wpcf7-acceptance input{width:auto;margin-top:3px;accent-color:var(--red)}
/* bouton d'envoi : meme dessin que le .send de la maquette */
.fh-prop-form input[type=submit]{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:#fff;background:var(--red);border:0;border-radius:var(--r-sm);padding:15px 26px;cursor:pointer;transition:filter .2s}
.fh-prop-form input[type=submit]:hover{filter:brightness(1.07)}
@media(max-width:880px){
  .fh-prop{grid-template-columns:1fr}
  .fh-prop-form .fh-form-row,.fh-prop-form .wpcf7-checkbox{grid-template-columns:1fr}
}

/* lot 44 : lien or sur fond navy (section podcast de #Perspectives) —
   meme dessin que fh-more--light, en or souligne or */
.fh-more--gold a{font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--gold);border-bottom:1px solid rgba(233,190,102,.5);padding-bottom:2px}

/* ==========================================================================
   Lot 47 — gabarit « Landing cliente » (pages clientes converties, charte
   2026, ACCENTS AUX COULEURS DU CLIENT via variables scopees par page).
   Structure charte ; chaque page pose sa classe (ex. fh-landing--yves-rocher)
   qui surcharge --client-accent / --client-dark. Sans surcharge : charte.
   ========================================================================== */
.fh-landing{--client-accent:var(--red);--client-dark:var(--navy)}
.fh-landing-wrap{max-width:960px;margin:0 auto;padding-left:24px;padding-right:24px}

/* en-tete minimal : logo forhuman a gauche, partenariat client a droite */
.fh-landing-hd{border-bottom:1px solid var(--line);padding:16px 0}
.fh-landing-hd__in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fh-landing-hd__in > *{margin-block-start:0}
.fh-landing-hd .fh-brand{margin:0}
.fh-landing-hd .fh-brand img{height:28px;width:auto}
/* 47c : l'en-tete ne porte plus que le logo forhuman ; le partenariat vit
   dans le hero en duo — message a gauche, logo client en grand a droite
   (taille naturelle du fichier, jamais etire), mention discrete au-dessus */
.fh-landing-hero-duo{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center;padding:38px 0 8px}
.fh-landing-hero-duo > *{margin-block-start:0}
.fh-landing-hero-duo .fh-landing-hero{padding:0}
.fh-landing-partner{display:flex;flex-direction:column;align-items:center;gap:12px}
.fh-landing-partner > *{margin-block-start:0}
.fh-landing .fh-landing-partner p{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1;color:var(--muted-2);margin:0}
.fh-landing-partner img{max-width:100%;height:auto;display:block}
.fh-landing-partner .wp-block-image{margin:0}

/* banniere du client : image existante, cadre arrondi */
.fh-landing-ban{margin:26px 0 0}
.fh-landing-ban img{width:100%;height:auto;border-radius:16px;display:block}

/* hero editorial : kicker mono accent, H1 light, filet accent, lede */
.fh-landing-hero{padding:38px 0 8px}
.fh-landing-hero > *{margin-block-start:0}
.fh-landing p.fh-landing-kicker{font-family:var(--font-mono);font-weight:700;font-size:11px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--client-accent);margin:0}
.fh-landing-hero h1{font-family:var(--font-display);font-weight:200;font-size:clamp(28px,4vw,40px);line-height:1.15;color:var(--navy-ink);max-width:26ch;margin:10px 0 0}
.fh-landing-hero h1 strong{font-weight:600}
.fh-landing .wp-block-separator.fh-rule:not(.is-style-wide){border-top-color:var(--client-accent);width:56px;border-top-width:3px;margin:20px 0}
.fh-landing p{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.7;color:var(--muted)}
.fh-landing-hero p{max-width:64ch;margin:14px 0 0}

/* duo texte / carte formulaire (variante 1) */
.fh-landing-duo{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start;padding:36px 0 52px}
.fh-landing-duo > *{margin-block-start:0}
.fh-landing-txt > *{margin-block-start:0}
.fh-landing-txt p{margin:0 0 18px;max-width:64ch}
/* bouton calendrier : fonce client */
.fh-landing-cal{margin:6px 0 0}
.fh-landing-cal a{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:13px;line-height:1;letter-spacing:0;text-transform:none;color:#fff;background:var(--client-dark);padding:14px 22px;border-radius:var(--r-sm)}
.fh-landing-cal a:hover{filter:brightness(1.08);opacity:1}
/* carte formulaire : le CF7 EXISTANT est insere tel quel dedans ; la classe
   fh-prop-form (lot 38) porte les champs a 16px — anti-zoom iOS */
.fh-landing-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px}
.fh-landing-form > *{margin-block-start:0}
.fh-landing-form h3{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.3;color:var(--navy-ink);margin:0 0 14px}
.fh-landing-form.fh-prop-form input:not([type=checkbox]):not([type=submit]),.fh-landing-form.fh-prop-form select,.fh-landing-form.fh-prop-form textarea{background:var(--base)}
.fh-landing .fh-prop-form input[type=submit]{background:var(--client-accent)}

/* grille videos (variante 2) : embeds existants conserves */
.fh-landing-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:22px 0 52px}
.fh-landing-vgrid > *{margin-block-start:0}
.fh-landing-v{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--base)}
.fh-landing-v > *{margin-block-start:0}
.fh-landing-v iframe,.fh-landing-v video{width:100%;display:block;aspect-ratio:16/9;border:0}
.fh-landing-v .wp-block-embed{margin:0}
.fh-landing-v p{font-family:var(--font-display);font-weight:600;font-size:13.5px;line-height:1.35;color:var(--navy-ink);padding:12px 14px;margin:0}

/* pied minimal navy (dans le gabarit landing-cliente.html) */
.fh-landing-ft{background:var(--navy-ink);padding:22px 0;margin-top:26px}
.fh-landing-ft__in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.fh-landing-ft__in > *{margin-block-start:0}
.fh-landing-ft p{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);margin:0}
.fh-landing-ft p strong{color:#fff;font-weight:500}
.fh-landing-ft a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px}

@media(max-width:820px){
  .fh-landing-duo{grid-template-columns:1fr}
  .fh-landing-vgrid{grid-template-columns:1fr}
  .fh-landing-hero-duo{grid-template-columns:1fr}
}

/* palette du pilote yves-rocher : RELEVEE A L'EXACTE sur le _elementor_data
   de la page 16780 — #FF8200 (fond de section CTA + couleur du titre),
   #D7CFC5 (fond de section beige, servi en soft). La page n'a AUCUNE couleur
   sombre cliente : --client-dark reste la charte (navy). */
.fh-landing--yves-rocher{--client-accent:#FF8200;--client-soft:#D7CFC5}

/* ==========================================================================
   Lot 48a — palettes des 11 clientes de la serie (RELEVEES A L'EXACTE sur le
   _elementor_data de chaque page ; usages cites ; --client-soft documente
   meme quand la bande banniere est posee en style de bloc natif dans le
   contenu, comme au pilote). Sans surcharge : repli charte (.fh-landing).
   ========================================================================== */
/* pfc (24121) : #AC4848 fond de bande + icones (= rouge charte, hasard heureux), #626162 titre */
.fh-landing--pfc{--client-accent:#AC4848;--client-dark:#626162}
/* fondation-abbe-pierre (22249) : #EC644A corail — fond de bande + titres */
.fh-landing--fondation-abbe-pierre{--client-accent:#EC644A}
/* gs-trust (21342) : #626162 gris — fond de bande, textes, titres (couleur unique) */
.fh-landing--gs-trust{--client-accent:#626162}
/* prestasocial (24174) : #AC4848 titres, #A75D64 vieux-rose fond de bande */
.fh-landing--prestasocial{--client-accent:#AC4848;--client-soft:#A75D64}
/* intermedes (26601) : #D1041D rouge — fond de bande + titres */
.fh-landing--intermedes{--client-accent:#D1041D}
/* yves-rocher permanence (21566) et rennes (27678) : meme identite que le pilote */
.fh-landing--yr-permanence{--client-accent:#FF8200;--client-soft:#D7CFC5}
.fh-landing--yr-rennes{--client-accent:#FF8200;--client-soft:#D7CFC5}
/* stanhome (27038) : #131383 bleu profond titres/textes, #FCCC04 jaune fond de bande */
.fh-landing--stanhome{--client-accent:#131383;--client-soft:#FCCC04}
/* fev st-etienne (27001) et trappes (26974) : #B9062C rouge sombre bande, #817F7D gris colonne */
.fh-landing--fev-st-etienne{--client-accent:#B9062C;--client-soft:#817F7D}
.fh-landing--fev-trappes{--client-accent:#B9062C;--client-soft:#817F7D}
/* bosch-autodiagnostic (20426) : AUCUNE couleur cliente dans le _elementor_data
   (contenu 746 octets, sans reglage de couleur) — repli charte assume */
.fh-landing--bosch{}

/* lot 48c : correctif debordement 390 des permanences — le widget Calendly
   impose min-width:320px en style inline ; dans la carte (padding 26 + wrap),
   son min-content depasse la largeur utile mobile et fait exploser la grille.
   On l'autorise a retrecir (l'iframe Calendly est responsive), et garde-fou
   generique contre l'explosion min-content des grilles du gabarit landing. */
.fh-landing-duo > *,.fh-landing-hero-duo > *{min-width:0}
.fh-landing-form .calendly-inline-widget{min-width:0!important;max-width:100%}

/* lot 48d : derogation EXCEPTIONNELLE et SCOPEE (retour visuel Olivier) —
   la legende sous la photo de la psychologue est trop grande sur la page
   Stanhome UNIQUEMENT (les pages Yves Rocher restent telles quelles tant
   qu'Olivier ne les a pas vues). 14px ≥ plancher 13 de la doctrine typo. */
.fh-landing--stanhome .fh-landing-form p{font-size:14px;line-height:1.55}

/* lot 49b : chiffres absenteisme — sources dans les cartes chiffre.
   Specificites (0,2,1) d'emblee (piège recurrent des règles generiques). */
.fh-claim > div{flex:1;min-width:240px}
.fh-claim > div > *{margin-block-start:0}
.fh-claim > div p{font-family:var(--font-body);font-weight:400;font-size:15.5px;line-height:1.55;color:var(--ink);max-width:52ch;margin:0}
.fh-claim > div p.fh-source{font-family:var(--font-body);font-style:italic;font-weight:400;font-size:13px;line-height:1.5;color:var(--muted-2);margin:8px 0 0;max-width:none}
.fh-trust__big p.fh-source{font-family:var(--font-body);font-style:italic;font-weight:400;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6);margin:12px 0 0}

/* ============================================================
   Lot 51 — Sommaire de numero (gabarit sommaire-numero.html),
   maquette maquette-sommaire-numero.html v3. Paragraphes
   utilitaires en specificite (0,2,1) d'emblee (piege recurrent
   des regles generiques .scope p). Planchers typo lot 36
   appliques : 15,5 -> 16 (edito), 14,5 -> 15 (cartes),
   metas et sources a 13.
   ============================================================ */

/* Hero du numero : couverture (image a la une) + identite */
.fh-som-hero{padding:56px 0}
.fh-som-hero__in{display:grid;grid-template-columns:340px 1fr;gap:52px;align-items:center}
.fh-som-hero__in > *{margin-block-start:0;min-width:0}
.fh-som-couv{margin:0}
.fh-som-couv img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.35);display:block}
.fh-som-hero h1{font-family:var(--font-display);font-weight:200;font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:0;color:#fff;margin:12px 0 0}
.fh-som-hero h1 strong{font-weight:600}
.fh-som-hero p.fh-som-meta{font-family:var(--font-mono);font-weight:400;font-size:13px;line-height:1.5;color:#8E9AB8;margin:14px 0 0;max-width:none}
.fh-som-hero p.fh-som-chapo{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.7;color:#DDE2EE;max-width:56ch;margin:18px 0 0}

/* Edito : carte blanche a filet rouge, sur fond surface */
.fh-som-edito{background:var(--base);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:30px 34px;max-width:820px}
.fh-som-edito > *{margin-block-start:0}
.fh-som-edito h2{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.3;color:var(--navy-ink);margin:8px 0 10px}
.fh-som-edito p{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.7;color:var(--muted);margin:0}
.fh-som-edito p.fh-som-sig{font-size:13px;line-height:1.5;color:var(--muted-2);margin:14px 0 0}
.fh-som-edito p.fh-som-lire{margin:12px 0 0}
.fh-som-edito p.fh-som-lire a{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--red);text-decoration:none}

/* Rubriques : titre rouge leger SANS kicker, cartes fh-article en 2 col */
h2.fh-som-rub{font-family:var(--font-display);font-weight:200;font-size:29px;line-height:1.2;letter-spacing:0;color:var(--red);margin:26px 0 0}
h2.fh-som-rub strong{font-weight:600}
ul.wp-block-post-template.fh-grid.fh-som-cards{grid-template-columns:1fr 1fr;gap:22px;margin:22px 0 26px}
.fh-som-cards .fh-article__body .fh-article__meta{margin:10px 0 0}
.fh-som-cards .fh-article__meta .wp-block-post-date::before{content:"\00b7  ";color:var(--muted-2)}

/* Podcast du numero : bande navy texte + lecteur */
.fh-som-pod{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:center}
.fh-som-pod > *{margin-block-start:0;min-width:0}
.fh-som-pod h2{font-family:var(--font-display);font-weight:200;font-size:26px;line-height:1.25;color:#fff;margin:10px 0 8px}
.fh-som-pod h2 strong{font-weight:600}
.fh-som-pod p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.65;color:#DDE2EE;margin:0}
.fh-som-pod iframe{display:block;border-radius:14px;width:100%}

/* Abonnement : carte or, UNIQUE invitation du sommaire */
.fh-som-abo{background:linear-gradient(120deg,#F7EBD3,#FBF6EA);border:1px solid #EAD9B4;border-radius:16px;padding:34px 38px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.fh-som-abo > *{margin-block-start:0;min-width:0}
.fh-som-abo__txt > *{margin-block-start:0}
.fh-som-abo__txt .fh-h2{font-size:26px}
.fh-som-abo__txt p{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.6;color:var(--muted);margin:6px 0 0}

/* Navigation entre numeros */
.fh-numero-nav{border-top:1px solid var(--line);padding:26px 0 40px}
.fh-numero-nav__in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-display);font-weight:600;font-size:14px}
.fh-numero-nav__in a{color:var(--navy);text-decoration:none}
.fh-numero-nav__in a:hover{text-decoration:underline}
.fh-numero-nav__off{color:var(--muted-2)}

@media (max-width:860px){
  .fh-som-hero__in{grid-template-columns:1fr}
  .fh-som-couv{max-width:260px}
  ul.wp-block-post-template.fh-grid.fh-som-cards{grid-template-columns:1fr}
  .fh-som-pod{grid-template-columns:1fr}
  .fh-som-abo{grid-template-columns:1fr}
}

/* L'ours du numero : mention discrete en pied de sommaire */
.fh-container p.fh-som-ours{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.6;color:var(--muted-2);max-width:72ch;margin:0}


/* ==========================================================================
   Série « L'open space confiné » (page /open-space-confine/) — reproduction
   de livrables/maquettes/maquette-serie-open-space.html (Cowork), scope fh-os-.
   La grille et la carte référence sont rendues par [fh_serie_openspace]
   (tag open-space-confine, tri chronologique). */
.fh-os-hero{position:relative;background:var(--navy-ink);padding:64px 0;overflow:hidden}
.fh-os-hero__ghost{position:absolute;right:-10px;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-weight:700;font-size:min(30vw,340px);line-height:1;color:rgba(255,255,255,.045);letter-spacing:-.04em;pointer-events:none;user-select:none}
.fh-os-hero__in{position:relative;max-width:760px}
.fh-os-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:block}
.fh-os-hero .fh-os-kicker{color:var(--gold)}
.fh-os-hero h1{font-family:var(--font-display);font-weight:200;font-size:clamp(32px,5vw,52px);color:#fff;line-height:1.08;margin:12px 0 0}
.fh-os-hero h1 b{font-weight:600}
.fh-os-hero__meta{font-family:var(--font-mono);font-size:12px;color:#8E9AB8;margin-top:16px}
.fh-os-rule{width:56px;height:3px;background:var(--red);border:0;margin:18px 0}
.fh-os-hero__chapo{color:#DDE2EE;font-size:16px;line-height:1.75;margin-top:20px;max-width:60ch}
.fh-os-about{background:var(--surface);padding:44px 0}
.fh-os-about__card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:30px 34px;max-width:820px}
.fh-os-about__card h2{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--navy-ink);margin:8px 0 10px}
.fh-os-about__card p{color:var(--muted);line-height:1.7;font-size:15.5px;margin:0}
.fh-os-about__card p+p{margin-top:12px}
.fh-os-about__sig{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);margin-top:16px}
.fh-os-serie{padding:48px 0 8px}
.fh-os-serie h2.fh-os-sec{font-family:var(--font-display);font-weight:200;font-size:29px;color:var(--red);margin:8px 0 4px}
.fh-os-serie h2.fh-os-sec b{font-weight:600}
.fh-os-lede{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:64ch;margin:0 0 26px}
.fh-os-ref{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:14px;background:#fff;padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-bottom:28px}
.fh-os-ref__tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.fh-os-ref h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--navy-ink);flex:1;min-width:240px;margin:0}
.fh-os-ref h3 b{color:var(--red)}
.fh-os-ref__go{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:#fff;background:var(--red);padding:11px 18px;border-radius:7px;text-decoration:none;white-space:nowrap}
.fh-os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fh-os-tile{border:1px solid var(--line);border-radius:14px;padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;background:#fff;transition:border-color .15s,transform .15s;min-width:0}
.fh-os-tile:hover{border-color:var(--red);transform:translateY(-2px)}
.fh-os-tile__num{font-family:var(--font-display);font-weight:200;font-size:40px;line-height:1;color:var(--red)}
.fh-os-tile__num b{font-weight:600}
.fh-os-tile__ttl{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--navy-ink);line-height:1.35}
.fh-os-tile__m{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.fh-os-tile__go{color:var(--red);font-family:var(--font-display);font-weight:700}
@media(max-width:900px){.fh-os-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fh-os-grid{grid-template-columns:1fr}}
.fh-os-abo{padding:52px 0}
.fh-os-abo__card{background:linear-gradient(120deg,#F7EBD3,#FBF6EA);border:1px solid #EAD9B4;border-radius:16px;padding:34px 38px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.fh-os-abo__card h2{font-family:var(--font-display);font-weight:200;font-size:26px;color:var(--navy-ink);margin:0}
.fh-os-abo__card h2 b{font-weight:600}
.fh-os-abo__card p{color:var(--muted);font-size:14.5px;margin:6px 0 0}
.fh-os-abo__btn{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;background:var(--red);padding:15px 26px;border-radius:8px;text-decoration:none;white-space:nowrap}
@media(max-width:860px){.fh-os-abo__card{grid-template-columns:1fr}}
.fh-os-nav{border-top:1px solid var(--line);padding:26px 0 40px}
.fh-os-nav__in{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-display);font-weight:600;font-size:14px}
.fh-os-nav__in a{color:var(--navy);text-decoration:none}
.fh-os-wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* lien retour série sur les billets tagués (injecté par the_content) */
.wp-block-post-content .fh-os-retour{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;margin:0 0 26px}
.wp-block-post-content .fh-os-retour a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}

/* nav basse de la série open space sur les billets tagués */
.wp-block-post-content .fh-os-bnav{display:flex;justify-content:space-between;align-items:center;gap:12px 18px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:44px;padding-top:22px;font-family:var(--font-display);font-weight:600;font-size:14px}
.wp-block-post-content .fh-os-bnav a{color:var(--navy);text-decoration:none}
.wp-block-post-content .fh-os-bnav a:hover{color:var(--red)}
.wp-block-post-content .fh-os-bnav__retour{font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:.04em}

/* ============================================================
   Dispositif « deux portes » — page cliente Yves Rocher Rennes
   (maquette porte-unique-rennes-v3-maquette-validee, lot 2026-07-21)
   Scopé sous .fh-porte-unique. Polices : Raleway (thème) pour les
   titres, police de corps du thème héritée (aucun appel Google).
   ============================================================ */
.fh-porte-unique{
  --pu-orange:#E4831F;--pu-orange-txt:#B65E12;--pu-orange-btn:#C0651A;--pu-orange-btn-h:#A6540F;
  --pu-marine:#33475A;--pu-texte:#48525C;--pu-gris:#7C848C;
  --pu-ligne:#EAE7E2;--pu-ombre:0 2px 12px rgba(51,71,89,.07);--pu-radius:16px;
  color:var(--pu-texte);font-size:17px;line-height:1.55;
}
.fh-porte-unique :where(h1,h2,h3){font-family:"Raleway",system-ui,sans-serif;color:var(--pu-marine);line-height:1.2;margin:0}
.fh-porte-unique p{margin:0 0 .8em}
.fh-porte-unique a{color:var(--pu-orange-txt)}
.fh-porte-unique .pu-wrap{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}

/* en-tête */
.fh-porte-unique .pu-top{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:16px 22px}
.fh-porte-unique .pu-top .fh-brand img{max-height:34px;width:auto}
.fh-porte-unique .pu-lieu{font-size:13.5px;color:var(--pu-gris);font-weight:600}
.fh-porte-unique .pu-bar{height:34px;border-radius:20px;background:var(--pu-orange);max-width:1036px;margin:6px auto 0}

/* bandeau urgence repliable */
.fh-porte-unique .pu-urgence{border-top:1px solid var(--pu-ligne);border-bottom:1px solid var(--pu-ligne);background:#FBF7F2;margin-top:16px}
.fh-porte-unique .pu-urgence>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;max-width:1080px;margin:0 auto;padding:10px 22px;font-size:15px;color:var(--pu-marine);font-weight:600}
.fh-porte-unique .pu-urgence>summary::-webkit-details-marker{display:none}
.fh-porte-unique .pu-urgence>summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--pu-gris);border-bottom:2px solid var(--pu-gris);transform:rotate(45deg);transition:transform .2s}
.fh-porte-unique .pu-urgence[open]>summary::after{transform:rotate(-135deg)}
.fh-porte-unique .pu-urgence .pu-num{color:var(--pu-orange-txt);font-weight:700}
.fh-porte-unique .pu-urgence>.pu-detail{max-width:1080px;margin:0 auto;padding:0 22px 10px;font-size:14.5px;color:#54606B}

/* intro */
.fh-porte-unique .pu-intro{padding:28px 0 6px}
.fh-porte-unique .pu-kicker{font-family:"Raleway";font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pu-orange-txt);margin:0 0 12px}
.fh-porte-unique .pu-h1{font-size:30px;font-weight:700;margin:0;letter-spacing:-.01em}
.fh-porte-unique .pu-trait{width:64px;height:4px;border:0;border-radius:3px;background:var(--pu-orange);margin:16px 0 0}
.fh-porte-unique .pu-accroche{margin:16px 0 0;max-width:60ch;font-size:18px;color:#3E4A55}

/* co-branding Groupe Rocher RH (logo réel) */
.fh-porte-unique .pu-cobrand{text-align:center;margin:20px 0 0}
.fh-porte-unique .pu-cobrand .pu-cb-label{font-size:12px;color:var(--pu-gris);margin:0 0 8px}
.fh-porte-unique .pu-cobrand img{max-height:84px;width:auto;margin:0 auto}

/* deux portes */
.fh-porte-unique .pu-duo{display:grid;grid-template-columns:1fr;gap:20px;padding:22px 0 4px}
.fh-porte-unique .pu-col-droite{display:flex;flex-direction:column;gap:20px}
.fh-porte-unique .pu-porte{background:#fff;border:1px solid var(--pu-ligne);border-radius:var(--pu-radius);box-shadow:var(--pu-ombre);padding:24px 22px}
.fh-porte-unique .pu-eyebrow{font-family:"Raleway";font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pu-orange-txt);margin:0 0 8px}
.fh-porte-unique .pu-porte h2,.fh-porte-unique .pu-h2{font-size:22px;font-weight:700;margin:0 0 10px}
.fh-porte-unique .pu-porte p{font-size:15.5px;color:#47535E}
.fh-porte-unique .pu-porte--sol .pu-ucp-icon{margin:0 0 10px}
.fh-porte-unique .pu-porte--sol .pu-ucp-icon img{height:56px;width:auto;display:block}

/* carte Oscar */
.fh-porte-unique .pu-oscar img{width:100%;height:auto;border-radius:12px;display:block}
.fh-porte-unique .pu-legende{font-style:italic;color:#5A646D;font-size:14.5px;margin:14px 0 4px;text-align:center;line-height:1.5}
.fh-porte-unique .pu-infos{font-size:14.5px;color:#54606B;margin:10px 0 6px}
.fh-porte-unique .pu-infos strong{color:var(--pu-marine)}

/* embed Calendly */
.fh-porte-unique .pu-cal{border:1px solid var(--pu-ligne);border-radius:12px;padding:12px;margin-top:12px;background:#fff}
.fh-porte-unique .pu-cal .calendly-inline-widget{min-width:280px}

/* bouton Sol */
.fh-porte-unique .pu-btn a,.fh-porte-unique a.pu-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;margin-top:8px;padding:13px 20px;background:var(--pu-orange-btn);color:#fff;font-family:"Raleway";font-weight:700;font-size:17px;text-decoration:none;border-radius:12px}
.fh-porte-unique .pu-btn a:hover,.fh-porte-unique a.pu-btn:hover{background:var(--pu-orange-btn-h)}

/* blocs pleine largeur */
.fh-porte-unique .pu-bloc{border-radius:var(--pu-radius);padding:24px 22px}
.fh-porte-unique .pu-bloc h2{font-size:20px;font-weight:700;margin:0 0 8px}
.fh-porte-unique .pu-bloc p{font-size:15.5px;color:#47535E;max-width:76ch}
.fh-porte-unique .pu-confid{background:#FBF3EA;border:1px solid #F3E4D2}
.fh-porte-unique .pu-confid h2{color:#8A4E12}
.fh-porte-unique .pu-derriere{background:#fff;border:1px solid var(--pu-ligne);box-shadow:var(--pu-ombre)}
.fh-porte-unique .pu-fullblocs{margin-top:24px}

/* FAQ */
.fh-porte-unique .pu-faq{margin:26px 0}
.fh-porte-unique .pu-faq>h2{font-size:21px;font-weight:700;text-align:center;margin:0 0 14px;color:var(--pu-marine)}
.fh-porte-unique .pu-faq details{background:#fff;border:1px solid var(--pu-ligne);border-radius:12px;margin-bottom:10px;box-shadow:var(--pu-ombre)}
.fh-porte-unique .pu-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;font-family:"Raleway";font-weight:700;color:var(--pu-marine);font-size:16px}
.fh-porte-unique .pu-faq summary::-webkit-details-marker{display:none}
.fh-porte-unique .pu-faq summary::after{content:"+";flex:0 0 auto;font:300 26px/1 "Raleway";color:var(--pu-orange-txt)}
.fh-porte-unique .pu-faq details[open] summary::after{content:"\2212"}
.fh-porte-unique .pu-faq details>*:not(summary){padding:0 18px 16px;font-size:15.5px;color:#47535E}

@media(min-width:820px){
  .fh-porte-unique .pu-h1{font-size:40px}
  .fh-porte-unique .pu-intro{padding:42px 0 8px}
  .fh-porte-unique .pu-intro-head{display:flex;justify-content:space-between;align-items:flex-start;gap:34px}
  .fh-porte-unique .pu-cobrand{margin-top:4px;flex:0 0 auto}
  .fh-porte-unique .pu-duo{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
}

/* ============================================================
   Formulaire CF7 « Être recontacté » (porte à distance, V4)
   Scopé sous .fh-porte-unique, cible le markup rendu par CF7
   (.wpcf7-form). Transcription fidèle du CSS formulaire de la
   maquette porte-unique-rennes-v4-deux-services.html.
   ============================================================ */
.fh-porte-unique .wpcf7{--pu-champ:#D8DDE1}
.fh-porte-unique .wpcf7-form .fh-recontact-row{display:flex;gap:12px}
.fh-porte-unique .wpcf7-form .fh-recontact-row .fh-recontact-field{flex:1}
.fh-porte-unique .wpcf7-form .fh-recontact-field{display:block;margin-bottom:12px;font-size:13.5px;font-weight:600;color:var(--pu-marine)}
.fh-porte-unique .wpcf7-form .wpcf7-form-control-wrap{display:block;margin-top:5px}
.fh-porte-unique .wpcf7-form input[type=text],
.fh-porte-unique .wpcf7-form input[type=tel],
.fh-porte-unique .wpcf7-form input[type=email],
.fh-porte-unique .wpcf7-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--pu-champ);border-radius:10px;padding:11px 12px;font:inherit;font-size:15px;font-weight:400;color:var(--pu-texte);background:#fff}
.fh-porte-unique .wpcf7-form input[type=text]:focus,
.fh-porte-unique .wpcf7-form input[type=tel]:focus,
.fh-porte-unique .wpcf7-form input[type=email]:focus,
.fh-porte-unique .wpcf7-form textarea:focus{outline:2px solid #F1C08A;border-color:var(--pu-orange)}
.fh-porte-unique .wpcf7-form textarea{min-height:74px;resize:vertical}
.fh-porte-unique .wpcf7-form .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;margin-top:4px;padding:13px 20px;background:var(--pu-orange-btn);color:#fff;font-family:"Raleway",system-ui,sans-serif;font-weight:700;font-size:17px;text-decoration:none;border-radius:12px;border:0;cursor:pointer;transition:background .18s}
.fh-porte-unique .wpcf7-form .wpcf7-submit:hover{background:var(--pu-orange-btn-h)}
.fh-porte-unique .wpcf7-form .fh-recontact-rgpd{font-size:12.5px;color:#6A727A;margin:12px 0 0;line-height:1.45}
.fh-porte-unique .wpcf7-form .wpcf7-spinner{margin:0 0 0 10px}

/* ============================================================
   V4 « deux services » : entretien sur site + être recontacté,
   séparateur « ou », section « Dans quels cas faire appel ? ».
   Scopé .fh-porte-unique, tokens --pu-*. Transcription de la
   maquette porte-unique-rennes-v4-deux-services.html.
   ============================================================ */
.fh-porte-unique .pu-section-titre{text-align:center;margin-top:28px;margin-bottom:4px}
.fh-porte-unique .pu-section-titre h2{font-size:23px;font-weight:700}
.fh-porte-unique .pu-section-titre p{color:var(--pu-gris);font-size:15px;margin:6px 0 0}

.fh-porte-unique .pu-svc-duo{display:grid;grid-template-columns:1fr;gap:8px;align-items:stretch;padding-top:14px;padding-bottom:4px}
.fh-porte-unique .pu-svc{background:#fff;border:1px solid var(--pu-ligne);border-radius:var(--pu-radius);box-shadow:var(--pu-ombre);overflow:hidden;display:flex;flex-direction:column}
.fh-porte-unique .pu-svc-head{padding:16px 20px;border-bottom:1px solid var(--pu-ligne);display:flex;align-items:center;gap:12px}
.fh-porte-unique .pu-svc--site .pu-svc-head{background:#FBF1E4}
.fh-porte-unique .pu-svc--dist .pu-svc-head{background:#EEF1F3}
.fh-porte-unique .pu-svc-mode{font-family:"Raleway",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin:0;flex:0 0 auto}
.fh-porte-unique .pu-svc--site .pu-svc-mode{color:#8A4E12;background:#F6E1C7}
.fh-porte-unique .pu-svc--dist .pu-svc-mode{color:#33475A;background:#DDE4E9}
.fh-porte-unique .pu-svc-head h3{font-size:18px;font-weight:700;margin:0}
.fh-porte-unique .pu-svc-body{padding:20px;display:flex;flex-direction:column;flex:1}
.fh-porte-unique .pu-svc-body>p{font-size:15.5px;color:#47535E}
.fh-porte-unique .pu-svc-body .pu-legende{font-style:italic;color:#5A646D;font-size:14px;margin:12px 0 4px;text-align:center;line-height:1.5}
.fh-porte-unique .pu-lieu-line{font-size:14.5px;color:#54606B;margin:8px 0 2px}
.fh-porte-unique .pu-lieu-line strong{color:var(--pu-marine)}

.fh-porte-unique .pu-sep{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:6px 0}
.fh-porte-unique .pu-sep::before,.fh-porte-unique .pu-sep::after{content:"";flex:1;height:1px;background:var(--pu-ligne)}
.fh-porte-unique .pu-sep-ou{font-family:"Raleway",system-ui,sans-serif;font-weight:700;font-size:13px;color:var(--pu-marine);background:#fff;border:1px solid var(--pu-ligne);border-radius:999px;padding:4px 14px;margin:0}

.fh-porte-unique .pu-cas{margin-top:24px;background:#F7FAFA;border:1px solid #E4EBEC;border-radius:var(--pu-radius);padding:24px 22px}
.fh-porte-unique .pu-cas>h2{font-size:21px;font-weight:700;text-align:center;margin:0}
.fh-porte-unique .pu-cas-intro{max-width:70ch;margin:8px auto 18px;text-align:center;color:#47535E;font-size:15.5px}
.fh-porte-unique .pu-cas-intro.is-fin{margin:16px auto 0}
.fh-porte-unique .pu-cas-grid{display:grid;grid-template-columns:1fr;gap:12px}
.fh-porte-unique .pu-cas-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--pu-ligne);border-radius:12px;padding:13px 15px;margin:0}
.fh-porte-unique .pu-cas-item::before{content:"\2713";flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#FBEBD8;color:#B65E12;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.fh-porte-unique .pu-cas-item p{margin:0;font-size:15px;color:#3E4A55}

@media(min-width:820px){
  .fh-porte-unique .pu-svc-duo{grid-template-columns:1fr auto 1fr;gap:12px}
  .fh-porte-unique .pu-sep{flex-direction:column;padding:0 2px}
  .fh-porte-unique .pu-sep::before,.fh-porte-unique .pu-sep::after{width:1px;height:auto;flex:1}
  .fh-porte-unique .pu-cas-grid{grid-template-columns:1fr 1fr}
}