/*
Theme Name: Resilient by Design
Theme URI: https://resilientbydesign.eu
Author: Dr Małgorzata Nepelska
Description: Human Adaptation Lab — thème sur mesure. Page blanche, bandeaux de couleur pleine largeur, grandes cartes blanches qui flottent au-dessus. Le texte se modifie dans l'éditeur WordPress ; la mise en page est fixée par ce thème.
Version: 3.4
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: All rights reserved
Text Domain: rbd
Tags: business, one-column, custom-colors, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════
   RESILIENT BY DESIGN™ — Human Adaptation Lab
   ─────────────────────────────────────────────────────────────
   Le principe : la page est BLANCHE. La couleur arrive par
   bandeaux pleine largeur, et de grandes cartes blanches
   flottent par-dessus. Les photos servent de bandeaux, avec un
   voile de couleur et des cartes en verre posées dessus.
   Pour changer une couleur : une seule fois, ci-dessous.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Couleurs de marque */
  --raspberry:#C8385A; --raspberry-2:#A82E4A; --raspberry-d:#8F2640;
  --mango:#F4A832;    --mango-2:#C6841E;
  --blue:#2D6A9F;     --blue-2:#1F5080;
  --teal:#2D9E8F;     --teal-2:#22806E;
  --green:#3A7D5A;    --coral:#E07B4A;

  /* Fonds */
  --white:#FFFFFF; --off:#FBFAF8;
  --blush:#FDF2F5; --sage:#EFF7F4; --sky:#EDF4FB; --honey:#FEF7EA; --warm:#F6F2EC;
  --ink:#2C3E50; --ink-2:#4A5E70; --muted:#73818F; --line:#E9E5DF;
  --ink-deep:#22323F;

  /* Typographie */
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'DM Sans','Helvetica Neue',Helvetica,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --num:'Montserrat',var(--body);

  /* Respiration */
  --air:clamp(4.5rem,9vw,8rem);
  --air-s:clamp(3rem,5.5vw,4.5rem);
  --gutter:clamp(1.35rem,5vw,2.5rem);
  --w:71rem;
  --w-text:38rem;
  --r:28px; --r-lg:40px; --r-sm:18px;
  --overlap:clamp(3rem,6vw,5.5rem);
  --shadow:0 2px 4px rgba(44,62,80,.04),0 22px 55px -18px rgba(44,62,80,.22);
  --shadow-lg:0 4px 8px rgba(44,62,80,.05),0 38px 80px -24px rgba(44,62,80,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--raspberry);outline-offset:4px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Typographie ── */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.015em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.6rem,6.2vw,4.5rem);line-height:1.03}
h2{font-size:clamp(1.95rem,4.3vw,3.1rem)}
h3{font-size:clamp(1.28rem,2.2vw,1.7rem);line-height:1.2}
h4{font-family:var(--body);font-size:1.02rem;font-weight:600;line-height:1.35;color:var(--ink);letter-spacing:.005em}
p{max-width:var(--w-text)}
p+p{margin-top:1.1rem}
strong{font-weight:600}
em{font-style:italic}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:1.6rem
}
.eyebrow-r{color:var(--raspberry)} .eyebrow-t{color:var(--teal-2)}
.eyebrow-m{color:var(--mango-2)} .eyebrow-b{color:var(--blue)}
.lead{font-size:clamp(1.12rem,1.9vw,1.36rem);line-height:1.58;color:var(--ink-2);font-weight:300}
.serif{font-family:var(--display);font-style:italic;font-weight:400}
.muted{color:var(--muted)}
.big{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.26;font-weight:500;max-width:30ch}

/* ── Mise en page ── */
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--w-text)}
.center{text-align:center}
.center p{margin-inline:auto}

/* ═══ BANDEAUX ═══════════════════════════════════════════════
   Une section = un bandeau. Blanc par défaut ; une classe de
   couleur ou de photo le remplit sur toute la largeur.        */
section{padding-block:var(--air);position:relative;background:var(--white)}
.tight{padding-block:var(--air-s)}

.bg-off{background:var(--off)}
.bg-warm{background:var(--warm)}
.bg-blush{background:var(--blush)} .bg-sage{background:var(--sage)}
.bg-sky{background:var(--sky)}     .bg-honey{background:var(--honey)}

.bg-blue{background:var(--blue);color:rgba(255,255,255,.92)}
.bg-teal{background:var(--teal-2);color:rgba(255,255,255,.92)}
.bg-raspberry{background:var(--raspberry);color:rgba(255,255,255,.94)}
.bg-mango{background:var(--mango);color:var(--ink)}
.bg-ink{background:var(--ink-deep);color:rgba(255,255,255,.86)}

.bg-blue h1,.bg-blue h2,.bg-blue h3,.bg-blue h4,
.bg-teal h1,.bg-teal h2,.bg-teal h3,.bg-teal h4,
.bg-raspberry h1,.bg-raspberry h2,.bg-raspberry h3,.bg-raspberry h4,
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}
.bg-blue .lead,.bg-teal .lead,.bg-raspberry .lead,.bg-ink .lead{color:rgba(255,255,255,.86)}
.bg-blue .eyebrow,.bg-teal .eyebrow,.bg-raspberry .eyebrow{color:rgba(255,255,255,.72)}
.bg-ink .eyebrow{color:var(--mango)}
.bg-mango .eyebrow{color:var(--raspberry-d)}
.bg-blue .muted,.bg-teal .muted,.bg-raspberry .muted,.bg-ink .muted{color:rgba(255,255,255,.6)}

/* ── Bandeaux photo ──
   La photo est posée par background-image, avec un voile de
   couleur par-dessus pour que le texte blanc reste lisible. */
.photo{background:var(--ink-deep);color:rgba(255,255,255,.9);isolation:isolate}
.photo::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;background-repeat:no-repeat
}
.photo::after{content:'';position:absolute;inset:0;z-index:-1}
.photo h1,.photo h2,.photo h3,.photo h4{color:#fff}
.photo .lead{color:rgba(255,255,255,.88)}
.photo .eyebrow{color:rgba(255,255,255,.78)}

.photo-bottles::before{background-image:url(assets/band-bottles.jpg)}
.photo-stone::before{background-image:url(assets/band-stone.jpg)}
.photo-glasses::before{background-image:url(assets/band-glasses.jpg)}

.photo-bottles::after{background:linear-gradient(105deg,rgba(34,50,63,.90) 0%,rgba(34,50,63,.72) 52%,rgba(45,106,159,.60) 100%)}
.photo-stone::after{background:linear-gradient(105deg,rgba(168,46,74,.90) 0%,rgba(200,56,90,.76) 60%,rgba(224,123,74,.62) 100%)}
.photo-glasses::after{background:linear-gradient(105deg,rgba(34,128,110,.90) 0%,rgba(45,158,143,.74) 55%,rgba(45,106,159,.66) 100%)}

/* ── Cartes qui débordent sur le bandeau suivant ──
   Trois classes qui vont ensemble :
   .push  sur la section qui contient les cartes (elle perd son padding bas)
   .overlap sur la rangée de cartes (elle remonte d'autant)
   .pull  sur la section suivante (elle reprend la place)           */
.overlap{position:relative;z-index:3;margin-bottom:calc(-1 * var(--overlap))}
/* z-index sur la section elle-même : un bandeau photo crée son propre
   contexte d'empilement (isolation), donc sans cela la section suivante
   repasse par-dessus les cartes qui débordent et les coupe. */
.push{padding-bottom:0;z-index:4}
.pull{padding-top:calc(var(--air) + var(--overlap))}

/* ── En-tête ── */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)
}
header.site.on{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(44,62,80,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:46px;width:auto}
@media (max-width:40rem){ .brand img{height:38px} }
.menu{display:flex;align-items:center;gap:.3rem;list-style:none}
.menu a{
  font-size:.84rem;font-weight:500;letter-spacing:.01em;color:var(--ink-2);
  padding:.5rem .9rem;border-radius:99px;transition:background .2s var(--ease),color .2s var(--ease)
}
.menu a:hover{background:var(--off);color:var(--ink)}
.menu a[aria-current="page"]{color:var(--raspberry);font-weight:600}
.tools{display:flex;align-items:center;gap:.9rem}
.langs{display:flex;gap:.1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em}
.langs a{padding:.3rem .42rem;border-radius:5px;color:var(--muted);transition:color .2s}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="true"]{color:var(--raspberry);font-weight:500}
.burger{display:none;width:2.4rem;height:2.4rem;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.burger i{display:block;width:1.3rem;height:1.5px;background:var(--ink);position:relative}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:1.3rem;height:1.5px;background:var(--ink)}
.burger i::before{top:-.42rem} .burger i::after{top:.42rem}
@media (max-width:60rem){
  .burger{display:flex}
  .menu{
    position:fixed;inset:4.6rem 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 2rem;transform:translateY(-135%);
    transition:transform .35s var(--ease);max-height:calc(100dvh - 4.6rem);overflow:auto;
    box-shadow:0 30px 60px -30px rgba(44,62,80,.4)
  }
  .menu.open{transform:none}
  .menu li{border-bottom:1px solid rgba(44,62,80,.07)}
  .menu a{display:block;padding:1.05rem .25rem;font-size:1.05rem;border-radius:0}
  .menu a:hover{background:none}
}
@media (max-width:44rem){
  .tools>.btn{display:none}
  .langs{gap:0} .langs a{padding:.3rem .3rem}
}

/* ── Boutons ── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-size:.85rem;font-weight:600;letter-spacing:.02em;
  padding:1rem 2rem;border-radius:99px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)
}
.btn:hover{transform:translateY(-2px)}
.btn-r{background:var(--raspberry);color:#fff;box-shadow:0 10px 26px -8px rgba(200,56,90,.55)}
.btn-r:hover{background:var(--raspberry-2)}
.btn-o{border-color:rgba(44,62,80,.2);color:var(--ink)}
.btn-o:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ═══ CARTES ═════════════════════════════════════════════════
   Blanches, larges, arrondies, avec une vraie ombre : elles
   doivent donner l'impression de flotter au-dessus du fond.  */
.card{
  background:#fff;border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2.2rem);
  box-shadow:var(--shadow);border:1px solid rgba(44,62,80,.045);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  color:var(--ink-2)
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card p{max-width:none;font-size:.95rem;color:var(--ink-2)}
.card h3,.card h4{margin-bottom:.6rem;color:var(--ink)}
.card .eyebrow{margin-bottom:.9rem}

/* Carte de verre : posée sur une photo ou une couleur forte. */
.glass{
  background:rgba(255,255,255,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:var(--r);padding:clamp(1.6rem,2.6vw,2.2rem);
  border:1px solid rgba(255,255,255,.55);box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease),background .4s var(--ease);color:var(--ink-2)
}
.glass:hover{transform:translateY(-6px);background:rgba(255,255,255,.98)}
.glass h3,.glass h4{color:var(--ink);margin-bottom:.6rem}
.glass p{max-width:none;font-size:.95rem;color:var(--ink-2)}
.glass .eyebrow{color:var(--raspberry);margin-bottom:.9rem}

/* Cartes teintées : une touche de couleur sans bandeau. */
.t-blush{background:var(--blush)} .t-sage{background:var(--sage)}
.t-sky{background:var(--sky)}     .t-honey{background:var(--honey)}
.t-ink{background:var(--ink-deep);color:rgba(255,255,255,.82);border-color:transparent}
.t-ink h3,.t-ink h4{color:#fff} .t-ink p{color:rgba(255,255,255,.8)}
.t-ink .eyebrow{color:var(--mango)}

/* Filet de couleur en haut de carte. */
.top-r{border-top:4px solid var(--raspberry)}
.top-t{border-top:4px solid var(--teal)}
.top-m{border-top:4px solid var(--mango)}
.top-b{border-top:4px solid var(--blue)}

/* Grande lettre (A.R.C.) */
.letter{
  font-family:var(--display);font-size:3.2rem;font-weight:600;line-height:.9;
  display:block;margin-bottom:.7rem;color:var(--raspberry)
}
.letter-t{color:var(--teal-2)} .letter-b{color:var(--blue)}

/* ── Chiffres ── */
.n{display:block;font-family:var(--num);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:600;line-height:1;color:var(--raspberry)}
.l{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem;line-height:1.5}

/* ── Listes ── */
ul.list{list-style:none;padding-left:0}
ul.list li{position:relative;padding-left:1.55rem;margin-bottom:.85rem;color:var(--ink-2)}
ul.list li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--raspberry)}
ul.list-t li::before{background:var(--teal)}
ul.list-m li::before{background:var(--mango)}
.bg-blue ul.list li,.bg-teal ul.list li,.bg-raspberry ul.list li,.bg-ink ul.list li,.photo ul.list li{color:rgba(255,255,255,.88)}
.bg-blue ul.list li::before,.bg-teal ul.list li::before,.bg-raspberry ul.list li::before,
.bg-ink ul.list li::before,.photo ul.list li::before{background:rgba(255,255,255,.7)}
.card ul.list li,.glass ul.list li{color:var(--ink-2);font-size:.95rem}

/* ── Étapes numérotées ── */
ul.steps{list-style:none;counter-reset:s;padding-left:0}
ul.steps li{
  counter-increment:s;position:relative;padding:1.5rem 0 1.5rem 4.6rem;
  border-top:1px solid var(--line);color:var(--ink-2)
}
ul.steps li:last-child{border-bottom:1px solid var(--line)}
ul.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.85rem;
  font-family:var(--mono);font-size:.72rem;color:var(--raspberry);letter-spacing:.08em
}
ul.steps strong{display:block;color:var(--ink);font-family:var(--body);font-weight:600;margin-bottom:.2rem}
.card ul.steps li{padding-left:3.4rem}
@media (max-width:34rem){ ul.steps li{padding-left:3.2rem} }

/* ── Encadré ── */
.note{
  border-left:3px solid var(--teal);background:var(--off);
  padding:1.5rem 1.8rem;border-radius:0 var(--r-sm) var(--r-sm) 0
}
.note p{font-size:.93rem;color:var(--ink-2);max-width:none}
.note-r{border-left-color:var(--raspberry)}
.photo .note,.bg-ink .note,.bg-blue .note,.bg-teal .note,.bg-raspberry .note{
  background:rgba(255,255,255,.12);border-left-color:rgba(255,255,255,.55)
}
.photo .note p,.bg-ink .note p,.bg-blue .note p,.bg-teal .note p,.bg-raspberry .note p{color:rgba(255,255,255,.88)}

/* ── Prix ── */
.amt{font-family:var(--num);font-weight:600;font-size:1.05rem;color:var(--ink);white-space:nowrap;display:block;margin-top:1rem}
.t-ink .amt{color:var(--mango)}

/* ── Portrait : galet organique, comme sur son autre site ── */
.portrait{position:relative;max-width:26rem}
.portrait img{
  width:100%;aspect-ratio:4/4.6;object-fit:cover;position:relative;z-index:1;
  border-radius:58% 42% 48% 52% / 46% 50% 50% 54%
}
.portrait::after{
  content:'';position:absolute;z-index:0;inset:12% -7% -7% 14%;
  background:var(--sage);border-radius:52% 48% 56% 44% / 50% 46% 54% 50%
}
.portrait-r::after{background:var(--blush)}
@media (max-width:56rem){
  .portrait{margin-inline:auto}
  .portrait::after,.wp-block-image.portrait::after{inset:12% 0 -5% 9%}
}

/* Image ronde dans une carte / une colonne. */
.shot img{border-radius:var(--r);box-shadow:var(--shadow)}
.shot-lg img{border-radius:var(--r-lg)}

/* ── Grille simple, utilisée par les gabarits (blog, archives) ── */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:clamp(1.25rem,2.4vw,2rem)}
.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:clamp(1.25rem,2.4vw,2rem)}
.rule{width:2.5rem;height:3px;border-radius:2px;margin:.9rem 0 1rem}
.r-r{background:var(--raspberry)} .r-t{background:var(--teal)}
.r-m{background:var(--mango)}     .r-b{background:var(--blue)}

/* ── Emplacement à remplir : photo, vidéo, document ──
   VISIBLE UNIQUEMENT QUAND VOUS ÊTES CONNECTÉE. Un visiteur ne voit
   ni l'emplacement, ni la colonne qui le contient, ni une section
   marquée .only-admin : il voit une page finie, pas un chantier. */
.slot,.only-admin{display:none}
.wp-block-column:has(.slot){display:none}
body.logged-in .slot{display:flex}
body.logged-in .only-admin{display:block}
body.logged-in .wp-block-column:has(.slot){display:block}
.slot{
  border:1.5px dashed rgba(44,62,80,.22);border-radius:var(--r);
  background:var(--off);padding:clamp(1.8rem,4vw,3rem) 1.5rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  min-height:11rem
}
.slot .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--raspberry)}
.slot p{font-size:.9rem;color:var(--muted);max-width:32ch;margin:0}
.slot-v{aspect-ratio:16/9;min-height:0}
:is(.photo,.bg-ink,.bg-blue,.bg-teal) .slot{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
:is(.photo,.bg-ink,.bg-blue,.bg-teal) .slot p{color:rgba(255,255,255,.72)}
:is(.photo,.bg-ink,.bg-blue,.bg-teal) .slot .k{color:var(--mango)}

/* ═══ LE PARCOURS — pays, drapeaux, postes ═══════════════════
   Le trait de chaque poste reprend les couleurs du drapeau du
   pays, en dégradé. Le drapeau est aussi posé en filigrane au
   fond de la carte. Les segments blancs des drapeaux reçoivent
   un liseré, sinon ils disparaissent sur une carte blanche.   */
.track{margin-top:clamp(2.5rem,5vw,3.5rem)}

.track-legend{
  display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding:0;
  margin:0 0 clamp(1.75rem,3vw,2.5rem)
}
.track-chip{
  display:inline-flex;align-items:center;gap:.5rem;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:.38rem .85rem;
  font-size:.82rem;color:var(--ink-2)
}
.track-dot{width:.55rem;height:.55rem;border-radius:50%;flex:none;background:var(--c,var(--muted))}
[data-sector="academia"]{--c:var(--teal)}
[data-sector="industry"]{--c:var(--mango)}
[data-sector="intergov"]{--c:var(--blue)}
[data-sector="eu"]{--c:var(--green)}
[data-sector="association"]{--c:var(--coral)}
[data-sector="independent"]{--c:var(--raspberry)}

.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:clamp(1rem,2vw,1.4rem);align-items:start}
@media (min-width:56rem){
  .track-grid{grid-template-columns:repeat(3,1fr)}
  .tc.wide{grid-column:span 2}
  .tc.wide .tc-roles{grid-template-columns:repeat(2,1fr)}
}

.tc{
  position:relative;overflow:hidden;background:#fff;border:1px solid rgba(44,62,80,.07);
  border-radius:var(--r);padding:clamp(1.3rem,2.2vw,1.75rem);
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.tc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* Le drapeau en filigrane, très pâle, en haut à droite. */
.tc-wash{position:absolute;top:-20%;right:-18%;width:58%;z-index:0;opacity:.07;pointer-events:none}
.tc-wash svg{width:100%;height:auto;display:block;transform:rotate(-8deg)}
.tc>*:not(.tc-wash){position:relative;z-index:1}

.tc-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.15rem}
.tc-flag{flex:none;width:34px;display:block;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(44,62,80,.16)}
.tc-flag svg{width:100%;height:auto;display:block}
.tc-country{font-family:var(--display);font-size:1.4rem;font-weight:600;line-height:1.1;margin:0;color:var(--ink)}
.tc-city{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.tc-roles{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem;align-content:start}
.tc-role{position:relative;padding-left:1rem}
.tc-bar{
  position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:2px;
  background:var(--fg);box-shadow:0 0 0 1px rgba(44,62,80,.12)
}
.tc-org{display:block;font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.35}
.tc-title{display:block;font-size:.88rem;color:var(--ink-2);margin-top:.15rem;line-height:1.45}
.tc-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-top:.5rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)
}
.tc-years{font-family:var(--num);font-weight:600;font-size:.72rem;letter-spacing:.02em;
  text-transform:none;color:var(--ink-2);margin-left:auto;white-space:nowrap}

/* Repère de complétion : visible seulement quand vous êtes connectée. */
.tc-todo{
  display:none;margin-top:.55rem;padding:.45rem .65rem;border-radius:8px;
  background:var(--honey);border:1px dashed rgba(198,132,30,.45);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--mango-2);line-height:1.5
}
body.logged-in .tc-todo{display:block}

/* Sur un fond de couleur ou une photo, les cartes restent blanches. */
:is(.bg-off,.bg-sage,.bg-sky,.photo) .track-chip{background:rgba(255,255,255,.92)}

/* ── Références et sources ── */
.refs{font-size:.84rem;line-height:1.6;color:var(--muted);list-style:none;padding-left:0}
.refs li{padding-left:1.4rem;position:relative;margin-bottom:.6rem}
.refs li::before{content:'↗';position:absolute;left:0;top:0;color:var(--teal);font-size:.8rem}
.refs a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(44,62,80,.25);text-underline-offset:2px}
.refs a:hover{color:var(--raspberry);text-decoration-color:var(--raspberry)}

/* ── Étiquette ── */
.pill{
  display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.34rem .75rem;border-radius:99px;
  background:var(--blush);color:var(--raspberry);margin-bottom:.9rem
}
/* Dans une carte en flex, une étiquette s'étirerait sur toute la largeur. */
.wp-block-column:is(.card,.glass)>.pill{align-self:flex-start}
.pill-t{background:var(--sage);color:var(--teal-2)}
.pill-b{background:var(--sky);color:var(--blue-2)}
.pill-m{background:var(--honey);color:var(--mango-2)}

/* ── Marqueur de niveau de preuve ──
   Elle publie son degré de confiance : le site doit pouvoir le montrer. */
.ev{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--line)}
.ev-strong{color:var(--teal-2)} .ev-mixed{color:var(--mango-2)} .ev-thin{color:var(--raspberry)}

/* ── Révélation ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover,.glass:hover{transform:none}
}

/* ── Pied de page ── */
footer.site{background:var(--ink-deep);color:rgba(255,255,255,.66);padding-block:var(--air-s) 2rem;font-size:.9rem}
footer.site .grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
@media (max-width:48rem){ footer.site .grid{grid-template-columns:1fr;gap:2.5rem} }
footer.site img.logo{height:54px;width:auto;margin-bottom:1.25rem;filter:brightness(0) invert(1);opacity:.92}
footer.site h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500;margin-bottom:1.1rem}
footer.site ul{list-style:none}
footer.site li{margin-bottom:.6rem}
footer.site a{color:rgba(255,255,255,.66);transition:color .2s}
footer.site a:hover{color:var(--mango)}
footer.site p{color:rgba(255,255,255,.6);max-width:22rem}
.foot-end{
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:rgba(255,255,255,.4)
}
::selection{background:var(--raspberry);color:#fff}

/* ═══════════════════════════════════════════════════════════════
   AJUSTEMENTS WORDPRESS
   WordPress ajoute ses propres classes et un conteneur
   intermédiaire ; ces règles alignent tout sur le thème.
   ═══════════════════════════════════════════════════════════════ */

.wp-block-group:not(.wrap):not(.narrow){max-width:none}
section.wp-block-group{padding-block:var(--air)}
section.wp-block-group.tight{padding-block:var(--air-s)}
section.wp-block-group.pull{padding-top:calc(var(--air) + var(--overlap))}
section.wp-block-group.push{padding-bottom:0;z-index:4}
section.wp-block-group.tight.push{padding-bottom:0}

/* Rythme vertical.
   ATTENTION : WordPress glisse un <div class="wp-block-group__inner-container">
   entre .wrap et son contenu. Sans le :is() ci-dessous, aucune de ces règles
   ne s'applique sur le site réel et tout se retrouve collé. */
:is(.wrap,.wrap>.wp-block-group__inner-container)>*+*{margin-top:1.35rem}
:is(.wrap,.wrap>.wp-block-group__inner-container)>:is(h1,h2)+*{margin-top:1.6rem}
:is(.wrap,.wrap>.wp-block-group__inner-container)>.eyebrow+*{margin-top:0}
:is(.wrap,.wrap>.wp-block-group__inner-container)>.wp-block-columns{margin-top:clamp(2.5rem,5vw,3.5rem)}
:is(.wrap,.wrap>.wp-block-group__inner-container)>.wp-block-buttons{margin-top:2.4rem}
:is(.wrap,.wrap>.wp-block-group__inner-container)>.wp-block-columns+*{margin-top:2.75rem}
:is(.wrap,.wrap>.wp-block-group__inner-container)>:is(.wp-block-columns,.wp-block-list)+:is(h2,h3){margin-top:clamp(3rem,6vw,4.25rem)}
:is(.wrap.center,.wrap.center>.wp-block-group__inner-container)>*{margin-inline:auto}
.wrap.center .wp-block-buttons{justify-content:center}

/* Le débordement doit s'appliquer au bloc de colonnes lui-même. */
.wp-block-columns.overlap{margin-bottom:calc(-1 * var(--overlap))}

/* Colonnes — on reprend l'essentiel du CSS de WordPress pour que
   la mise en page ne dépende pas de lui. */
.wp-block-columns{display:flex;flex-wrap:nowrap;align-items:stretch;gap:clamp(1.25rem,2.4vw,2rem);margin-bottom:0}
.wp-block-column{flex-grow:1;flex-basis:100%;min-width:0;overflow-wrap:break-word}
.wp-block-column>*+*{margin-top:1rem}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.85rem}
.wp-block-button{margin:0}
@media (max-width:56rem){
  .wp-block-columns:not(.is-not-stacked-on-mobile){flex-wrap:wrap!important}
  .wp-block-column{flex-basis:100%!important}
}

/* Une colonne peut être une carte. height:auto, sinon les hauteurs
   d'une même rangée ne s'alignent plus. */
.wp-block-column:is(.card,.glass){display:flex;flex-direction:column;height:auto}
.wp-block-column:is(.card,.glass)>.wp-block-buttons:last-child{margin-top:auto;padding-top:1.3rem}
.wp-block-column:is(.card,.glass)>.amt:last-child{margin-top:auto;padding-top:1rem}

/* Chiffres clés : deux par ligne sur mobile. */
.figs .wp-block-column{text-align:left}
.figs .wp-block-column:nth-child(2) .n{color:var(--teal-2)}
.figs .wp-block-column:nth-child(3) .n{color:var(--mango-2)}
.figs .wp-block-column:nth-child(4) .n{color:var(--blue)}
.photo .figs .n,.bg-ink .figs .n{color:var(--mango)}
.photo .figs .wp-block-column:nth-child(2) .n,.bg-ink .figs .wp-block-column:nth-child(2) .n{color:#8FD9CC}
.photo .figs .wp-block-column:nth-child(3) .n,.bg-ink .figs .wp-block-column:nth-child(3) .n{color:#FFC978}
.photo .figs .wp-block-column:nth-child(4) .n,.bg-ink .figs .wp-block-column:nth-child(4) .n{color:#9FC8E8}
.photo .figs .l,.bg-ink .figs .l,.bg-blue .figs .l,.bg-teal .figs .l{color:rgba(255,255,255,.62)}
@media (max-width:56rem){
  .figs.wp-block-columns{flex-wrap:wrap!important;row-gap:2.25rem}
  .figs .wp-block-column{flex-basis:calc(50% - 1rem)!important}
}

/* Boutons WordPress habillés comme ceux du thème. */
.wp-block-button__link{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-size:.85rem;font-weight:600;letter-spacing:.02em;
  padding:1rem 2rem;border-radius:99px;border:1.5px solid transparent;
  background:var(--raspberry);color:#fff;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 10px 26px -8px rgba(200,56,90,.55)
}
.wp-block-button__link:hover{transform:translateY(-2px);background:var(--raspberry-2)}
.wp-block-button.is-mango .wp-block-button__link{background:var(--mango);color:var(--ink);box-shadow:0 10px 26px -8px rgba(244,168,50,.6)}
.wp-block-button.is-mango .wp-block-button__link:hover{background:#E09520}
.wp-block-button.is-outline .wp-block-button__link{background:transparent;color:var(--ink);border-color:rgba(44,62,80,.2);box-shadow:none}
.wp-block-button.is-outline .wp-block-button__link:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
:is(.bg-ink,.bg-blue,.bg-teal,.bg-raspberry,.photo) .wp-block-button.is-outline .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.5)}
:is(.bg-ink,.bg-blue,.bg-teal,.bg-raspberry,.photo) .wp-block-button.is-outline .wp-block-button__link:hover{background:#fff;color:var(--ink);border-color:#fff}
.t-ink .wp-block-button.is-outline .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.5)}

/* Listes WordPress. */
.wp-block-list.list{list-style:none;padding-left:0}
.wp-block-list.list li{position:relative;padding-left:1.55rem;margin-bottom:.85rem;color:var(--ink-2)}
.wp-block-list.list li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--raspberry)}
.wp-block-list.list-t li::before{background:var(--teal)}
.wp-block-list.list-m li::before{background:var(--mango)}
:is(.bg-blue,.bg-teal,.bg-raspberry,.bg-ink,.photo) .wp-block-list.list li{color:rgba(255,255,255,.88)}
:is(.bg-blue,.bg-teal,.bg-raspberry,.bg-ink,.photo) .wp-block-list.list li::before{background:rgba(255,255,255,.7)}
:is(.card,.glass) .wp-block-list.list li{color:var(--ink-2);font-size:.95rem}
.t-ink .wp-block-list.list li{color:rgba(255,255,255,.8)}
.t-ink .wp-block-list.list li::before{background:var(--mango)}

/* Étapes WordPress : surtout pas de grid — le texte libre après
   <strong> deviendrait un élément de grille anonyme et tomberait
   dans la colonne du numéro. */
.wp-block-list.steps{list-style:none;counter-reset:s;padding-left:0}
.wp-block-list.steps li{
  counter-increment:s;position:relative;padding:1.5rem 0 1.5rem 4.6rem;
  border-top:1px solid var(--line);color:var(--ink-2)
}
.wp-block-list.steps li:last-child{border-bottom:1px solid var(--line)}
.wp-block-list.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.85rem;
  font-family:var(--mono);font-size:.72rem;color:var(--raspberry);letter-spacing:.08em
}
.wp-block-list.steps strong{display:block;color:var(--ink);font-family:var(--body);font-weight:600;margin-bottom:.2rem}
:is(.card,.glass) .wp-block-list.steps li{padding-left:3.4rem}
:is(.bg-ink,.photo) .wp-block-list.steps li{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82)}
:is(.bg-ink,.photo) .wp-block-list.steps li::before{color:var(--mango)}
:is(.bg-ink,.photo) .wp-block-list.steps strong{color:#fff}
@media (max-width:34rem){ .wp-block-list.steps li{padding-left:3.2rem} }

/* Images et figures. */
.wp-block-image{margin:0}
.wp-block-image img{border-radius:var(--r)}
.wp-block-column>.wp-block-image{align-self:center}
.wp-block-image.portrait img{
  aspect-ratio:4/4.6;object-fit:cover;width:100%;position:relative;z-index:1;
  border-radius:58% 42% 48% 52% / 46% 50% 50% 54%
}
.wp-block-image.portrait::after{z-index:0}
.wp-block-image.shot img{border-radius:var(--r);box-shadow:var(--shadow)}
.wp-block-image.shot-lg img{border-radius:var(--r-lg)}
/* Image qui remplit toute la hauteur d'une carte, en haut. */
.wp-block-column.card>.wp-block-image:first-child,
.wp-block-column.glass>.wp-block-image:first-child{
  margin:calc(-1 * clamp(1.6rem,2.6vw,2.2rem)) calc(-1 * clamp(1.6rem,2.6vw,2.2rem)) 1.4rem;
  align-self:stretch
}
.wp-block-column.card>.wp-block-image:first-child img,
.wp-block-column.glass>.wp-block-image:first-child img{
  border-radius:var(--r) var(--r) 0 0;aspect-ratio:16/10;object-fit:cover;width:100%
}

/* Le schéma en SVG reste lisible sur fond de couleur. */
.wp-block-image.diagram img{border-radius:0;background:#fff;border-radius:var(--r);padding:1.25rem}

/* Prose d'article (blog). */
.rbd-prose h2{margin-top:2.75rem;margin-bottom:.75rem}
.rbd-prose h3{margin-top:2rem;margin-bottom:.5rem;font-family:var(--body);font-size:1.2rem;font-weight:600}
.rbd-prose p,.rbd-prose li{max-width:none}
.rbd-prose>*+*{margin-top:1.15rem}

/* Barre d'admin : ne pas masquer l'en-tête collant. */
.admin-bar header.site{top:32px}
@media (max-width:782px){ .admin-bar header.site{top:46px} }