: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}
.hero .layer .img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);will-change:transform}

/* 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 par la forme des lettres : drop-shadow, jamais text-shadow.
   Le filtre porte sur les éléments texte eux-mêmes, jamais sur .content ni sur un
   wrapper, sinon l'ombre épouse la boîte et le rectangle réapparaît. */
.hero #title,.hero h1{
  filter:
    drop-shadow(0 1px 4px rgba(0,4,26,.55))
    drop-shadow(0 0 14px rgba(0,4,26,.42))
    drop-shadow(0 0 34px rgba(0,4,26,.30));
}
.hero #lead,.hero .lead{
  filter:
    drop-shadow(0 1px 4px rgba(0,4,26,.66))
    drop-shadow(0 0 16px rgba(0,4,26,.5))
    drop-shadow(0 0 36px rgba(0,4,26,.34));
}
/* le filtre est recalculé à chaque slide (opacity + transform sur .swap) */
.hero #title,.hero #lead{will-change:filter}
/* 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 drop-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}
}

/* ===== 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)}
.ess-inner{position:relative;z-index:2;max-width:760px}
.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 */
.ess-inner h2{margin-bottom:22px}
.ess-slab p{color:#fff;opacity:.96;max-width:62ch}
/* 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(20px,3vw,44px);margin-top:clamp(32px,4.6vh,48px);text-align:center}
.kc-item b{display:block;font-weight:700;font-size:clamp(2.6rem,5vw,4.4rem);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)}
.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. */
.kf-insight{display:flex;align-items:flex-start;gap:.75rem;text-align:left;max-width:48ch;width:fit-content;margin-inline-start:auto;margin-inline-end:0;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é). */
.kf-insight__text{font-family:'Poppins',system-ui,sans-serif;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;line-height:1.4;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 : stats en cartes légères, teinte terracotta claire — rappel des
   cases de la section agence (.ess-stat : radius 16px). Grille conservée,
   gap resserré comme les cases du dessus. Desktop inchangé. */
@media(max-width:768px){
  .kc-grid{gap:14px}
  .kc-item{background:rgba(236,99,87,.07);border:1px solid rgba(236,99,87,.16);border-radius:16px;padding:20px 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}

.bento-pk{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;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;
  -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)}