/* ==========================================================================
   TADAGBÉ — feuille de style principale
   Reproduction fidèle des maquettes + animations modernes
   ========================================================================== */

/* ---------- 1. Variables ------------------------------------------------- */
:root{
  --noir:#0A0A0A;
  --noir-2:#111111;
  --noir-3:#1A1A1A;
  --vert:#3E8035;
  --vert-clair:#5DBA3F;
  --vert-fonce:#0B3A16;
  --vert-nuit:#05230B;
  --vert-nuit-2:#041A07;
  --or:#E9AC26;
  --or-clair:#F2C14E;
  --bleu:#2F63A8;
  --violet:#5B3E9B;
  --rouge:#C7362F;
  --gris:#F7F7F7;
  --gris-2:#EFEFEF;
  --bord:#E4E4E4;
  --texte:#1C1C1C;
  --texte-2:#5A5A5A;
  --texte-3:#8A8A8A;
  --blanc:#FFFFFF;

  --wrap:1480px;
  --r:10px;
  --r-lg:14px;
  --ombre:0 2px 10px rgba(0,0,0,.06);
  --ombre-fort:0 18px 40px -18px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:74px;
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--texte);
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:'Archivo',Arial,sans-serif;margin:0;line-height:1.1;font-weight:800;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
/* `height:auto` est indispensable maintenant que chaque <img> porte ses
   dimensions réelles : sans lui, `max-width:100%` réduirait la largeur en
   laissant la hauteur de l'attribut, et toutes les images seraient écrasées.
   Les dimensions servent au navigateur à réserver la place avant le
   chargement — c'est ce qui empêche la page de sauter sous les doigts. */
img{max-width:100%;height:auto;display:block}

/* ---------- 2 bis. Navigation au clavier --------------------------------- */
/* Sans repère visible, tabuler dans le site revenait à avancer les yeux
   fermés. `:focus-visible` et non `:focus` : la bague n'apparaît qu'au
   clavier, jamais au clic à la souris.

   Deux couches, parce qu'aucune couleur unique ne tient sur les deux fonds du
   site : l'or ressort sur l'en-tête et les héros noirs, le halo sombre ressort
   sur les sections blanches. L'outline n'est jamais rogné par un overflow,
   contrairement à l'ombre — d'où l'or en outline et le halo en ombre. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--or);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(10,10,10,.55);
  border-radius:4px;
}

/* Lien d'évitement : premier élément focusable de chaque page. Hors écran
   tant qu'on ne l'atteint pas, il permet de sauter les treize entrées de
   menu répétées sur chaque page pour aller droit au contenu. */
.skip{
  position:fixed;top:10px;left:10px;z-index:1000;
  transform:translateY(-160%);
  background:var(--or);color:#1A1200;font-weight:800;font-size:13px;
  padding:11px 18px;border-radius:6px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  transition:transform .2s var(--ease);
}
.skip:focus{transform:none}
/* La cible reçoit le focus par programme : pas de bague, on n'a rien
   « sélectionné », on a seulement déplacé la lecture. */
main:focus{outline:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
svg{flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--or);color:#000}

/* barre de progression du défilement */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--vert),var(--or),var(--rouge));transition:width .1s linear}

/* ---------- 3. En-tête --------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;background:var(--noir);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.header.is-stuck{background:rgba(8,8,8,.92);backdrop-filter:blur(14px);box-shadow:0 10px 30px -12px rgba(0,0,0,.9)}
.header .wrap{display:flex;align-items:center;gap:20px;height:var(--header-h);max-width:1560px}

.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand__mark{width:42px;height:40px;object-fit:contain;transition:transform .5s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.08)}
.brand__txt{display:flex;flex-direction:column;justify-content:center}
.brand__name{font-family:'Archivo',sans-serif;font-weight:800;font-size:23px;color:#fff;letter-spacing:.5px;line-height:1}
.brand__tag{font-size:7.5px;line-height:1.28;letter-spacing:.4px;font-weight:600;margin-top:3px;text-transform:uppercase}
.brand__tag span{display:block;color:#EDEDED}
.brand__tag span+span{color:var(--or)}

.nav{display:flex;align-items:center;gap:10px;margin:0 auto}
.nav a{
  position:relative;color:#E9E9E9;font-size:10.9px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap;padding:6px 0;transition:color .25s
}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;background:var(--or);
  transform:translateX(-50%);transition:width .35s var(--ease)
}
.nav a:hover{color:#fff}
.nav a:hover::after{width:100%}
.nav a.is-active{color:var(--or)}
.nav a.is-active::after{width:100%}

.btn-head{flex:none;padding:12px 15px;font-size:11px;letter-spacing:.05em}
/* bouton compte « Se connecter » */
.btn-head--connect{padding:11px 16px;font-size:11px;gap:8px}
.btn-head--connect:hover{--bg:rgba(255,255,255,.14)}
/* Le CTA « Rejoignez-nous » ne s'affiche que lorsqu'il a réellement la place.
   Le bouton de compte, lui, ne se cache JAMAIS : il porte la classe .btn-head
   sous ses deux formes — « Se connecter » (.btn-head--connect) et le profil
   posé par assets/js/entete.js quand une session est ouverte (.btn-head--moi).
   Oublier l'une des deux dans ce :not() fait disparaître l'accès à l'espace. */
@media(max-width:1470px){
  .btn-head:not(.btn-head--connect):not(.btn-head--moi){display:none}
}
.burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.burger span{width:24px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 4. Boutons --------------------------------------------------- */
.btn{
  --bg:var(--vert);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);color:var(--fg);border-radius:6px;padding:13px 24px;
  font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.22);
  transform:translateX(-101%);transition:transform .5s var(--ease)
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(0,0,0,.55)}
.btn:hover::before{transform:translateX(0)}
.btn:active{transform:translateY(-1px)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--or{--bg:var(--or);--fg:#1A1200}
.btn--vert-fonce{--bg:#14532B;--fg:#fff}
.btn--noir{--bg:#0E0E0E;--fg:#fff}
.btn--blanc{--bg:#fff;--fg:#141414}
.btn--sm{padding:10px 18px;font-size:11px}
.btn--lg{padding:16px 30px;font-size:13px}
.btn--full{width:100%}
.btn--ghost{--bg:transparent;--fg:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn--ghost:hover{--bg:rgba(255,255,255,.1)}
.btn--outline{--bg:transparent;--fg:var(--texte);border:1px solid var(--bord)}
.btn--outline:hover{--bg:var(--gris)}

.play{
  display:inline-flex;align-items:center;gap:14px;color:#fff;font-weight:700;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase
}
.play__ic{
  width:46px;height:46px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;
  transition:transform .4s var(--ease),background .3s;position:relative
}
.play__ic::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.6);
  animation:ping 2.6s var(--ease) infinite
}
.play:hover .play__ic{transform:scale(1.1);background:rgba(255,255,255,.15)}
@keyframes ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.55);opacity:0}}

/* ---------- 5. Titres de section ---------------------------------------- */
.stitle{text-align:center;margin-bottom:26px}
.stitle h2{font-size:25px;text-transform:uppercase;letter-spacing:.01em}
.stitle .bar{width:56px;height:3px;background:var(--or);border-radius:2px;margin:9px auto 0;
  transform:scaleX(0);transform-origin:center;transition:transform .7s var(--ease) .15s}
.is-in .stitle .bar,.stitle.is-in .bar{transform:scaleX(1)}
.stitle--left{text-align:left}
.stitle--left .bar{margin-left:0}
.stitle--row{display:flex;align-items:center;gap:16px;text-align:left;margin-bottom:18px}
.stitle--row h2{font-size:20px}
.stitle--row .bar{margin:0;flex:1;max-width:120px;height:3px}

.eyebrow{color:var(--or);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- 6. Animations au défilement ---------------------------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal--l{transform:translateX(-36px)}
.reveal--r{transform:translateX(36px)}
.reveal--z{transform:scale(.94)}
.reveal--none{transform:none}
[data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-stagger].is-in>*{opacity:1;transform:none}
.tilt{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* Un bloc en colonne de droite attend son apparition décalé de 36 px vers
   l'extérieur : invisible, mais il élargit la page, qui se met à défiler sur
   le côté. Vu à 375, 390, 768 et 1024 px selon les pages.
   `clip` retient ce débordement sans créer de zone de défilement — donc sans
   casser les éléments collants — et sans rien changer à l'animation.
   Même écriture que `.main` de l'espace membre : `hidden` d'abord comme repli
   pour les navigateurs anciens, `clip` ensuite pour ceux qui le connaissent —
   `hidden` seul créerait un conteneur de défilement et casserait les
   position:sticky à l'intérieur (le panneau des formulaires). */
main{overflow-x:hidden;overflow-x:clip}
/* Sur une colonne unique, le glissement latéral n'apporte plus rien : il se
   fait vertical, comme le reveal par défaut. */
@media(max-width:820px){
  .reveal--l,.reveal--r{transform:translateY(28px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal,[data-stagger]>*{opacity:1!important;transform:none!important}
}

/* ---------- 7. Héros ----------------------------------------------------- */
.hero{position:relative;background:#000;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-6% 0 -6%;background-size:cover;background-position:center;z-index:-2;
  will-change:transform;transform:scale(1.06);animation:heroIn 1.6s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.16);opacity:.4}to{transform:scale(1.06);opacity:1}}
.hero__veil{position:absolute;inset:0;z-index:-1}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff}

/* voile standard : dégradé noir depuis la gauche */
.veil-l{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.2) 72%,rgba(0,0,0,.45) 100%)}
.veil-l2{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.3) 100%)}
.veil-full{background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.72) 50%,rgba(0,0,0,.85))}

/* ---------- 8. Réseaux sociaux flottants -------------------------------- */
.social-rail{position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:12px}
.social-rail a{
  width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
  display:grid;place-items:center;color:#fff;transition:transform .35s var(--ease),background .3s,border-color .3s
}
.social-rail a:hover{background:#fff;color:#111;transform:translateX(-4px) scale(1.1);border-color:#fff}

/* ---------- 9. Cartes génériques ---------------------------------------- */
.card{background:#fff;border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--ombre-fort);border-color:#D6D6D6}
.card__img{overflow:hidden;background:#151515}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__img img{transform:scale(1.07)}

.ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:transform .45s var(--ease)}
.card:hover .ic,.pill:hover .ic{transform:scale(1.12) rotate(-5deg)}
.ic--ring{border:2px solid currentColor;background:transparent}
.ic--soft{background:color-mix(in srgb,currentColor 14%,transparent)}
.c-vert{color:var(--vert)}
.c-or{color:var(--or)}
.c-bleu{color:var(--bleu)}
.c-violet{color:var(--violet)}
.c-rouge{color:var(--rouge)}
.c-vertf{color:#1F6B33}

.lien{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;color:var(--vert);
  transition:gap .3s var(--ease),color .3s}
.lien svg{transition:transform .35s var(--ease)}
.lien:hover{gap:11px}
.lien:hover svg{transform:translateX(3px)}
.lien--or{color:var(--or)}

/* ---------- 10. Compteurs / stats --------------------------------------- */
.stat__n{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em}
.stat__l{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);margin-top:5px}

/* ---------- 11. Bandeau logos partenaires ------------------------------- */
.logos{display:flex;align-items:center}
.logos img{height:44px;width:auto;object-fit:contain;opacity:.92;
  transition:opacity .4s,transform .4s var(--ease)}
.logos img:hover{opacity:1;transform:scale(1.07)}
.logos--split>*{flex:1;display:grid;place-items:center;padding:0 14px;border-right:1px solid var(--bord)}
.logos--split>*:last-child{border-right:0}

.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:56px;align-items:center;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 12. Pied de page -------------------------------------------- */
.footer{background:#0B0B0B;color:#D6D6D6;padding:46px 0 0;position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 12% 20%,var(--or) 0 2px,transparent 3px),
                   radial-gradient(circle at 78% 66%,var(--vert-clair) 0 2px,transparent 3px);
  background-size:120px 120px
}
.footer__grid{display:grid;grid-template-columns:1.35fr 1.5fr .85fr 1fr 1.1fr;gap:30px;position:relative}
/* Une colonne de grille ne descend pas sous la taille de son contenu tant
   qu'on ne le lui autorise pas : sans ce min-width, un titre un peu long
   suffit à faire déborder toute la rangée vers la droite. */
.footer__grid>*{min-width:0}
.footer h4{font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer a{color:#BDBDBD;font-size:13.5px;transition:color .25s,transform .25s var(--ease);display:inline-block}
.footer a:hover{color:var(--or);transform:translateX(3px)}
.footer li{margin-bottom:8px}
.footer .brand__name{font-size:22px}
.f-desc{font-size:13px;line-height:1.7;color:#9E9E9E;margin-top:14px;max-width:280px}
.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.f-cols--3{grid-template-columns:1fr 1fr 1fr}
.f-contact li{display:flex;gap:10px;align-items:flex-start;color:#CFCFCF;font-size:13.5px;margin-bottom:12px}
.f-contact svg{color:var(--or);margin-top:3px}
.f-news{background:#0E2312;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:20px}
.f-news p{font-size:12.8px;color:#B6C7B8;margin:8px 0 14px;line-height:1.6}
.f-form{display:flex;gap:8px}
.f-form input{
  flex:1;min-width:0;background:#fff;border:1px solid transparent;border-radius:5px;padding:9px 12px;
  font-size:13px;color:#111;transition:box-shadow .3s
}
.f-form input:focus{outline:none;box-shadow:0 0 0 3px rgba(233,172,38,.45)}
.f-form button{background:var(--vert);color:#fff;border-radius:5px;padding:9px 16px;font-size:11.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:background .3s,transform .3s var(--ease)}
.f-form button:hover{background:#4B9A40;transform:translateY(-2px)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:32px;height:32px;border-radius:50%;background:#1C1C1C;display:grid;place-items:center;
  color:#D8D8D8;transition:transform .35s var(--ease),background .3s,color .3s}
.socials a:hover{background:var(--or);color:#111;transform:translateY(-4px)}
.footer__bottom{
  margin-top:38px;border-top:1px solid rgba(255,255,255,.09);padding:16px 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.8px;color:#8F8F8F
}
.footer__bottom nav{display:flex;gap:26px}
/* Signature de l'agence. Discrète par construction : le pied appartient à
   TADAGBÉ, la signature s'y range sans concurrencer le copyright. */
/* `.footer a` impose déjà un display : il faut passer devant lui, sans quoi
   le libellé et le logo se mettent l'un sous l'autre. */
.footer__bottom .credit{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;
  color:#7E7E7E;flex:none;white-space:nowrap;transition:color .25s,opacity .25s}
.credit img{height:19px;width:auto;opacity:.72;transition:opacity .25s}
.credit:hover{color:#C9C9C9}
.credit:hover img{opacity:1}
@media(max-width:760px){.footer__bottom{align-items:flex-start}}

/* ---------- 13. Formulaires --------------------------------------------- */
.field{position:relative;margin-bottom:11px}
.field input,.field select,.field textarea{
  width:100%;background:#fff;color:var(--texte);border:1px solid var(--bord);border-radius:6px;
  padding:12px 14px;font-size:13.5px;transition:border-color .3s,box-shadow .3s
}
.field--ic input,.field--ic select{padding-left:38px}
.field__ic{position:absolute;left:13px;top:13px;color:var(--texte-3);pointer-events:none}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(62,128,53,.16)
}
.field textarea{resize:vertical;min-height:92px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;cursor:pointer}
.check input{margin-top:2px;accent-color:var(--vert);width:15px;height:15px;flex:none}
.form-msg{font-size:12.5px;margin-top:10px;display:none}
.form-msg.is-on{display:block;animation:fadeUp .4s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 14. Carrousels ---------------------------------------------- */
.carou{position:relative}
.carou__track{display:flex;gap:16px;overflow-x:auto;padding-inline:4px;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;scrollbar-width:none}
.carou__track::-webkit-scrollbar{display:none}
.carou__track>*{scroll-snap-align:start;flex:none}
.carou__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--bord);display:grid;place-items:center;z-index:4;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.4);transition:transform .3s var(--ease),background .3s
}
.carou__nav:hover{background:var(--or);border-color:var(--or);transform:translateY(-50%) scale(1.12)}
.carou__nav--p{left:-14px}
.carou__nav--n{right:-14px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dots button{width:7px;height:7px;border-radius:50%;background:#D2D2D2;transition:width .3s var(--ease),background .3s}
.dots button.is-on{width:20px;background:var(--or)}

/* ---------- 15. Divers --------------------------------------------------- */
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:4px;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;border:1px solid var(--bord);
  background:#fff;font-size:12.5px;font-weight:600;transition:all .3s var(--ease)}
.chip:hover{border-color:var(--vert);color:var(--vert);transform:translateY(-2px)}
.chip.is-on{background:var(--vert-fonce);border-color:var(--vert-fonce);color:#fff}
.pattern{position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,#fff 0 2px,transparent 2px 12px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 45%)}
.totop{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;background:var(--vert-fonce);
  color:#fff;display:grid;place-items:center;z-index:90;opacity:0;pointer-events:none;
  transform:translateY(14px);transition:all .4s var(--ease);box-shadow:0 12px 24px -12px rgba(0,0,0,.7)
}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--or);color:#111;transform:translateY(-3px)}

/* lightbox galerie */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:200;display:none;place-items:center;padding:36px}
.lb.is-on{display:grid;animation:fadeUp .35s var(--ease) both}
.lb img{max-width:min(1100px,92vw);max-height:82vh;border-radius:8px;object-fit:contain}
.lb__cap{color:#EDEDED;text-align:center;margin-top:14px;font-size:14px}
.lb__x,.lb__p,.lb__n{position:absolute;color:#fff;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center;transition:background .3s,transform .3s}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:rgba(255,255,255,.28);transform:scale(1.08)}
.lb__x{top:24px;right:24px}
.lb__p{left:26px;top:50%;margin-top:-23px}
.lb__n{right:26px;top:50%;margin-top:-23px}

/* lightbox vidéo (« Voir la vidéo » du héros) */
.lb--video video{width:min(1100px,92vw);max-height:82vh;border-radius:8px;background:#000;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}

/* ---------- 16. Responsive ----------------------------------------------- */
@media(max-width:1560px){
  .brand__tag{display:none}
  .brand__name{font-size:21px}
  .brand__mark{width:38px;height:36px}
  .nav{gap:10px}
  .nav a{font-size:10.9px;letter-spacing:.03em}
  .btn-head{padding:11px 14px;font-size:10.8px}
}
@media(max-width:1320px){
  .nav{gap:8px}
  .nav a{font-size:10.3px;letter-spacing:.02em}
  .brand__name{font-size:19px}
  .brand__mark{width:34px;height:32px}
  .btn-head:not(.btn-head--connect):not(.btn-head--moi){display:none}
  /* le CTA « Rejoignez-nous » libère la place : le bouton compte garde son
     libellé, il se contente de se resserrer. Sur un écran de portable un
     rond gris sans mot n'est pas reconnu comme une connexion. */
  .btn-head--connect{padding:9px 13px;font-size:10.4px;gap:7px}
}
/* dernière tranche avant le menu burger : on resserre encore, plutôt que de
   sacrifier le libellé du bouton compte */
@media(max-width:1220px){
  .nav{gap:6px}
  .nav a{font-size:10px}
  .btn-head--connect{padding:9px 11px;font-size:10.2px}
}
/* Les cinq colonnes du pied de page réclament environ 1155 px de contenu
   incompressible : en dessous, la grille poussait le pavé newsletter hors de
   l'écran. On passe à trois colonnes pendant qu'il reste de la marge. */
@media(max-width:1260px){
  .footer__grid{grid-template-columns:1fr 1fr 1fr;gap:26px}
}
@media(max-width:1080px){
  .social-rail{display:none}
}
@media(max-width:1150px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto;background:#0B0B0B;flex-direction:column;align-items:stretch;
    padding:14px 26px 26px;gap:0;margin:0;max-height:calc(100vh - var(--header-h));overflow:auto;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .35s var(--ease);
    border-bottom:1px solid rgba(255,255,255,.1)
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px}
  .nav a::after{display:none}
  .header .wrap{gap:10px}
  .btn-head:not(.btn-head--connect):not(.btn-head--moi){display:none}
  .btn-head--connect,.btn-head--moi{display:inline-flex;margin-left:auto}
  .burger{margin-left:0}
}
@media(max-width:560px){
  /* seulement sur téléphone, où la place manque réellement : la pastille
     ronde est là une convention comprise, à côté du menu burger */
  .btn-head--connect{width:40px;min-width:40px;height:40px;padding:0;gap:0;border-radius:50%;justify-content:center}
  .btn-head--connect .txt{display:none}
  .btn-head--connect svg{width:15px;height:15px}
}
@media(max-width:760px){
  .footer__grid{grid-template-columns:1fr;gap:24px}
  .f-cols{grid-template-columns:1fr 1fr}
  .footer__bottom{flex-direction:column;gap:10px}
  .footer__bottom nav{flex-wrap:wrap;gap:14px}
}

/* En-tête : le profil remplace « Se connecter » quand une session est ouverte */
.btn-head--moi{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;
  border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  color:#fff;transition:background .25s,border-color .25s,transform .25s}
.btn-head--moi:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);
  transform:translateY(-1px)}
.btn-head__av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--or);color:#1A1200;font-family:'Archivo',sans-serif;font-weight:800;font-size:11.5px}
.btn-head__id{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.btn-head__id b{font-size:12px;font-weight:700;white-space:nowrap}
.btn-head__id small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#B6C9B6}
@media(max-width:1180px){
  .btn-head--moi{padding:4px;gap:0}
  .btn-head__id{display:none}
}

/* ---------- 17. Bandeau d'information sur le stockage ---------------------
   Ce site ne dépose aucun traceur : pas de mesure d'audience, pas de
   publicité, seulement la session de connexion et le panier. Il n'y a donc
   rien à consentir, et ce bandeau n'est pas une demande de consentement mais
   une information — d'où le bouton unique.

   Placé au-dessus du bouton « revenir en haut » et à droite du bandeau de
   maquette, pour ne recouvrir ni l'un ni l'autre. */
.cookies{
  position:fixed;right:20px;bottom:78px;z-index:95;width:min(390px,calc(100vw - 40px));
  background:var(--noir);color:#DCDCDC;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:17px 19px;box-shadow:0 22px 50px -18px rgba(0,0,0,.75);
  font-size:12.6px;line-height:1.6;
  transform:translateY(16px);opacity:0;transition:transform .4s var(--ease),opacity .4s
}
.cookies.is-on{transform:none;opacity:1}
.cookies b{display:block;color:#fff;font-size:13.2px;margin-bottom:6px}
.cookies a{color:var(--or);border-bottom:1px solid rgba(233,172,38,.4)}
.cookies a:hover{border-bottom-color:var(--or)}
.cookies__act{display:flex;justify-content:flex-end;margin-top:13px}
.cookies__ok{background:var(--or);color:#1A1200;font-weight:800;font-size:11.8px;
  letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:9px 18px;
  transition:background .25s,transform .25s var(--ease)}
.cookies__ok:hover{background:var(--or-clair);transform:translateY(-1px)}
@media(max-width:620px){
  .cookies{right:12px;left:12px;width:auto;bottom:86px}
}
/* Le refus doit être aussi facile à trouver que l'accord : même taille, même
   place, seule la couleur diffère. Un « Refuser » caché ou grisé rend le
   consentement invalide. */
.cookies__non{background:transparent;color:#C9C9C9;border:1px solid rgba(255,255,255,.22);
  font-weight:700;font-size:11.8px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:6px;padding:9px 18px;margin-right:9px;transition:background .25s,color .25s}
.cookies__non:hover{background:rgba(255,255,255,.1);color:#fff}