:root{
  --terracotta:#EC6357;--ciel:#ACDADD;--nuit:#000560;--nuit-2:#1a1f5c;--anthracite:#706F6F;--ink:#2b2b33;
  --paper:#FBFAF8;--ciel-wash:#EEF7F7;--deep:#06071a;
  /* fusion with held end-stops to kill edge interpolation overshoot */
  --fusion:linear-gradient(115deg,#EC6357 0%,#EC6357 4%,#a2506c 50%,#000560 96%,#000560 100%);
  --fusion-v:linear-gradient(180deg,#EC6357 0%,#EC6357 3%,#a2506c 52%,#000560 97%,#000560 100%);
  --fil:url(https://oneprovence.com/wp-content/uploads/2024/02/onep-filigrane-white-lite-01.svg);
  --ease:cubic-bezier(.22,.61,.36,1);--dur:6500ms;--maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* overflow-x:clip (et non hidden) : masque le débordement horizontal SANS
   faire du body un conteneur de scroll, ce qui casserait le position:sticky
   du header. */
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
a{color:inherit}

/* ===== HEADER (flux normal, sur le fond clair de la page) ===== */
header{position:sticky;top:0;z-index:60;background:transparent;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
/* gouttière 20px : aligne le header sur le bord de la hero (margin:20px) */
header .wrap{max-width:none;padding:0 20px}
/* recentrage optique : plus d'air au-dessus (18px) qu'en dessous (10px).
   Horizontal 20px = marge latérale de la hero, pour aligner logo/nav sur le bloc.
   (indispensable ici : ce shorthand écrase le padding:0 20px de header .wrap) */
header .bar{display:flex;align-items:center;justify-content:space-between;min-height:74px;padding:18px 20px 10px}
header .bar>a{display:flex;align-items:flex-start}
.logo{width:clamp(168px,17vw,190px);height:auto}
.logo.white{display:none}
.logo.dark{display:block}
.nav{display:flex;align-items:center;gap:34px}
.nav a{color:var(--nuit);text-decoration:none;font-size:1rem;font-weight:500;transition:color .25s}
.nav a:hover{color:var(--terracotta)}
.lang{display:flex;background:rgba(0,5,96,.06);border:1px solid rgba(0,5,96,.10);border-radius:999px;overflow:hidden}
.lang button{background:transparent;border:0;color:var(--nuit);font-family:inherit;font-weight:600;font-size:11.5px;padding:6px 12px;cursor:pointer;opacity:.6;transition:.25s}
.lang button[aria-pressed="true"]{background:#fff;color:var(--nuit);opacity:1;box-shadow:0 1px 3px rgba(0,5,96,.14)}
.lang button:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
header.solid{background:rgba(251,250,248,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,5,96,.08)}

/* ===== HERO (cards open into a rectangle) ===== */
/* --ease / --soft are scoped to the hero so the site-wide --ease is untouched.
   --ease drives the clip-path opening, --soft the softer slides/hovers. */
/* header + hero occupent un écran plein ; la hero prend la hauteur restante */
.hero-stage{min-height:calc(100svh - var(--header-h,98px));display:flex;flex-direction:column}

/* full bleed : la hero remplit l'écran moins 20px de marge tout autour.
   --ease / --soft restent scopés ici (deck FLIP + hovers en dépendent). */
.hero{--ease:cubic-bezier(.76,0,.24,1);--soft:cubic-bezier(.22,.61,.36,1);
  position:relative;overflow:hidden;border-radius:40px;margin:20px;
  flex:1 1 auto;min-height:0;isolation:isolate;color:#fff}

.hero .layer{position:absolute;inset:0;overflow:hidden;will-change:clip-path;z-index:1}
/* guard: effet zoom reveal désactivé sur hero (retours client 07/2026).
   will-change:transform était un reliquat de l'animation Ken Burns du slider retiré
   (promote(), désormais gardée par if(!deck)return et jamais exécutée). Sur mobile réel,
   il forçait une couche GPU persistante que le masquage de la barre d'URL au 1er scroll
   re-rastérisait -> léger zoom de l'image. Retiré : l'image reste strictement fixe au
   scroll. Le transform:scale(1.04) statique (cadrage/overscan) est conservé, aucun autre
   rendu changé. L'effet .reveal (translateY, sections Fusion/Territoire/Essentiel/Contact)
   n'est PAS concerné : le hero ne porte pas la classe .reveal. */
.hero .layer .img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04)}

/* contenu : centré horizontalement ET verticalement, puis remonté pour dégager les cartes.
   z-index:15 : doit rester au-dessus du calque en expansion (z-index:4 inline).
   bottom:150px : réserve la zone basse des vignettes (deck bottom:54px + carte ≤146px)
   pour que le centrage vertical se fasse DANS l'espace au-dessus du deck. Sans ça, sur
   les hauteurs desktop courtes (≤~700px) le CTA du slide actif recouvrait les cartes.
   Surchargé en bottom:auto dans la media ≤820 (le mobile reste ancré en haut). */
.hero .content{position:absolute;inset:0;z-index:15;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:0 clamp(24px,6vw,72px);transform:translateY(-6%);bottom:150px}
.hero .content > *{margin-left:auto;margin-right:auto}
.hero .cta{align-self:center}
/* ombre portée diffuse sur la FORME des lettres (approche validée client 07/2026) :
   text-shadow multi-couches, posé sur les éléments texte eux-mêmes (jamais sur .content
   ni sur un wrapper), l'ombre épouse chaque glyphe, aucun rectangle ni fond visible.
   L'image reste strictement nette : aucun filtre / flou / teinte / overlay au-dessus d'elle.
   Traitement différencié (retours client 07/2026) :
   . Paragraphe (#lead) : ombre noire multi-couches RENFORCÉE (plus intense et étendue),
     sans fond ni cadre (approche cadre testée et écartée). Voir la règle plus bas.
   . Titre terracotta « One Provence Promotion » (l'<em>) : ombre noire, inchangée
     (rendue explicite ici pour la découpler du titre en nuit ; le mobile pilote le blanc).
   . Titre « Nouvelle agence » (texte direct du h1) : passe en NUIT #000560, sans ombre
     noire (la nuit contraste assez sur cette photo majoritairement claire : ciel, statue).
     Filet de sécurité : UNE seule couche nuit très légère et diffuse (aucun contour ni
     halo carré) pour les zones plus chargées (feuillage) et les recadrages mobile / FR-EN.
   Le CTA (pill blanc plein) est volontairement exclu : déjà lisible, aucune ombre. */
/* Paragraphe (#lead) UNIQUEMENT : ombre noire multi-couches RENFORCÉE (plus intense et
   plus étendue que la version précédente) pour la lisibilité sur les zones claires de la
   photo (ciel, statue), sans fond ni cadre (approche cadre testée et écartée) ni flou.
   Les 2 titres et le CTA ne sont PAS concernés. Empilement court->long : net près de la
   lettre puis halo diffus qui s'éteint en douceur, aucun contour dur ni halo carré. */
.hero #lead,.hero .lead{
  text-shadow:
    0 1px 3px rgba(0,0,0,.78),
    0 8px 24px rgba(0,0,0,.82),
    0 18px 46px rgba(0,0,0,.62),
    0 28px 64px rgba(0,0,0,.42);
}
.hero #title em{
  text-shadow:
    0 1px 3px rgba(0,0,0,.6),
    0 6px 18px rgba(0,0,0,.65),
    0 14px 36px rgba(0,0,0,.45),
    0 20px 50px rgba(0,0,0,.35);
}
.hero #title{
  color:var(--nuit);
  text-shadow:0 2px 14px rgba(0,5,96,.4);
}
/* Desktop uniquement (>820px) : « Nouvelle agence » repasse en BLANC, avec l'ombre noire
   multi-couches pour la lisibilité sur la photo claire. Mobile (≤820px) conserve le nuit
   + filet nuit léger de la règle de base ci-dessus. (retours client 07/2026) */
@media(min-width:821px){
  .hero #title{
    color:#fff;
    text-shadow:
      0 1px 3px rgba(0,0,0,.6),
      0 6px 18px rgba(0,0,0,.65),
      0 14px 36px rgba(0,0,0,.45),
      0 20px 50px rgba(0,0,0,.35);
  }
}
/* ===== BASCULE TEMPORAIRE (validation en ligne) — ombre du titre terracotta en mobile =====
   INVERSION du défaut mobile : l'ombre BLANCHE devient le comportement par défaut (≤820px),
   sans aucune classe sur le <h1 id="title">. L'ombre NOIRE (couches noires + diffuse,
   identiques au desktop) reste accessible en ajoutant .shadow-dark sur ce même <h1> —
   élément STABLE : main.js ne réécrit que son innerHTML via paintContent, jamais sa
   className, donc la classe persiste à travers les bascules FR/EN. Portée limitée à l'<em>
   (titre terracotta) : « Nouvelle agence » (désormais en nuit) et le paragraphe (en noir)
   ne sont pas concernés par cette bascule. Desktop inchangé (ce bloc est sous media ≤820px). Aucune
   fonction main.js modifiée. */
@media(max-width:820px){
  /* défaut mobile = BLANC (override de l'ombre noire héritée de #title) */
  .hero #title em{
    text-shadow:
      0 1px 3px rgba(255,255,255,.5),
      0 6px 18px rgba(255,255,255,.6),
      0 16px 40px rgba(255,255,255,.4);
  }
  /* .shadow-dark sur le <h1 id="title"> → repasse en NOIR (couches noires + diffuse) */
  .hero #title.shadow-dark em{
    text-shadow:
      0 1px 3px rgba(0,0,0,.6),
      0 6px 18px rgba(0,0,0,.65),
      0 14px 36px rgba(0,0,0,.45),
      0 20px 50px rgba(0,0,0,.35);
  }
}
/* width:100% : sans elle, .title-mask se dimensionne en fit-content et le max-width
   en % de #title se résout contre elle, ce qui décentre le titre.
   overflow:visible : un overflow:hidden clipperait le text-shadow du titre aux bords
   du masque, donc recréerait un rectangle. Le fondu de .swap suffit à la transition. */
.hero .title-mask{overflow:visible;width:100%}
.hero #title,.hero h1{font-size:clamp(1.75rem,3vw,2.85rem);line-height:1.06;
  max-width:min(94%,900px);text-wrap:balance;text-align:center;margin-left:auto;margin-right:auto;
  font-weight:700;letter-spacing:-.02em;overflow-wrap:break-word;hyphens:auto}
.hero #lead,.hero .lead{font-weight:500;max-width:min(90%,560px)}
/* noms composés insécables (ex. Aix-Marseille-Provence) */
.hero .nb{white-space:nowrap}
/* l'<em> ne porte que la couleur ciel, jamais d'italique */
.hero #title em,.hero h1 em{font-style:normal;color:var(--ciel)}
.hero .lead{margin-top:16px;font-size:clamp(.95rem,1.25vw,1.12rem);font-weight:300;max-width:46ch;color:#fff}
/* Lead hero : texte fer à gauche, mais bloc centré horizontalement dans le hero.
   fit-content rétracte la boîte à la largeur réelle du texte → margin-inline:auto
   la centre visuellement, pendant que text-align:left garde le fer à gauche.
   Surcharge portée UNIQUEMENT sur le lead (pas sur le parent .content). */
.hero #lead,.hero .lead{
  text-align:left;
  width:fit-content;
  max-width:min(82ch,92%);
  margin-inline:auto;
  text-wrap:balance;
}
/* Mobile : on repasse le lead en centré. width:auto annule le fit-content
   pour que le bloc occupe la largeur dispo et que le centrage du texte
   s'opère sur l'axe réel du hero. margin-inline:auto et text-wrap:balance
   restent hérités de la règle de base ci-dessus. */
@media (max-width: 768px) {
  .hero #lead,.hero .lead{
    text-align:center;
    width:auto;
    max-width:92%;
  }
}
.hero .cta{display:inline-flex;align-items:center;gap:11px;margin-top:26px;background:#fff;color:var(--nuit);text-decoration:none;font-weight:600;font-size:14.5px;padding:14px 26px;border-radius:999px;transition:.35s var(--soft)}
.hero .cta:hover{background:var(--terracotta);color:#fff;transform:translateY(-2px)}
.hero .cta svg{transition:transform .35s var(--soft)}
.hero .cta:hover svg{transform:translateX(4px)}
.hero .cta[hidden]{display:none}
/* co-marque : masquée. Le JS continue de peupler #merge, sans effet visuel. */
.hero .merge .chip{background:#fff;border-radius:11px;padding:9px 14px;display:flex;align-items:center}
.hero .merge .chip img{height:26px;width:auto;display:block}
.hero .merge .mtxt{font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.82);font-weight:400}
.hero .merge,#merge{display:none}
.hero .swap{transition:opacity .45s var(--soft),transform .55s var(--soft)}
.hero .content.leaving .swap{opacity:0;transform:translateY(14px)}
.hero .content.entering .swap{opacity:0;transform:translateY(22px)}

/* deck (bas, centré). pointer-events:none => la bande pleine largeur ne capte pas
   les clics au-dessus du .content ; les cartes les réactivent.
   z-index:15 : les mini-cartes doivent rester au-dessus du calque en expansion,
   auquel promote() pose z-index:4. Un deck sous 4 le laisse passer devant. */
.hero .deck{position:absolute;z-index:15;left:0;right:0;bottom:54px;display:flex;flex-direction:row;justify-content:center;gap:12px;padding:0 20px;align-items:flex-end;pointer-events:none}
.hero .card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;border:0;padding:0;flex:none;background:#222;box-shadow:0 22px 44px -22px rgba(0,0,0,.7);pointer-events:auto;
  width:clamp(96px,11vw,128px);height:clamp(116px,14vw,146px);
  transition:transform .5s var(--soft),box-shadow .5s var(--soft),opacity .5s var(--soft)}
.hero .card .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s var(--soft)}
.hero .card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,3,22,.78),transparent 58%)}
.hero .card:hover{transform:translateY(-8px)}
.hero .card:hover .img{transform:scale(1.09)}
.hero .card:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.hero .card .lbl{position:absolute;left:14px;right:12px;bottom:12px;z-index:2;text-align:left}
.hero .card .lbl .k{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.78);display:block;margin-bottom:0}
/* seul le label de catégorie (.k) reste ; le titre long (.t) est masqué */
.hero .card .lbl .t{display:none}
.hero .card.promoting{opacity:0;transform:scale(1.05);pointer-events:none}

/* barre de temps */
.hero .progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16);z-index:18}
.hero .progress i{display:block;height:100%;width:0;background:var(--terracotta);will-change:width}

/* contrôles */
.hero .controls{position:absolute;left:clamp(20px,5vw,60px);bottom:22px;z-index:18;display:flex;align-items:center;gap:16px}
.hero .counter{font-size:12px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.hero .counter b{font-size:15px;color:#fff}
.hero .play{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.25s}
.hero .play:hover{background:rgba(255,255,255,.18)}
.hero .play svg{width:13px;height:13px;fill:currentColor}

@media(max-width:820px){
  /* la hauteur est portée par .hero-stage (100svh) + flex:1 sur .hero */

  /* compression verticale du contenu (le fix titre break-word/hyphens reste hérité de la base).
     top réduit (82->60 / 112->96) : remonte le contenu pour dégager les vignettes sur les
     petits écrans (ex. iPhone SE 375x667) où le CTA du slide long les recouvrait. bottom:auto
     neutralise le bottom:150px de la base (le mobile reste ancré en haut, pas centré). */
  .hero .content{left:20px;right:20px;bottom:auto;top:clamp(60px,8vh,96px);transform:none;max-width:none}
  /* #title / #lead repris ici : la base les cible par id, une surcharge en .hero h1 perdrait */
  .hero #title,.hero h1{font-size:clamp(1.75rem,7vw,2.35rem);line-height:1.06;max-width:100%}
  .hero #lead,.hero .lead{margin-top:10px;font-size:.88rem;max-width:min(100%,32ch)}
  .hero .cta{margin-top:12px;padding:11px 20px;font-size:13.5px}
  .hero .merge{margin-top:13px;gap:6px}
  .hero .merge .chip{padding:7px 11px}
  .hero .merge .chip img{height:22px}

  /* (3) DECK : fenêtre de 3 cartes en clip-path. Le deck reste PLEINE LARGEUR
     (left:0;right:0) pour que le positionnement absolu de la carte sortante (JS) reste
     correct. La 4e carte est RENDUE (width>0 -> FLIP OK, plus de pop) mais masquée par
     le clip-path, qui clippe aussi les sorties. -80px haut/bas pour ne pas rogner les ombres. */
  .hero .deck{
    --cw:clamp(90px,29vw,112px);
    --gap:8px;
    --group:calc(3 * var(--cw) + 2 * var(--gap));
    --side:calc((100% - var(--group)) / 2);   /* marge pour centrer les 3 cartes */

    left:0; right:0; bottom:48px;
    gap:var(--gap);
    justify-content:flex-start;
    padding-left:var(--side);                  /* les 3 cartes tombent centrées */
    clip-path:inset(-80px var(--side) -80px var(--side));  /* masque la 4e (rendue) et clippe les sorties */
  }
  .hero .card{width:clamp(90px,29vw,112px);height:160px}

  /* (1) CARTES : libellé court seul, en bas à gauche, 2 lignes max ; scrim conservé (::after) */
  .hero .card .lbl{left:12px;right:12px;bottom:11px}
  .hero .card .lbl .t{display:none}
  .hero .card .lbl .k{font-size:13.5px;font-weight:600;line-height:1.18;letter-spacing:.01em;text-transform:none;color:#fff;margin-bottom:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .hero .controls{bottom:16px;left:20px}

  /* Essence : slab aligné PILE sur les bords de la hero (margin:20px) à toutes les
     largeurs mobiles. Piloté par l'id #agence (spécificité 1,x,0) pour battre la base
     .ess{padding:...22px} qui, plus bas dans le fichier, gagnait à spécificité égale.
     Inset unique = les 20px de #agence .wrap ; #agence neutralise le 22px de .ess.
     Padding intérieur du slab, radius, dégradé, filigrane : intacts. */
  #agence{padding-left:0;padding-right:0}
  #agence .wrap{max-width:none;padding:0 20px}
}

/* ≤768 : DECK téléphone. Le rail n'est PAS un conteneur scrollable (deck flex
   piloté en JS/FLIP) : la « fenêtre » reste le clip-path, insets latéraux
   fixés à 20px, alignés sur le padding-inline (les coins arrondis 40px du
   hero ne rognent plus les cartes). EXACTEMENT 3 cartes entières : la 4e,
   rendue pour le FLIP, commence à un gap au-delà du bord visible et reste
   intégralement clippée. Hauteur : jamais de px, aspect-ratio 95/136 —
   la hauteur suit la largeur.
   Le translateY(-8px) du :hover est neutralisé ici : au tactile, le hover
   collant reste sur la card tapée (nœuds réutilisés par le cache JS) et la
   soulevait hors de l'axe des autres. Le transform de base ne contient que
   ce translateY (le scale(1.09) vit sur .img, distinct, conservé) ; la
   transition de .hero .card reste intacte. */
@media(max-width:768px){
  .hero .deck{
    --cw:calc((100% - 2*var(--gap))/3);   /* 3 cartes + 2 gaps = largeur utile */
    padding-inline:20px;
    clip-path:inset(-80px 20px);
  }
  .hero .card{flex:0 0 var(--cw);width:var(--cw);height:auto;aspect-ratio:95/136}
  .hero .card:hover{transform:none}
  .hero .card .lbl{left:9px;right:8px}
  .hero .card .lbl .k{font-size:clamp(11px,3.3vw,13.5px);hyphens:auto}
}
@media(prefers-reduced-motion:reduce){
  .hero .layer .img,.hero .card .img{transform:none}
}

/* ===== HERO SIMPLIFIÉ — slider retiré + lisibilité (retours client 07/2026) =====
   Aucune règle slider n'est supprimée (code mort accepté). Ce bloc, placé en fin de
   section hero, neutralise les résidus actifs et applique la lisibilité, en gagnant la
   cascade par l'ordre (à spécificité égale) ou par une spécificité supérieure. */
/* ÉTAPE 2 — .controls (compteur + play) reste dans le DOM (requis par main.js :
   paintContent/#cur, init/#total, listener/#play) mais est neutralisé SANS display:none. */
.hero .controls{visibility:hidden;pointer-events:none}
/* ÉTAPE 4a — « One Provence Promotion » (l'<em> du titre) passe en terracotta au lieu
   du ciel, pour le contraste sur la photo. .content ajoute une classe → (1,2,1) bat le
   .hero #title em{color:ciel} de base (1,1,1). */
.hero .content #title em{color:var(--terracotta)}
/* ÉTAPE 4b — texte d'explication agrandi (~+2.5px desktop) ; hiérarchie préservée
   (le titre reste nettement plus grand). .hero #lead (1,1,0) bat .hero .lead (0,2,0). */
.hero #lead{font-size:clamp(1.05rem,1.6vw,1.28rem)}
/* ===== HERO — cadrage image (retours client 07/2026) =====
   Ancrage bas de l'image (roues du vélo visibles). background-position seul : c'est un
   cadrage, pas un traitement — l'image reste intégralement nette (aucun filtre, flou,
   teinte ni overlay au-dessus d'elle ; approche flou/scrim/frost abandonnée). */
.hero .layer .img{background-position:center bottom}

/* ===== DESKTOP (> breakpoint tablette 820px) ===== */
@media(min-width:821px){
  /* recentrage vertical (deck retiré) : #content plein cadre, texte centré. */
  .hero .content{bottom:0}
}

/* ===== MOBILE (≤ 820px) ===== */
@media(max-width:820px){
  .hero #lead{font-size:.97rem}
}

/* ===== SECTION SHELL ===== */
section.block{padding:clamp(70px,11vh,124px) 0}
.kicker{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:18px}
.kicker::before{content:"";width:30px;height:2px;background:linear-gradient(90deg,var(--terracotta),var(--nuit))}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;color:var(--nuit);letter-spacing:-.02em;line-height:1.08;max-width:20ch;text-wrap:balance}

/* ===== L'AGENCE : dégradé de fusion terracotta -> nuit ===== */
.ess{padding:clamp(40px,7vw,96px) 22px}
/* dégradé de fusion : terracotta dominant, nuit en pôle d'accent.
   stops plats aux extrémités + background-size:104% = anti-hairline (cf. .t-fusion). */
.ess-slab{position:relative;overflow:hidden;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,var(--terracotta) 0%,var(--terracotta) 32%,var(--nuit) 84%,var(--nuit) 100%);
  background-size:104% 104%;background-position:center;
  padding:clamp(32px,5vw,72px);box-shadow:0 30px 70px -32px rgba(225,78,65,.55)}
/* filigrane multi-P officiel : coin haut-droite (habille le vide à droite du texte),
   sous le contenu (z-index:1 < .ess-inner z-index:2), clippé par overflow:hidden du slab.
   scaleX(-1) : le motif "regarde" vers le coin droit. */
.ess-fila{position:absolute;top:0;right:0;left:auto;width:min(85%,720px);height:auto;z-index:1;opacity:.14;pointer-events:none;user-select:none;transform:scaleX(-1)}
/* ÉTAPE 2/3 — colonne de texte élargie (760px→900px) : c'est ELLE qui bridait le
   titre à 3 lignes (le max-width posé sur le h2 restait plafonné par ce parent).
   À 900px, le titre FR ET EN tombent naturellement sur 2 lignes en desktop, et les
   paragraphes (max-width:90%) occupent ~810px, soit ~90 % de la colonne (ÉTAPE 3). */
.ess-inner{position:relative;z-index:2;max-width:900px}
.ess-slab .kicker{color:#fff;opacity:.92}
/* tiret décoratif du kicker masqué UNIQUEMENT dans l'Essence (conservé ailleurs) */
.ess-slab .kicker::before{display:none}
.ess-brand{display:flex;align-items:flex-start;margin:0 0 26px}
.ess-brand img{width:196px;height:auto;display:block}
.ess-slab h2{color:#fff}
/* respiration sous le titre.
   ÉTAPE 2 — le titre est laissé libre dans sa colonne (max-width:none écrase le
   h2{max-width:20ch} de base) : c'est la largeur de .ess-inner (900px) qui gouverne
   et produit 2 lignes en desktop, FR comme EN. Pas de <br> en dur (FR/EN diffèrent). */
.ess-inner h2{margin-bottom:22px;max-width:none}
/* ÉTAPE 3 — bloc de paragraphes élargi à 90 % de la largeur interne du pavé
   (.ess-inner, désormais 900px → ~810px), au lieu de 62ch (~72 %).
   ÉTAPE 5 — aération : ~1.35em de marge basse entre les trois paragraphes. */
.ess-slab p{color:#fff;opacity:.96;max-width:90%;margin-bottom:1.35em}
/* mise en exergue des <strong> du corps fusion : blanc plein + graisse supérieure,
   pour rester lisibles sur le gradient terracotta->nuit. Scopé au slab uniquement. */
.ess-slab p strong{color:#fff;font-weight:700}
/* ligne de chute : signature sobre, un cran au-dessus du corps, lisible sur les 2 pôles */
.ess-inner .ess-kicker-line{margin-top:14px;font-size:1.15em;font-weight:500;opacity:1}
.ess-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px;max-width:620px}
.ess-stat{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:20px 22px}
.ess-stat b{display:block;font-size:clamp(1.7rem,3.4vw,2.15rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff}
.ess-stat b span{font-size:.9rem;font-weight:600;color:#fff}
.ess-stat>span{display:block;margin-top:8px;font-size:.82rem;line-height:1.35;opacity:.85}
@media(max-width:640px){.ess-fila{width:min(88%,300px)}.ess-inner{max-width:none}.ess-stats{grid-template-columns:1fr;gap:11px;max-width:none}.ess-brand img{width:158px}}

/* ===== CHIFFRES CLÉS ===== */
.kc-intro{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;line-height:1.4;color:var(--nuit);max-width:48ch;text-wrap:balance;margin-inline:0;text-align:left}
.kc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,26px);margin-top:clamp(32px,4.6vh,48px);text-align:center}
/* ÉTAPE 6 — chaque chiffre clé dans une carte : fond blanc plein (jamais ciel dilué
   ni beige), radius 22px, ombre/bordure sobres. Le numéral reste terracotta (.kc-item b),
   le libellé reste anthracite (.kc-item span) : « million d'habitants » vit dans le libellé
   → n'hérite jamais du terracotta du grand numéral. */
.kc-item{background:#fff;border:1px solid rgba(112,111,111,.12);border-radius:22px;box-shadow:0 10px 30px -18px rgba(0,5,96,.16);padding:clamp(24px,3vw,34px) clamp(14px,2vw,22px);display:flex;flex-direction:column;justify-content:center}
.kc-item b{display:block;font-weight:700;font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1;letter-spacing:-.03em;color:var(--terracotta);font-variant-numeric:tabular-nums}
.kc-item span{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--anthracite)}
/* ÉTAPE 7 — source : mention discrète, petit corps anthracite, sous le bloc de chiffres */
.kc-source{margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--anthracite);opacity:.85}
.kc-aside{margin:clamp(24px,4vh,32px) auto 0;text-align:center;font-size:15px;font-weight:400;font-style:italic;color:var(--terracotta);line-height:1.5;max-width:72ch}
/* ÉTAPE 1 — intro Chiffres clés : AMP en exergue, description flush gauche.
   __desc conserve la font-size héritée de .kc-intro (non redéclarée). */
.kf-intro__place{color:#EC6357;font-size:1.6em;font-weight:700;line-height:1.1;display:block}
.kf-intro__desc{color:#000560;display:block}
/* ÉTAPE 2 — unité « million » réduite pour rester dans l'ordre de « 200 000 ».
   color:inherit → hérite du terracotta de .kc-item b.
   Sélecteur qualifié .kc-num .kf-stat__unit (0,2,0) pour battre la règle
   partagée .kc-item span{display:block} (0,1,1) qui, sinon, capture aussi
   l'unité et la passe en block (→ ligne propre) : on force inline sans
   toucher la règle des labels. margin-top:0 annule le 10px hérité. */
.kc-num .kf-stat__unit{display:inline;white-space:nowrap;margin-top:0;font-size:.45em;font-weight:700;color:inherit;letter-spacing:0}
/* ÉTAPE 3 — encart « Le saviez-vous » : icône soleil (frère) + texte.
   margin-top porte l'espace stats↔encart réduit de l'ÉTAPE 4. */
/* ÉTAPE 8 — encart « Le saviez-vous » : tout le bloc aligné à GAUCHE (start:0),
   distinct du titre de section (corps plus petit, cf. .kf-insight__text). */
.kf-insight{display:flex;align-items:flex-start;gap:.75rem;text-align:left;max-width:62ch;width:fit-content;margin-inline-start:0;margin-inline-end:auto;margin-top:clamp(32px,4.6vh,48px)}
@media (max-width: 768px) {
  /* mobile : bloc à gauche (pas centré), pleine largeur */
  .kf-insight{margin-inline:0;width:auto;max-width:92%}
}
.kf-insight__icon{width:2em;height:auto;flex-shrink:0;margin-top:.15em}
/* ÉTAPE 2 — clone typographique STRICT de .kf-intro__desc (valeurs réelles
   relevées : font-family/weight/line-height/letter-spacing hérités par __desc,
   déclarés explicitement ici pour garantir l'identité). */
/* ÉTAPE 8 — corps plus petit que le titre de section (qui est clamp(1.15rem…1.5rem)) :
   plafonné ici à 1.2rem pour rester nettement sous le titre. */
.kf-insight__text{font-family:'Poppins',system-ui,sans-serif;font-size:clamp(1rem,1.4vw,1.12rem);font-weight:500;line-height:1.5;letter-spacing:normal;color:#000560;font-style:normal}
.kf-insight__text strong{color:#EC6357;font-weight:700}
/* ÉTAPE 4 — espaces verticaux réduits ~40 %. Surcharge LOCALE : section.block
   est partagé avec #explorer, donc non modifié. #chiffres.block (id+classe)
   l'emporte en spécificité. padding-inline (0) inchangé. */
#chiffres.block{padding-block:clamp(42px,6.6vh,74px)}
@media(max-width:900px){.kc-grid{grid-template-columns:repeat(2,1fr);gap:30px}}
@media(max-width:520px){.kc-grid{grid-template-columns:1fr;gap:26px}}
/* Mobile : cartes chiffres = mêmes cartes blanches (radius 22px, fond blanc plein,
   jamais de teinte diluée), gap resserré. Le fond/radius/ombre viennent de la règle
   .kc-item de base ; on n'ajuste ici que le gap de grille et le padding. */
@media(max-width:768px){
  .kc-grid{gap:12px}
  .kc-item{padding:22px 16px}
}

/* ===== BENTO TABS ===== */
.tabs{display:flex;align-items:center;gap:10px;margin:38px 0 8px;flex-wrap:wrap}
.tab{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--nuit);background:#fff;border:1px solid rgba(0,5,96,.14);border-radius:999px;padding:11px 20px;cursor:pointer;transition:.35s var(--ease)}
.tab .cnt{font-size:11px;font-weight:600;color:var(--anthracite);background:var(--paper);border-radius:999px;padding:2px 8px;transition:.35s var(--ease)}
.tab:hover{border-color:var(--terracotta);transform:translateY(-1px)}
.tab[aria-selected="true"]{color:#fff;background:var(--fusion);background-size:104% 104%;background-position:center;border-color:transparent;box-shadow:0 14px 30px -16px rgba(236,99,87,.6)}
.tab[aria-selected="true"] .cnt{color:#fff;background:rgba(255,255,255,.22)}
.tab:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
/* min-height reserves 2 lines (mobile) so .bento never shifts between tabs */
.tabdesc{color:var(--anthracite);font-size:15px;line-height:1.55;font-weight:300;margin:14px 0 34px;max-width:60ch;min-height:47px;transition:opacity .3s var(--ease)}
/* desktop: keep the phrase on one line and reserve exactly one line height */
@media(min-width:900px){.tabdesc{white-space:nowrap;min-height:24px}}
.panels{position:relative}
.panel{display:none}.panel.show{display:block}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:214px;gap:16px}
.tile{position:relative;overflow:hidden;border-radius:20px;text-decoration:none;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  border:1px solid rgba(0,5,96,.06);opacity:0;transform:translateY(18px);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),opacity .55s var(--ease)}
.panel.show .tile{opacity:1;transform:none}
.panel.show .tile:nth-child(1){transition-delay:.02s}
.panel.show .tile:nth-child(2){transition-delay:.08s}
.panel.show .tile:nth-child(3){transition-delay:.14s}
.panel.show .tile:nth-child(4){transition-delay:.2s}
.tile:hover{box-shadow:0 30px 55px -32px rgba(0,5,96,.5)}
.tile:hover .ph{transform:scale(1.07)}
.tile:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.tile .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease)}
.tile .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,28,.05) 0%,rgba(8,10,28,.3) 45%,rgba(8,10,28,.82) 100%)}
.tile .u{position:relative;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;opacity:.9;margin-bottom:7px}
.tile h4{position:relative;font-size:1.2rem;font-weight:600;line-height:1.18;text-wrap:balance}
.tile p{position:relative;font-size:13px;font-weight:300;opacity:.9;margin-top:8px;max-width:40ch}
.tile .arr{position:absolute;top:24px;right:24px;z-index:3;opacity:0;transform:translate(-4px,4px);transition:.5s var(--ease)}
.tile:hover .arr{opacity:1;transform:none}
.a2{grid-column:span 2}.a3{grid-column:span 3}.a6{grid-column:span 6}.r2{grid-row:span 2}
/* colored tiles: transparent border kills the stray hairline */
.t-nuit{background:var(--nuit);border-color:transparent}
.t-ciel{background:var(--ciel);color:var(--nuit);border-color:transparent}
.t-ciel .u{color:var(--nuit-2)}
.t-fusion{background:var(--fusion);background-size:102% 102%;background-position:center;border-color:transparent;background-repeat:no-repeat}
.t-nuit .fil,.t-fusion .fil{position:absolute;inset:0;background-image:var(--fil);background-repeat:no-repeat;background-position:-8px -8px;background-size:230px auto;opacity:.15;pointer-events:none}
.feature{justify-content:center}
.feature .u{font-size:11.5px;letter-spacing:.18em;margin-bottom:14px}
.feature h4{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.01em;max-width:16ch}
.feature p{font-size:15px;margin-top:14px;max-width:52ch;opacity:.92}
.feature .go{position:relative;display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:#fff;color:var(--nuit);padding:12px 22px;border-radius:999px;font-size:14px;font-weight:600;width:fit-content;transition:.35s var(--ease)}
.feature:hover .go{transform:translateY(-2px)}
.feature .go svg{transition:transform .35s var(--ease)}.feature:hover .go svg{transform:translateX(4px)}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:46px}
.ccard{position:relative;overflow:hidden;border:1px solid rgba(0,5,96,.1);border-radius:22px;padding:36px;background:#fff;transition:.45s var(--ease)}
/* vertical fusion accent: terracotta top -> nuit bottom */
.ccard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fusion-v);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.ccard:hover{box-shadow:0 30px 55px -36px rgba(236,99,87,.5);transform:translateY(-4px)}
.ccard:hover::before{transform:scaleY(1)}
.ccard .u{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:16px}
.ccard h4{font-size:1.3rem;font-weight:600;color:var(--nuit);margin-bottom:10px;line-height:1.2}
.ccard p{color:var(--anthracite);font-size:.97rem;font-weight:300;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:14.5px;text-decoration:none;padding:13px 26px;border-radius:999px;background:var(--nuit);color:#fff;transition:.35s var(--ease)}
.btn:hover{background:var(--terracotta);transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.ccard small{display:block;margin-top:16px;color:var(--anthracite);font-size:12.5px}
.ccard small a{color:var(--nuit);font-weight:500}

#contact .ccard{
  background:#fff;
  border:1px solid rgba(112,111,111,.16);
  border-radius:22px;
  padding:24px 24px 22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  box-shadow:0 10px 30px -18px rgba(0,5,96,.16);
}
#contact .ccard::before{content:none;}            /* supprime l'ancienne barre d'accent latérale */
#contact .brand{height:44px;display:flex;align-items:center;}
#contact .brand img{height:44px;width:auto;display:block;}   /* proportions jamais altérées */
#contact .ccard .line{margin:0;font-size:16px;line-height:1.5;color:#706F6F;max-width:34ch;}
#contact .ccard .btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#EC6357;color:#fff;text-decoration:none;
  font-weight:600;font-size:15px;padding:12px 20px;border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease;
}
#contact .ccard .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(236,99,87,.7);}
#contact .ccard .btn svg{width:15px;height:15px;}
#contact .ccard .mail{margin:0;font-size:13.5px;color:#706F6F;opacity:.85;}
/* ÉTAPE 1/5 — titre de section + compacité. section.block est PARTAGÉ → non modifié ;
   surcharge locale #contact.block (top −45 %, bottom −30 %). Titre → blocs = 38px
   (même valeur que #explorer .reveal). */
#contact .wrap > .reveal h2{margin:0}
#contact .contact-grid{margin-top:38px}
#contact.block{padding-top:clamp(38px,6vh,68px);padding-bottom:clamp(49px,7.7vh,87px)}
/* ÉTAPE 4 — variante nuit du bouton (bloc Invest). Hérite tout de #contact .ccard .btn
   (radius/padding/font/letter-spacing) ; ne change que le fond. Flèche blanche via
   currentColor (color:#fff hérité). Hover : éclaircissement vers --nuit-2 + ombre nuit,
   lift translateY(-1px) conservé depuis le hover de base. */
#contact .ccard .btn--nuit{background:#000560}
#contact .ccard .btn--nuit:hover{background:#1a1f5c;box-shadow:0 12px 24px -12px rgba(0,5,96,.55)}

/* ===== FOOTER ===== */
footer{padding:0;}
.foot-panel{position:relative;margin:0 20px 20px;background:#ACDADD;border-radius:40px;padding:70px 60px 34px;overflow:hidden;}
.foot-inner{position:relative;max-width:1220px;margin:0 auto;}
.foot-top{display:grid;grid-template-columns:1.5fr .8fr .9fr;gap:52px;}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.foot-brand .foot-logo{width:240px;height:auto;display:block;}   /* proportions jamais altérées */
.foot-brand p{font-size:13.5px;line-height:1.65;color:#000560;max-width:48ch;margin:0;}
.socials{display:flex;flex-direction:column;gap:16px;margin-top:0;}
.social-group{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.sg-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.social-group.op .sg-label{color:#EC6357;}
.social-group.pp .sg-label{color:#000560;}
.sg-icons{display:flex;gap:14px;}
.sg-icons a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:999px;transition:transform .15s ease, background .15s ease;}
.sg-icons a img{width:18px;height:18px;display:block;}
/* hover : cercle teinté centré derrière l'icône, sans déplacement */
.social-group.op .sg-icons a:hover{background:rgba(236,99,87,.16);}
.social-group.pp .sg-icons a:hover{background:rgba(0,5,96,.12);}
.foot-col h5{font-size:13px;font-weight:600;color:#000560;margin:0 0 15px;letter-spacing:.02em;}
.foot-col a{display:block;font-size:13.5px;color:#000560;text-decoration:none;margin-bottom:10px;transition:color .15s ease;width:fit-content;opacity:.88;}
.foot-col a:hover{color:#EC6357;opacity:1;}
/* les icônes sociales vivent désormais dans .foot-col : on neutralise la règle
   générique des liens texte ci-dessus (display:block + fit-content + margin
   écrasaient le carré 38px et déformaient le hover en pilule) */
.foot-col .sg-icons a{display:flex;width:38px;height:38px;margin-bottom:0;opacity:1;}
.foot-col .static{font-size:13.5px;color:#000560;margin-bottom:5px;opacity:.88;}
.foot-col .static:first-of-type{font-weight:600;opacity:1;}
.foot-bot{max-width:1220px;margin:38px auto 0;padding-top:20px;border-top:1px solid rgba(0,5,96,.16);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.legal{display:flex;gap:22px;}
.legal a{font-size:12.5px;color:#000560;text-decoration:none;opacity:.82;}
.legal a:hover{color:#EC6357;opacity:1;}
.cr{font-size:12.5px;color:#000560;opacity:.72;}
@media(max-width:860px){
  .foot-panel{padding:48px 26px 28px;margin:0 12px 12px;border-radius:28px;}
  .foot-top{grid-template-columns:1fr;gap:34px;}
}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== responsive ===== */
@media(max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .a2,.a3,.a6{grid-column:span 2}.r2{grid-row:span 1}.feature{grid-row:span 2}
  .contact-grid{grid-template-columns:1fr}
  .nav a:not(.lang-wrap){display:none}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}.a2,.a3,.a6,.feature{grid-column:span 1}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}.panel.show .tile{opacity:1;transform:none}
}

/* ===== BENTO PAGES CLÉS (#explorer) ===== */
/* clip + ancrage du filigrane officiel réutilisé, coin haut-gauche */
#explorer{position:relative;overflow:hidden}
#explorer .wrap{position:relative}
#explorer .ess-fila{left:0;right:auto;transform:none;width:min(72%,620px);z-index:0}
/* pas de tiret décoratif devant le kicker de cette section (comme l'Essence) */
#explorer .kicker::before{display:none}
/* respiration entre le bloc titre et la grille bento */
#explorer .reveal{margin-bottom:38px}

/* ÉTAPE 9 — CORRECTIF PICTO « Vivre et travailler ici ».
   Cause réelle (hypothèse « injection innerHTML » INFIRMÉE : le <i class="ic"> est un
   FRÈRE des nœuds traduits <span data-fr>/<h3 data-fr>, jamais un enfant → setLang()
   ne l'écrase pas) : les cartes avaient une hauteur de ligne FIXE (190px) et .pk porte
   overflow:hidden + justify-content:flex-end, l'icône étant poussée en HAUT par
   margin-bottom:auto. Sur les largeurs intermédiaires, le surtitre (« Vivre et travailler
   ici », le plus long) + un titre sur 3 lignes dépassaient 190px → le contenu débordait
   par le HAUT et l'icône, ancrée en haut, était rognée (« disparaît parfois »).
   Fix : rangées extensibles (minmax(190px,auto)) → la carte grandit pour tout contenir. */
.bento-pk{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:16px}
.pk{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:22px;padding:24px;overflow:hidden;text-decoration:none;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pk:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,5,96,.45)}
.pk:focus-visible{outline:3px solid var(--nuit);outline-offset:3px}

/* icône via mask → recolorable par carte */
.pk .ic{width:48px;height:48px;margin-bottom:auto;flex-shrink:0;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
/* typo uniformisée : surtitre unique 11px/700 ; titres 24px/700 (grandes cartes
   .big / .photo.wide / .sig) et 18px/600 (petites cartes) */
.pk .u{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin:14px 0 6px}
.pk h3{font-size:18px;font-weight:600;line-height:1.25}
.pk.big h3,.pk.photo.wide h3{font-size:24px;font-weight:700;line-height:1.15}
.pk.sig h3{font-size:24px;font-weight:700;line-height:1.15;max-width:58ch}
.pk .arr{position:absolute;top:22px;right:22px;width:20px;height:20px;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:transform .3s}
.pk:hover .arr{transform:translate(3px,-3px)}
/* .pk .brand supprimé : labels d'entité retirés des cards RAYONNEMENT / ATTRACTIVITÉ (plus aucun usage) */

/* photo */
.pk.photo{color:#fff;background-color:var(--nuit);background-size:cover;background-position:center}
/* Overlay d'assombrissement SUPPRIMÉ (décision client) : photos à luminosité
   native. Le contraste du texte est assuré par le drop-shadow ci-dessous.
   L'arrondi provient de .pk (border-radius + overflow:hidden), pas d'ici. */
.pk.photo .ic{background:#fff}.pk.photo .arr{stroke:#fff}
/* ÉTAPE 5b — contraste par ombre portée DIRECTEMENT sur le texte (surtitre + titre)
   des cartes photo, jamais sur le conteneur (sinon halo rectangulaire). */
.pk.photo .u,.pk.photo h3{filter:drop-shadow(0 2px 12px rgba(0,0,0,.9))}
/* card « Acteurs des transitions » (photo La Ciotat en background-image, pas
   un <img> → object-position sans effet, on pilote background-position) :
   ancrage vertical à 88% pour cadrer sur la MER (plan d'eau au premier plan)
   et les BÂTIMENTS du chantier naval, plutôt que sur la grue et les montagnes
   du haut qui coupaient mal le sujet. Aucun scale ni transform ajouté. */
.pk.photo.sig{background-position:center 88%}

/* aplat ciel : texte nuit, icône terracotta */
.pk.ciel{background:var(--ciel);color:var(--nuit)}
.pk.ciel .u,.pk.ciel h3{color:var(--nuit)}
.pk.ciel .ic{background:var(--terracotta)}.pk.ciel .arr{stroke:var(--nuit)}

/* aplat terracotta */
.pk.terra{background:var(--terracotta);color:#fff}
.pk.terra .u,.pk.terra h3{color:#fff}
.pk.terra .ic{background:#fff}.pk.terra .arr{stroke:#fff}

/* fusion terracotta→nuit (fix liseré : stops 4% + size 104%) */
.pk.fusion{color:#fff;
  background-image:linear-gradient(135deg,var(--terracotta) 0%,var(--terracotta) 4%,var(--nuit) 96%,var(--nuit) 100%);
  background-size:104% 104%;background-position:center}
.pk.fusion .ic{background:#fff}.pk.fusion .arr{stroke:#fff}

/* aplat nuit plein */
.pk.nuit{background:var(--nuit);color:#fff}
.pk.nuit .u,.pk.nuit h3{color:#fff}
.pk.nuit .ic{background:#fff}.pk.nuit .arr{stroke:#fff}

/* spans */
.pk.big{grid-column:span 2;grid-row:span 2}
.pk.wide{grid-column:span 2}
.pk.sig{grid-column:span 4;min-height:220px}

@media(max-width:760px){
  .bento-pk{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .pk{min-height:150px}.pk.big,.pk.wide,.pk.sig{grid-column:auto;grid-row:auto}
  .pk.photo{min-height:200px}.pk.sig{min-height:200px}
}
@media(prefers-reduced-motion:reduce){.pk,.pk .arr{transition:none}.pk:hover{transform:none}}

/* ===== PAGES LÉGALES (mentions-legales / politique) — gabarit ===== */
/* conteneur large : 98 % / max 1920px ; filigrane clippé, une seule fois */
.legal-page{position:relative;overflow:hidden;width:98%;max-width:1920px;margin:0 auto;padding:clamp(40px,7vh,90px) 0 clamp(64px,10vh,120px)}
.legal-page .ess-fila{left:0;right:auto;transform:none}
/* colonne de texte lisible, centrée */
.legal-content{position:relative;z-index:2;max-width:75ch;margin-inline:auto;padding:0 clamp(20px,5vw,56px)}
.legal-content h1{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;color:var(--nuit);letter-spacing:-.02em;line-height:1.08;margin:0 0 8px}
.legal-content .legal-meta{color:var(--anthracite);font-size:14px;margin:0 0 clamp(28px,5vh,48px)}
.legal-content h2{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;color:var(--nuit);letter-spacing:-.01em;margin:clamp(34px,6vh,56px) 0 14px}
.legal-content p{color:var(--anthracite);font-size:16px;line-height:1.7;margin:0 0 16px}
.legal-content #a-completer{font-weight:600;color:var(--nuit)}
.legal-content .legal-authority{margin-top:clamp(34px,6vh,56px);font-style:italic;font-size:14.5px}
.legal-content a{color:var(--nuit);text-decoration:underline}
.legal-content a:hover{color:var(--terracotta)}