/*
Theme Name: Hexagone Studio Child
Theme URI:  https://hexagonestudio.com
Description: Thème enfant Kadence pour Hexagone Studio — studio de production visuelle (Archviz · Vidéographie · Branding) et centre de formation (Packs + AI Training). Trilingue FR / EN / AR, entièrement RTL-ready (propriétés logiques). Design system : Sora + Inter, navy #0F1E33, ambre #C8873A. Éléments signature : ruche de 6 hexagones, marqueur oblique des eyebrows, baseline « Think · Create · Achieve ».
Author:     Hexagone Studio
Template:   kadence
Version:    1.0.0
Requires at least: 6.2
Tested up to: 6.5
License:    GPL-2.0-or-later
Text Domain: hexagone-child
Tags:       corporate, rtl-language-support, custom-colors, translation-ready
*/

/* =====================================================================
   HEXAGONE STUDIO — Design system
   Tous les styles sur mesure de la maquette validée, convertis en
   propriétés logiques pour un rendu correct en LTR (fr/en) et RTL (ar).
   Ne jamais utiliser left/right/margin-left en dur : utiliser les
   propriétés logiques (inline-start / inline-end / margin-inline-*).
   ===================================================================== */

:root{
  --bg:#FAFAF8; --navy:#0F1E33; --navy-2:#16283F; --amber:#C8873A; --amber-2:#B0722C;
  --ink:#1C1C1E; --pearl:#EEF0F2; --line:#E2E4E6; --white:#FFFFFF;
  --font-d:'Sora',sans-serif; --font-b:'Inter',sans-serif;
  --wrap:1180px;
}

/* --- Reset léger (Kadence gère déjà l'essentiel, on reste minimal) --- */
img{max-width:100%;display:block;height:auto}

body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.65;font-size:16px}
a{text-decoration:none;color:inherit}

/* Conteneur centré commun à toutes les sections sur mesure */
.hxg .wrap,
.wrap.hxg{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* Accessibilité : focus visible ambré (exigence CLAUDE.md) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.hex:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ---------- Eyebrow : rappel des coupes obliques du logo ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.eyebrow::before{content:"";width:22px;height:11px;background:var(--amber);clip-path:polygon(0 100%,35% 0,100% 0,65% 100%)}

/* ---------- Boutons ---------- */
.btn{display:inline-block;font-family:var(--font-d);font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:8px;transition:.22s;cursor:pointer;border:none;line-height:1.2}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-sm{padding:9px 18px;font-size:13.5px}

/* ---------- Barre de langue (fallback statique ; Polylang/WPML gèrent le réel) ---------- */
.lang{display:inline-flex;gap:2px;font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lang span,.lang a{padding:5px 9px;cursor:pointer;color:#8a8f96}
.lang .on{background:var(--navy);color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:96px 110px;overflow:hidden}
.hero-hex{position:absolute;inset-inline-end:-140px;top:50%;transform:translateY(-50%);width:560px;height:560px;opacity:.55;pointer-events:none}
.hero-inner{position:relative;max-width:660px}
.hero-logo{width:min(340px,72%);margin-block-end:42px}
.hero h1{font-family:var(--font-d);font-size:clamp(34px,5vw,56px);line-height:1.12;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{margin-block:22px 36px;font-size:17.5px;color:#4a4f57;max-width:560px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Ruche (honeycomb) : élément signature ---------- */
.hive{background:var(--navy);padding-block:96px 120px;color:#fff}
.hive-head{max-width:640px;margin-block-end:64px}
.hive-head h2{font-family:var(--font-d);font-size:clamp(26px,3.4vw,38px);font-weight:700;margin-block:14px 16px}
.hive-head p{color:#b9c2ce}
.comb{display:flex;flex-direction:column;align-items:center;gap:0}
.comb-row{display:flex;gap:14px}
.comb-row+.comb-row{margin-block-start:-52px}
.hex{--s:218px;width:var(--s);height:calc(var(--s)*1.12);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:26px;transition:.28s;position:relative;cursor:pointer;background:linear-gradient(160deg,rgba(200,135,58,.55),rgba(255,255,255,.06))}
.hex::after{content:"";position:absolute;inset:2px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy-2);z-index:0;transition:.28s}
.hex>*{position:relative;z-index:1}
.hex:hover::after{background:#1D3350}
.hex:hover{transform:translateY(-6px)}
.hex .tag{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-block-end:8px}
.hex h3{font-family:var(--font-d);font-size:17px;font-weight:600;margin-block-end:7px}
.hex p{font-size:12.5px;color:#a8b2bf;line-height:1.5}

/* ---------- Portfolio ---------- */
.work{padding-block:100px}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-block-end:46px;flex-wrap:wrap}
.work-head h2{font-family:var(--font-d);font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--navy);margin-block-start:14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,30,51,.12)}
.card-visual{height:210px;position:relative}
.cv-1{background:linear-gradient(135deg,#2B3F5C,#5C7699 55%,#C9D4E2)}
.cv-2{background:linear-gradient(135deg,#101820,#5A4630,#C8873A)}
.cv-3{background:linear-gradient(135deg,#0F1E33,#3E5C81,#C8873A)}
.card-visual span{position:absolute;inset-inline-start:16px;bottom:14px;background:rgba(15,30,51,.82);color:#fff;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:5px}
.card-body{padding:20px 22px 24px}
.card-body h3{font-family:var(--font-d);font-size:17px;color:var(--navy);margin-block-end:6px}
.card-body p{font-size:14px;color:#5a5f66}

/* ---------- Chiffres ---------- */
.stats{background:var(--pearl);padding-block:64px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat b{display:block;font-family:var(--font-d);font-size:clamp(30px,4vw,44px);font-weight:700;color:var(--navy)}
.stat b i{font-style:normal;color:var(--amber)}
.stat span{font-size:13.5px;color:#5a5f66;font-weight:500}

/* ---------- Formations ---------- */
.train{padding-block:100px}
.train-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.train h2{font-family:var(--font-d);font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--navy);margin-block:14px 18px}
.train p.lead{color:#4a4f57;margin-block-end:30px}
.packs{display:flex;flex-direction:column;gap:12px}
.pack{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 20px;transition:.2s}
.pack:hover{border-color:var(--amber);transform:translateX(4px)}
.pack .ph{width:38px;height:42px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);display:flex;align-items:center;justify-content:center;color:var(--amber);font-family:var(--font-d);font-weight:700;font-size:15px}
.pack h4{font-family:var(--font-d);font-size:15.5px;color:var(--navy)}
.pack small{font-size:12.5px;color:#7a7f86}
.pack .go{margin-inline-start:auto;color:var(--amber);font-weight:700}

/* ---------- Témoignages ---------- */
.quotes{background:var(--navy);padding-block:96px;color:#fff}
.quotes h2{font-family:var(--font-d);font-size:clamp(26px,3.4vw,38px);font-weight:700;margin-block:14px 46px}
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.q{background:var(--navy-2);border-radius:12px;padding:28px;border-block-start:3px solid var(--amber)}
.q p{font-size:14.5px;color:#c6cdd7;margin-block-end:18px}
.q b{font-family:var(--font-d);font-size:14px}
.q span{display:block;font-size:12.5px;color:#8f9aa8}

/* ---------- CTA final ---------- */
.cta-final{padding-block:100px;text-align:center}
.cta-final h2{font-family:var(--font-d);font-size:clamp(28px,4vw,44px);font-weight:700;color:var(--navy);max-width:720px;margin-block:14px 16px;margin-inline:auto}
.cta-final p{color:#4a4f57;margin-block-end:34px}
.cta-final .hero-ctas{justify-content:center}

/* ---------- Ruban de confiance / footer sur mesure ---------- */
.f-motto{font-family:var(--font-d);letter-spacing:.32em;font-size:12.5px;color:#c6cdd7;text-transform:uppercase}

/* ---------- Reveal au scroll (IntersectionObserver, cf. functions.php) ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:900px){
  .train-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:820px){
  .cards{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .q-grid{grid-template-columns:1fr}
  .comb-row{flex-direction:column;gap:14px}
  .comb-row+.comb-row{margin-block-start:14px}
  .hex{--s:min(240px,78vw)}
}

/* =====================================================================
   PAGES FORMATION (gabarit pack)
   Composants : sous-hero, chips méta, objectifs, programme (accordéon
   <details> sans JS), public/prérequis, format, tarif + CTA Réserver.
   ===================================================================== */

/* --- Sous-hero de page formation --- */
.f-hero{position:relative;padding-block:72px 76px;overflow:hidden;background:var(--pearl);border-block-end:1px solid var(--line)}
.f-hero .hero-hex{opacity:.4}
.f-hero .inner{position:relative;max-width:760px}
.f-crumb{font-size:13px;color:#7a7f86;margin-block-end:16px}
.f-crumb a:hover{color:var(--amber-2)}
.f-hero h1{font-family:var(--font-d);font-size:clamp(30px,4.4vw,48px);line-height:1.14;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin-block-start:12px}
.f-hero .lead{font-size:17px;color:#4a4f57;margin-block-start:18px;max-width:620px}

/* Chips méta (durée · format · niveau · langue) */
.f-meta{display:flex;flex-wrap:wrap;gap:12px;margin-block:26px 30px}
.f-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:500;color:#3f444c}
.f-chip b{font-family:var(--font-d);font-weight:600;color:var(--navy)}
.f-chip .dot{width:13px;height:15px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--amber)}

/* --- Sections génériques de la page --- */
.f-sec{padding-block:80px}
.f-sec.alt{background:var(--pearl)}
.f-sec .head{max-width:680px;margin-block-end:40px}
.f-h2{font-family:var(--font-d);font-size:clamp(24px,3.2vw,34px);font-weight:700;color:var(--navy);margin-block-start:14px}
.f-sec .head p{color:#4a4f57;margin-block-start:14px}

/* --- Objectifs --- */
.f-obj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.f-obj{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.f-obj .ic{width:34px;height:38px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.f-obj p{font-size:14.5px;color:#3f444c;line-height:1.55}
.f-obj b{display:block;font-family:var(--font-d);font-size:15px;color:var(--navy);margin-block-end:3px}

/* --- Programme : accordéon natif (aucun JS) --- */
.acc{display:flex;flex-direction:column;gap:12px;max-width:860px}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .2s}
.acc-item[open]{border-color:var(--amber)}
.acc-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 22px;font-family:var(--font-d);font-weight:600;font-size:15.5px;color:var(--navy)}
.acc-item>summary::-webkit-details-marker{display:none}
.acc-num{width:32px;height:36px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700}
.acc-item>summary .sign{margin-inline-start:auto;width:22px;height:22px;flex:none;position:relative;color:var(--amber);font-size:22px;line-height:1;text-align:center}
.acc-item>summary .sign::before{content:"+"}
.acc-item[open]>summary .sign::before{content:"\2212"}
.acc-body{padding:0 22px 22px calc(22px + 32px + 16px)}
.acc-body p{font-size:14.5px;color:#4a4f57}
.acc-body ul{margin-block-start:8px;padding-inline-start:18px}
.acc-body li{font-size:14px;color:#4a4f57;margin-block-end:4px}

/* --- Public cible / prérequis --- */
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.f-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 30px}
.f-panel h3{font-family:var(--font-d);font-size:18px;color:var(--navy)}
.f-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-block-start:16px}
.f-list li{display:flex;gap:11px;font-size:14.5px;color:#3f444c;line-height:1.5}
.f-list li::before{content:"";width:12px;height:14px;margin-block-start:5px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--amber)}

/* --- Durée & format --- */
.f-info{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.f-info .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;text-align:center}
.f-info .box .k{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.f-info .box b{display:block;font-family:var(--font-d);color:var(--navy);font-size:18px;font-weight:600;margin-block:10px 4px}
.f-info .box span{font-size:13.5px;color:#5a5f66}

/* --- Tarif + CTA Réserver --- */
.f-book{background:var(--navy);border-radius:16px;padding:52px 40px;text-align:center;color:#fff;border-block-start:3px solid var(--amber)}
.f-book .price{font-family:var(--font-d);font-size:clamp(28px,4vw,40px);font-weight:700;margin-block:6px 6px}
.f-book .price i{color:var(--amber);font-style:normal}
.f-book p{color:#b9c2ce;margin-block-end:26px}

@media(max-width:820px){
  .f-obj-grid{grid-template-columns:1fr}
  .f-two{grid-template-columns:1fr}
  .f-info{grid-template-columns:1fr}
  .acc-body{padding-inline-start:22px}
}

/* Accordéon en RTL : symboles neutres, le « sign » reste en fin de ligne
   grâce à margin-inline-start:auto ; l'indentation du corps se reflète. */
[dir="rtl"] .f-info .box .k{letter-spacing:normal;text-transform:none}

/* =====================================================================
   PORTFOLIO
   1. Grille filtrable — filtre 100 % CSS (radios masqués + :checked ~),
      aucun JS.  2. Page projet (contexte / mission / livrables /
      visuels / résultat).
   ===================================================================== */

/* --- Grille filtrable --- */
.pf{padding-block:88px}
.pf .head{max-width:680px;margin-block-end:28px}
.pf-h2{font-family:var(--font-d);font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--navy);margin-block-start:14px}
.pf .head p{color:#4a4f57;margin-block-start:14px}

/* Radios de contrôle : accessibles mais hors-écran visuellement */
.pf-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Barre de filtres (labels = boutons) */
.pf-filters{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:36px}
.pf-filters label{cursor:pointer;font-family:var(--font-d);font-weight:600;font-size:14px;padding:9px 20px;border-radius:999px;border:1.5px solid var(--line);color:var(--navy);background:#fff;transition:.2s;user-select:none}
.pf-filters label:hover{border-color:var(--amber)}
/* État actif du filtre sélectionné */
#pf-all:checked~.pf-filters label[for="pf-all"],
#pf-archviz:checked~.pf-filters label[for="pf-archviz"],
#pf-video:checked~.pf-filters label[for="pf-video"],
#pf-branding:checked~.pf-filters label[for="pf-branding"]{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Focus clavier visible sur le label du radio ciblé */
.pf-radio:focus-visible~.pf-filters label{outline:2px solid var(--amber);outline-offset:3px}

/* Grille */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.p-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.25s;color:inherit}
.p-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,30,51,.12)}
.p-card .card-visual{height:210px}
.p-card .card-body{padding:20px 22px 24px}
.p-card .card-body h3{font-family:var(--font-d);font-size:17px;color:var(--navy);margin-block-end:6px}
.p-card .card-body p{font-size:14px;color:#5a5f66}

/* Filtrage : on masque tout puis on réaffiche la catégorie choisie */
#pf-archviz:checked~.pf-grid .p-card{display:none}
#pf-archviz:checked~.pf-grid .p-card.cat-archviz{display:flex}
#pf-video:checked~.pf-grid .p-card{display:none}
#pf-video:checked~.pf-grid .p-card.cat-video{display:flex}
#pf-branding:checked~.pf-grid .p-card{display:none}
#pf-branding:checked~.pf-grid .p-card.cat-branding{display:flex}

/* Dégradés de substitution (remplacés par les images à la une en prod) */
.pv1{background:linear-gradient(135deg,#2B3F5C,#5C7699 55%,#C9D4E2)}
.pv2{background:linear-gradient(135deg,#1B2A44,#43607F,#9DB1C7)}
.pv3{background:linear-gradient(135deg,#24384F,#6D8BAB,#CDD9E6)}
.pv4{background:linear-gradient(135deg,#101820,#5A4630,#C8873A)}
.pv5{background:linear-gradient(135deg,#1A1208,#7A5A2E,#D69A4C)}
.pv6{background:linear-gradient(135deg,#241A10,#6B4F2A,#C8873A)}
.pv7{background:linear-gradient(135deg,#0F1E33,#3E5C81,#C8873A)}
.pv8{background:linear-gradient(135deg,#14263F,#4A6A90,#B0722C)}
.pv9{background:linear-gradient(135deg,#0D1B2E,#355074,#D29450)}

/* --- Page projet (single) --- */
.pj-hero{padding-block:60px 40px;background:var(--pearl);border-block-end:1px solid var(--line)}
.pj-hero .inner{max-width:820px}
.pj-hero h1{font-family:var(--font-d);font-size:clamp(28px,4.2vw,46px);font-weight:700;color:var(--navy);letter-spacing:-.01em;line-height:1.14;margin-block-start:12px}
.pj-hero .sub{font-size:17px;color:#4a4f57;margin-block-start:16px;max-width:640px}
.pj-meta{display:flex;flex-wrap:wrap;gap:16px 44px;margin-block-start:26px}
.pj-meta dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.pj-meta dd{font-family:var(--font-d);font-weight:600;color:var(--navy);font-size:15px;margin-block-start:3px}

/* Visuel principal */
.pj-cover{height:min(52vw,460px);border-radius:16px;margin-block:36px 0}

/* Galerie de visuels */
.pj-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pj-gallery .shot{aspect-ratio:16/10;border-radius:12px}
.pj-gallery .shot.wide{grid-column:1 / -1;aspect-ratio:21/9}

/* Bloc résultat */
.pj-result{background:var(--navy);color:#fff;border-radius:16px;padding:44px 40px;border-block-start:3px solid var(--amber)}
.pj-result h2{font-family:var(--font-d);font-size:clamp(22px,3vw,30px);font-weight:700;margin-block-end:14px}
.pj-result p{color:#c6cdd7;max-width:620px}
.pj-result .figs{display:flex;flex-wrap:wrap;gap:36px;margin-block-start:28px}
.pj-result .fig b{display:block;font-family:var(--font-d);font-size:clamp(28px,4vw,40px);font-weight:700;color:#fff}
.pj-result .fig b i{font-style:normal;color:var(--amber)}
.pj-result .fig span{font-size:13px;color:#8f9aa8}

/* Navigation projet précédent / suivant / retour */
.pj-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:28px;border-block-start:1px solid var(--line)}
.pj-nav a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--navy)}
.pj-nav a:hover{color:var(--amber-2)}
.pj-nav .arrow{color:var(--amber);font-weight:700}

@media(max-width:820px){
  .pf-grid{grid-template-columns:1fr}
  .pj-gallery{grid-template-columns:1fr}
  .pj-gallery .shot.wide{aspect-ratio:16/10}
}

/* Portfolio en RTL : uppercase/letter-spacing neutralisés + flèches reflétées */
[dir="rtl"] .pj-meta dt{letter-spacing:normal;text-transform:none}
[dir="rtl"] .pj-nav .arrow{transform:scaleX(-1)}

/* =====================================================================
   PRODUCTION
   Composants : rangées de service alternées (visuel/texte), étapes de
   méthode (hexagones numérotés). Réutilise f-hero, f-list, f-info, etc.
   ===================================================================== */

/* --- Rangées de service alternées --- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.svc + .svc{margin-block-start:66px}
.svc .visual{aspect-ratio:4/3;border-radius:16px;position:relative;overflow:hidden}
.svc .visual .badge{position:absolute;inset-inline-start:18px;inset-block-end:16px;background:rgba(15,30,51,.82);color:#fff;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:5px}
.svc:nth-child(even) .visual{order:2}
.svc h3{font-family:var(--font-d);font-size:clamp(22px,2.8vw,30px);font-weight:700;color:var(--navy);margin-block:12px 14px}
.svc p{color:#4a4f57}
.svc .svc-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-block:16px 22px}
.svc .svc-list li{display:flex;gap:11px;font-size:14.5px;color:#3f444c}
.svc .svc-list li::before{content:"";width:12px;height:14px;margin-block-start:5px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--amber)}
.svc .more{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:14.5px;color:var(--amber-2)}
.svc .more .arrow{color:var(--amber)}

/* --- Étapes de méthode --- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step .n{width:46px;height:52px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:18px}
.step h4{font-family:var(--font-d);font-size:16px;color:var(--navy);margin-block:15px 6px}
.step p{font-size:14px;color:#5a5f66;line-height:1.55}

@media(max-width:820px){
  .svc{grid-template-columns:1fr;gap:26px}
  .svc + .svc{margin-block-start:48px}
  .svc:nth-child(even) .visual,
  .svc .visual{order:-1}
  .steps{grid-template-columns:1fr 1fr;gap:26px 20px}
}
@media(max-width:520px){
  .steps{grid-template-columns:1fr}
}

/* Production en RTL : badge sur visuel + flèche « en savoir plus » reflétée */
[dir="rtl"] .svc .visual .badge{letter-spacing:normal;text-transform:none}
[dir="rtl"] .svc .more .arrow{transform:scaleX(-1)}

/* =====================================================================
   À PROPOS
   Composants : valeurs (réutilise .f-obj-grid), équipe.
   ===================================================================== */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team .m .ph{aspect-ratio:1/1;border-radius:14px;margin-block-end:14px}
.team .m h4{font-family:var(--font-d);font-size:16px;color:var(--navy);font-weight:600}
.team .m span{display:block;font-size:13px;color:var(--amber-2);font-weight:500;margin-block-start:2px}
.team .m p{font-size:13.5px;color:#5a5f66;margin-block-start:8px;line-height:1.5}
@media(max-width:820px){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.team{grid-template-columns:1fr}}

/* =====================================================================
   CONTACT
   Deux parcours (devis / réservation), formulaire, coordonnées,
   emplacements pour Fluent Forms (devis) et Amelia (réservation).
   ===================================================================== */

/* --- Sélecteur de parcours --- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.path{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px 32px;transition:.22s}
.path:hover{border-color:var(--amber);transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,30,51,.10)}
.path .ic{width:52px;height:58px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.path h3{font-family:var(--font-d);font-size:clamp(20px,2.6vw,26px);font-weight:700;color:var(--navy);margin-block:18px 10px}
.path p{color:#4a4f57;font-size:14.5px;flex:1;margin-block-end:20px}
.path .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:14.5px;color:var(--amber-2)}
.path .go .arrow{color:var(--amber)}
@media(max-width:720px){.paths{grid-template-columns:1fr}}

/* --- Grille contact : formulaire + coordonnées --- */
.contact-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}}

/* Formulaire sur mesure (aligné sur le design system ; remplaçable par
   un shortcode Fluent Forms). */
.hxg-form{display:flex;flex-direction:column;gap:18px}
.hxg-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.hxg-form .row{grid-template-columns:1fr}}
.hxg-form label{display:block;font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--navy);margin-block-end:7px}
.hxg-form input,.hxg-form select,.hxg-form textarea{width:100%;font-family:var(--font-b);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px 14px;transition:border-color .18s,box-shadow .18s}
.hxg-form input:focus,.hxg-form select:focus,.hxg-form textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(200,135,58,.15)}
.hxg-form textarea{min-height:140px;resize:vertical}
.hxg-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#5a5f66}
.hxg-form .consent input{width:auto;margin-block-start:3px}

/* Coordonnées */
.info h3{font-family:var(--font-d);font-size:18px;color:var(--navy)}
.info-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-block:16px 26px}
.info-list li{display:flex;gap:13px;font-size:14.5px;color:#3f444c;line-height:1.5}
.info-list .ic{width:30px;height:34px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.info-list b{display:block;font-family:var(--font-d);font-size:13.5px;color:var(--navy)}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:42px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--pearl);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:13px;transition:.2s}
.socials a:hover{background:var(--navy);color:var(--amber)}

/* Emplacement pour un plugin (Fluent Forms / Amelia) */
.embed-note{background:var(--pearl);border:1px dashed #c2c8cf;border-radius:12px;padding:22px 24px;color:#5a5f66;font-size:14px;line-height:1.6}
.embed-note b{color:var(--navy);font-family:var(--font-d)}
.embed-note code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--amber-2)}

/* Contact en RTL : flèche du parcours reflétée */
[dir="rtl"] .path .go .arrow{transform:scaleX(-1)}

/* =====================================================================
   BLOG
   Index (article à la une + grille + catégories) et article (single)
   avec typographie de lecture « prose ».
   ===================================================================== */

/* --- Barre de catégories (liens vers les archives) --- */
.b-filters{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:36px}
.b-filters a{font-family:var(--font-d);font-weight:600;font-size:14px;padding:9px 20px;border-radius:999px;border:1.5px solid var(--line);color:var(--navy);background:#fff;transition:.2s}
.b-filters a:hover{border-color:var(--amber)}
.b-filters a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* --- Article à la une --- */
.b-feature{display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin-block-end:44px;transition:.25s}
.b-feature:hover{box-shadow:0 18px 44px rgba(15,30,51,.12)}
.b-feature .visual{min-height:320px;position:relative}
.b-feature .visual .cat{position:absolute;inset-inline-start:18px;inset-block-start:18px;background:rgba(15,30,51,.82);color:#fff;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:5px}
.b-feature .body{padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.b-feature h2{font-family:var(--font-d);font-size:clamp(22px,2.8vw,30px);font-weight:700;color:var(--navy);line-height:1.22;margin-block:10px 12px}
.b-feature p{color:#4a4f57;font-size:15px}
@media(max-width:820px){.b-feature{grid-template-columns:1fr}}

/* --- Grille d'articles --- */
.b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:820px){.b-grid{grid-template-columns:1fr}}
.b-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.25s;color:inherit}
.b-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,30,51,.12)}
.b-card .visual{height:196px;position:relative}
.b-card .visual .cat{position:absolute;inset-inline-start:14px;inset-block-end:14px;background:rgba(15,30,51,.82);color:#fff;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:5px}
.b-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.b-meta{font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-2)}
.b-card h3{font-family:var(--font-d);font-size:17.5px;color:var(--navy);font-weight:600;line-height:1.3;margin-block:8px 8px}
.b-card p{font-size:14px;color:#5a5f66;flex:1}
.b-card .rm{margin-block-start:14px;font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--amber-2)}
.b-card .rm .arrow{color:var(--amber)}

/* --- Article (single) --- */
.b-single-hero{padding-block:60px 40px;background:var(--pearl);border-block-end:1px solid var(--line);text-align:center}
.b-single-hero .inner{max-width:760px;margin-inline:auto}
.b-single-hero h1{font-family:var(--font-d);font-size:clamp(28px,4.4vw,46px);font-weight:700;color:var(--navy);letter-spacing:-.01em;line-height:1.16;margin-block-start:14px}
.b-postmeta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin-block-start:20px;font-size:14px;color:#5a5f66}
.b-postmeta .who{font-family:var(--font-d);font-weight:600;color:var(--navy)}
.b-postmeta .sep{color:var(--amber)}
.b-cover{height:min(52vw,460px);border-radius:16px;margin-block:36px 0}

/* Corps d'article — typographie de lecture */
.hxg-prose{max-width:720px;margin-inline:auto;font-size:17px;line-height:1.75;color:#2c3138}
.hxg-prose > * + *{margin-block-start:1.15em}
.hxg-prose h2{font-family:var(--font-d);font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--navy);line-height:1.25;margin-block-start:1.7em}
.hxg-prose h3{font-family:var(--font-d);font-size:20px;font-weight:600;color:var(--navy);margin-block-start:1.5em}
.hxg-prose a{color:var(--amber-2);text-decoration:underline;text-underline-offset:2px}
.hxg-prose a:hover{color:var(--amber)}
.hxg-prose ul,.hxg-prose ol{padding-inline-start:1.35em;display:flex;flex-direction:column;gap:.45em}
.hxg-prose blockquote{border-inline-start:3px solid var(--amber);padding-inline-start:22px;margin-inline:0;color:#4a4f57;font-size:19px;font-style:italic}
.hxg-prose img{border-radius:12px}
.hxg-prose figure figcaption{font-size:13px;color:#7a7f86;margin-block-start:8px;text-align:center}
.hxg-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;background:var(--pearl);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--amber-2)}
.hxg-prose pre{background:var(--navy);color:#e8ecf1;padding:20px 22px;border-radius:12px;overflow:auto}
.hxg-prose pre code{background:none;border:none;color:inherit;padding:0}
.hxg-prose hr{border:none;border-block-start:1px solid var(--line);margin-block:2.2em}

/* Partage + auteur + fin d'article */
.b-share{max-width:720px;margin:34px auto 0;display:flex;align-items:center;gap:14px}
.b-share span{font-family:var(--font-d);font-weight:600;font-size:13px;color:var(--navy)}
.b-author{max-width:720px;margin:40px auto 0;display:flex;gap:18px;align-items:center;background:var(--pearl);border-radius:14px;padding:24px 26px}
.b-author .av{width:56px;height:62px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:18px}
.b-author h4{font-family:var(--font-d);font-size:16px;color:var(--navy)}
.b-author p{font-size:14px;color:#5a5f66;margin-block-start:4px}

/* Blog en RTL : catégories/méta uppercase neutralisés + flèches reflétées */
[dir="rtl"] .b-feature .visual .cat,
[dir="rtl"] .b-card .visual .cat,
[dir="rtl"] .b-meta{letter-spacing:normal;text-transform:none}
[dir="rtl"] .b-card .rm .arrow{transform:scaleX(-1)}

/* =====================================================================
   RTL / ARABE — correctifs
   Le letter-spacing et le text-transform:uppercase cassent les
   ligatures arabes : on les neutralise. On bascule aussi sur des
   polices arabes (Cairo pour les titres, IBM Plex Sans Arabic pour le
   corps) et on reflète les éléments directionnels (flèches, marqueur).
   ===================================================================== */
[dir="rtl"]{
  --font-d:'Cairo','Sora',sans-serif;
  --font-b:'IBM Plex Sans Arabic','Inter',sans-serif;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .hex .tag,
[dir="rtl"] .card-visual span,
[dir="rtl"] .f-motto,
:lang(ar) .eyebrow,
:lang(ar) .hex .tag,
:lang(ar) .card-visual span,
:lang(ar) .f-motto{letter-spacing:normal;text-transform:none}

[dir="rtl"] .hero h1{letter-spacing:normal}

/* Le marqueur oblique de l'eyebrow se reflète en miroir */
[dir="rtl"] .eyebrow::before{transform:scaleX(-1)}

/* La flèche des packs pointe vers le début de ligne en RTL */
[dir="rtl"] .pack .go{transform:scaleX(-1)}
[dir="rtl"] .pack:hover{transform:translateX(-4px)}

/* Élément décoratif : reste ancré côté fin de ligne (miroir auto via inset-inline-end) */

/* =====================================================================
   MOUVEMENT RÉDUIT (exigence a11y — conservé de la maquette)
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hex,.card,.pack,.btn,.hero-hex{transition:none}
  html{scroll-behavior:auto}
}