@charset "UTF-8";
/* =========================================================================
   JSOI DISTRIBUTION — feuille de style commune du site multi-pages
   SOSA DIGITAL

   D'OU VIENT CE FICHIER
   Il est l'extraction de la maquette validee le 26/08, direction « la
   maison de marques », portee d'une page unique a un site de sept pages.
   Les noms de classe de la coque ne sont pas negociables : ils sont
   ecrits en dur dans jsoi_socle.py. Tout le reste est nomme dans le meme
   francais que le generateur.

   LE PRINCIPE DE MISE EN PAGE, INCHANGE
   JSOI est le PAPIER, les marques sont l'ENCRE.
   Ce qui appartient a JSOI (entete, fil, sections de service, appel, pied)
   vit sur le papier ou sur le bleu JSOI. Chaque marque distribuee occupe
   une bande pleine largeur dans SON univers chromatique, toutes au meme
   rang. Le visiteur comprend que les marques passent et que JSOI reste.
   C'est la reponse a l'audit 6/10 : on ne lit plus une plaquette de
   marque, on lit un fournisseur.

   SOMMAIRE
     1. Jetons et reglages de base
     2. Squelette, titres, boutons
     3. Entete collante, navigation, tiroir
     4. Fil d'Ariane
     5. Tete de page et hero d'accueil
     6. Ruban defilant
     7. Bandes de marque
     8. Sections de service sur papier
     9. Blocs metier : regle de livraison, catalogue, fiches, etapes
    10. Photos de terrain et visuels de composition
    11. Actualites, a propos, contact, formulaires
    12. Tableaux, textes longs, badges
    13. Appel final
    14. Pied de page
    15. Flottant WhatsApp et apparitions
    16. Mouvement reduit
   ========================================================================= */


/* =========================================================================
   1. JETONS ET REGLAGES DE BASE
   ========================================================================= */
:root{
  /* JSOI, releves sur le logo */
  --bleu:#003083;
  --bleu-clair:#0A4AB4;
  --bleu-fonce:#001C4E;
  --orange:#FC8400;
  /* ⚠️ #FC8400 sur le papier ne passe pas en petit corps. Tout texte orange
     de moins de 24 px utilise --orange-texte. L'orange pur reste reserve
     aux aplats, aux liserets et aux fonds de bouton. */
  --orange-texte:#9E4C00;

  /* papier */
  --papier:#F6F2EA;
  --papier-2:#EFE7DA;
  --blanc:#FFFFFF;
  --encre:#14161C;
  --encre-doux:#4B505C;
  --trait:rgba(0,48,131,.16);
  --trait-clair:rgba(255,255,255,.18);

  /* univers NGOUVOU */
  --nuit:#04081A;
  --jaune:#FED605;
  --magenta:#E70280;
  --creme:#EFD1AB;

  /* Teinte des marques distribuees.
     Seul le rouge Coca est fige ici, parce qu'il porte un degrade complet.
     Les autres teintes arrivent du modele de donnees, marque par marque,
     dans la propriete --t posee sur l'element. Les figer une seconde fois
     ici garantirait qu'un jour les deux ne diront plus la meme chose. */
  --coca:#E61A27;

  --display:"Arial Narrow","Roboto Condensed","Liberation Sans Narrow",
            "Helvetica Neue Condensed",Impact,"Segoe UI",system-ui,sans-serif;
  --texte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
          "Helvetica Neue",Arial,sans-serif;

  --r:14px;
  --r-petit:10px;
  --entete-h:72px;
  --ombre:0 12px 28px rgba(0,48,131,.10);
  --ombre-forte:0 18px 40px rgba(0,48,131,.14);

  /* Jetons contextuels. Ils sont redefinis, et eux seuls, dans les sections
     sombres. C'est ce qui evite de redeclarer trois fois la meme couleur
     pour chaque variante de bouton ou de sur-titre. */
  --sur-couleur:var(--orange-texte);
  --titre-couleur:var(--bleu);
  --titre-em:var(--encre);
  --fant-encre:var(--bleu);
  --fant-trait:var(--bleu);
  --fant-survol:rgba(0,48,131,.08);
}

/* Les sections posees sur du sombre. Une seule liste, un seul endroit. */
.tete,
.hero,
.appel,
.pied,
.bande-sombre,
.b-ngouvou,
.b-coca,
.b-gold{
  --sur-couleur:var(--orange);
  --titre-couleur:#fff;
  --titre-em:var(--orange);
  --fant-encre:#fff;
  --fant-trait:rgba(255,255,255,.55);
  --fant-survol:rgba(255,255,255,.14);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* l'entete est collante : une ancre doit s'arreter sous elle */
  scroll-padding-top:calc(var(--entete-h) + 1rem);
}

/* ⚠️ Theme clair unique, assume. Pas de bascule sombre, donc le fond du
   body est peint explicitement et non herite du navigateur. */
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
svg{display:block}

/* Un seul style de focus pour tout le site, visible sur papier comme sur
   bleu nuit. Il ne se declenche qu'au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- Le lien d'evitement.
   Il reste dans le flux du clavier en permanence, simplement pousse hors du
   cadre. Un display:none l'aurait retire de la sequence de tabulation, ce
   qui revient a ne pas l'avoir ecrit. ---- */
.saut{
  position:fixed;top:0;left:0;z-index:200;
  transform:translateY(-140%);
  display:inline-flex;align-items:center;min-height:48px;
  padding:.6rem 1.3rem;
  background:var(--bleu);color:#fff;
  font-weight:800;text-decoration:none;letter-spacing:.02em;
  border-radius:0 0 var(--r-petit) 0;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:transform .18s ease;
}
.saut:focus{transform:none}


/* =========================================================================
   2. SQUELETTE, TITRES, BOUTONS
   ========================================================================= */
.dedans{width:min(1180px,100% - 2.2rem);margin-inline:auto}
.dedans.etroit,
.etroit{width:min(760px,100% - 2.2rem);margin-inline:auto}

h1,h2,h3{
  margin:0;line-height:1.06;font-weight:800;
  letter-spacing:0;overflow-wrap:break-word;
}
p{margin:0}

.sur-titre{
  margin:0 0 .7rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--sur-couleur);
}

/* Le grand titre de section, en condense capitales. */
.titre{
  font-family:var(--display);text-transform:uppercase;font-weight:900;
  font-size:clamp(2rem,7.5vw,3.6rem);letter-spacing:0;
  color:var(--titre-couleur);
}
.titre em{font-style:normal;color:var(--titre-em)}

.chapeau{
  margin-top:1.1rem;max-width:62ch;
  color:var(--encre-doux);font-size:1.02rem;
}

/* ---- Boutons. Cible tactile 52 px, 44 px pour la variante petite. ---- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.6rem 1.5rem;border-radius:100px;
  text-decoration:none;font-weight:800;letter-spacing:.01em;
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.bouton:hover{transform:translateY(-2px)}
.bouton-or{background:var(--orange);border-color:var(--orange);color:var(--bleu-fonce)}
.bouton-or:hover{background:#FF9420;border-color:#FF9420}
.bouton-bleu{background:var(--bleu);border-color:var(--bleu);color:#fff}
.bouton-bleu:hover{background:var(--bleu-clair);border-color:var(--bleu-clair)}
/* Le bouton fantome prend la couleur de son contexte, papier ou sombre. */
.bouton-fant{background:transparent;color:var(--fant-encre);border-color:var(--fant-trait)}
.bouton-fant:hover{background:var(--fant-survol)}
.bouton-petit{min-height:44px;padding:.4rem 1.1rem;font-size:.9rem}
.bouton-large{width:100%}

/* Toute rangee d'actions, quel que soit le bloc qui la porte. */
.appel-actions,
.tete-actions,
.hero-actions,
.bande-actions,
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.appel-actions{justify-content:center}


/* =========================================================================
   3. ENTETE COLLANTE, NAVIGATION, TIROIR
   ========================================================================= */
/* position:sticky fait deja de .entete un bloc conteneur pour ses enfants
   absolus. Le tiroir s'y accroche en top:100%.
   ⚠️ Surtout pas de position:fixed avec un inset calcule pour le tiroir :
   le jour ou une barre s'ajoute au-dessus de l'entete, le calcul est faux
   et le menu se decolle. Ancre au parent, il suit toujours. */
.entete{
  position:sticky;top:0;z-index:60;
  background:var(--papier);
  border-bottom:2px solid var(--bleu);
}
/* ⚠️ Aucun backdrop-filter ici : il cree un contexte d'empilement qui
   emprisonne le tiroir sous l'entete sur mobile. */

.entete-in{
  display:flex;align-items:center;gap:1rem;
  min-height:var(--entete-h);
}

.logo{display:flex;align-items:center;min-height:48px;flex:0 0 auto}
.logo-img{width:132px;height:auto}

.nav{display:none;margin-left:auto;gap:.1rem}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .55rem;
  position:relative;
  text-decoration:none;font-size:.82rem;font-weight:700;
  color:var(--bleu-fonce);border-radius:8px;white-space:nowrap;
}
.nav a:hover{background:rgba(0,48,131,.08)}
/* La page courante : couleur assombrie pour le contraste, liseret orange
   pour la lisibilite immediate. */
.nav a.ici{color:var(--orange-texte)}
.nav a.ici::after{
  content:"";position:absolute;left:.55rem;right:.55rem;bottom:4px;
  height:3px;border-radius:3px;background:var(--orange);
}

/* 🚨 LE BOUTON « COMMANDER » DE L'ENTETE, VISIBLE PARTOUT.
   Il etait en `display:none` sous 1340 px, c'est-a-dire invisible sur la
   quasi-totalite des ecrans, telephones compris. Sur l'accueil, le seul
   appel a l'action visible etait donc « Je veux acheter » dans le hero,
   et plus rien du tout une fois le hero depasse.
   Signale par le client le 30/08 : « il manque le bouton commander sur
   l'accueil ». Il ne manquait pas, il etait masque.
   Il est desormais affiche des le telephone, en version compacte, entre le
   logo et le panier. C'est la disposition de n'importe quelle boutique. */
.nav-cta{
  display:inline-flex;flex:0 0 auto;margin-left:auto;
  min-height:42px;padding:0 1rem;font-size:.88rem;
}
@media (min-width:1100px){
  .nav-cta{margin-left:.8rem}
}

.burger{
  margin-left:auto;flex:0 0 auto;
  width:46px;height:46px;border:2px solid var(--bleu);
  background:transparent;border-radius:var(--r-petit);
  display:grid;place-content:center;gap:5px;cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--bleu)}
.burger[aria-expanded="true"]{background:var(--bleu)}
.burger[aria-expanded="true"] span{background:#fff}

/* ---- Le tiroir ---- */
.tiroir{
  position:absolute;top:100%;left:0;right:0;
  padding:1rem 1.1rem 1.6rem;
  background:var(--papier);
  border-bottom:3px solid var(--bleu);
  box-shadow:0 18px 30px rgba(0,48,131,.18);
  max-height:calc(100dvh - var(--entete-h));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.tiroir nav{display:grid}
.tiroir nav a{
  display:flex;align-items:center;min-height:52px;
  text-decoration:none;font-weight:800;font-size:1.05rem;
  color:var(--bleu-fonce);border-bottom:1px solid var(--trait);
}
.tiroir nav a.ici{color:var(--orange-texte)}
.tiroir .bouton{width:100%;margin-top:.8rem}
.tiroir nav + .bouton{margin-top:1.3rem}

/* Le socle pose l'attribut hidden sur le tiroir. On le rend explicite pour
   qu'aucun display: pose plus haut ne le rouvre. La seconde ligne couvre le
   cas d'un script qui bascule une classe sans retirer l'attribut. */
.tiroir[hidden]{display:none}
.tiroir[hidden].ouvert{display:block}

/* Sous 620 px, le logo se resserre. */
@media (max-width:619px){
  .logo-img{width:112px}
}

/* A partir de 1100 px, les sept entrees tiennent en ligne. */
@media (min-width:1100px){
  .nav{display:flex}
  .burger{display:none}
  .tiroir,
  .tiroir[hidden].ouvert{display:none}
}

/* A partir de 1340 px seulement, la place existe pour l'appel a l'action de
   l'entete. En dessous, l'entree « Devenir revendeur » de la navigation
   suffit : le meme lien deux fois a trente pixels d'ecart bourre la barre
   sans rien apporter, et le mesure montre qu'a 1280 px les sept entrees et
   la pastille arrivent au pixel pres contre le bord du conteneur. */
@media (min-width:1340px){
  .nav a{font-size:.86rem;padding:0 .7rem}
  .nav a.ici::after{left:.7rem;right:.7rem}
  .logo-img{width:146px}
}


/* =========================================================================
   4. FIL D'ARIANE
   ⚠️ Dans la maquette, .fil designait le ruban defilant. Ici il designe le
   fil d'Ariane, parce que jsoi_socle.py l'ecrit ainsi. Le ruban a ete
   renomme .ruban, section 6.
   ========================================================================= */
.fil{
  background:var(--papier-2);
  border-bottom:1px solid var(--trait);
  font-size:.82rem;
}
.fil .dedans{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0 .2rem;min-height:44px;
}
.fil a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .25rem;
  color:var(--bleu);font-weight:700;text-decoration:none;border-radius:6px;
}
.fil a:hover{text-decoration:underline}
.fil i{font-style:normal;color:var(--orange-texte);padding:0 .1rem}
.fil [aria-current="page"]{color:var(--encre-doux);font-weight:700;padding:0 .25rem}


/* =========================================================================
   5. TETE DE PAGE ET HERO D'ACCUEIL
   La tete est le bleu JSOI sur chaque page interieure. Le hero est sa
   version longue, reservee a l'accueil. Ils partagent le meme fond : une
   seule declaration, pas deux degrades a maintenir en parallele.
   ========================================================================= */
.tete,
.appel{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--bleu) 0%,var(--bleu-fonce) 100%);
  color:#fff;
}
.tete::after{
  content:"";position:absolute;right:-18%;top:-20%;
  width:70%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(252,132,0,.30),transparent 62%);
}
.tete > .dedans,
.hero-in{position:relative;z-index:2}

.tete{padding:clamp(2.4rem,7vw,4.2rem) 0 clamp(2.2rem,6vw,3.4rem)}
.tete h1{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:0;
  font-size:clamp(2.2rem,9vw,4.2rem);line-height:.94;
}
.tete h1 em{font-style:normal;color:var(--orange);display:block}
.tete .chapeau{color:rgba(255,255,255,.88);max-width:58ch}

/* ---- hero d'accueil : une scene de livraison, avec le message dans l'image ---- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;
  min-height:clamp(540px,calc(100svh - var(--entete-h) - 24px),780px);
  padding:clamp(2.4rem,7vw,5rem) 0 clamp(1.8rem,5vw,3.4rem);
  background:var(--bleu-fonce);color:#fff;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media picture,.hero-media img{width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:62% center}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,18,52,.98) 0%,rgba(0,28,78,.91) 38%,rgba(0,28,78,.50) 67%,rgba(0,18,52,.16) 100%);
}
.hero-in{width:100%}
.hero h1{
  font-family:var(--display);font-weight:900;
  letter-spacing:0;text-transform:uppercase;max-width:720px;
}
.hero .h1-mot{display:block;font-size:clamp(3.5rem,15vw,7.2rem);line-height:.9}
.hero .h1-sous{
  display:block;margin-top:.35rem;color:var(--creme);
  font-size:clamp(.95rem,3.9vw,1.6rem);font-weight:800;letter-spacing:.24em;
}
.hero h1 em{
  display:block;font-style:normal;color:var(--orange);margin-top:1rem;
  font-size:clamp(1.65rem,6vw,3rem);line-height:1.04;max-width:18ch;
}
.hero-chapeau{
  margin-top:1.35rem;max-width:50ch;
  font-size:clamp(1rem,3.4vw,1.16rem);color:rgba(255,255,255,.88);
}
.hero-actions{margin-top:1.5rem}
.hero-preuves{
  margin-top:clamp(2rem,5vw,3.2rem);max-width:820px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.35);
}
.hero-preuves div{padding:.8rem .7rem .9rem 0}
.hero-preuves b{display:block;font-family:var(--display);font-size:1.45rem;line-height:1.1;color:var(--orange)}
.hero-preuves span{display:block;margin-top:.15rem;font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.82)}
@media (max-width:619px){
  .hero{align-items:start;padding-top:2.1rem}
  .hero-media img{object-position:50% center}
  .hero::before{background:linear-gradient(180deg,rgba(0,18,52,.99) 0%,rgba(0,28,78,.94) 51%,rgba(0,28,78,.52) 72%,rgba(0,18,52,.12) 100%)}
  .hero h1 em{margin-top:.75rem}
  .hero-chapeau{font-size:.98rem;max-width:34ch}
  .hero-actions{margin-top:1.2rem}
  .hero-actions .bouton{min-height:48px;padding:.5rem 1rem;font-size:.9rem}
  .hero-preuves{display:none}
}
@media (min-width:760px){
  .hero-preuves{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-preuves div{padding-right:1rem}
}

/* La gamme reelle suit immediatement la scene d'usage : emotion d'abord,
   preuve produit ensuite. */
.gammes-intro{padding:clamp(2.8rem,8vw,5rem) 0;background:var(--papier)}
.gammes-intro-in{display:grid;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.gammes-intro-visuel{margin:0}
@media (min-width:900px){
  .gammes-intro-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* =========================================================================
   LE PANIER, VISIBLE SUR TOUTES LES PAGES
   Ajouté le 30/08. Avant, le panier n'existait que sur la page Commander :
   on ajoutait des packs et rien ne bougeait ailleurs, ni compteur, ni
   total, ni chemin vers la caisse.
   ========================================================================= */

/* ---- la pastille de l'entête ---- */
.lien-panier{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;flex:none;
  color:var(--bleu);text-decoration:none;
}
.lien-panier svg{width:24px;height:24px;fill:currentColor}
.lien-panier:hover{background:rgba(0,48,131,.08)}
/* L'icone du compte, jumelle de celle du panier. */
.lien-compte{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;flex:none;
  color:var(--bleu);text-decoration:none;
}
.lien-compte svg{width:24px;height:24px;fill:currentColor}
.lien-compte:hover{background:rgba(0,48,131,.08)}
/* ⚠️ `display:grid` ecrase l'attribut `hidden`, dont le style par defaut
   est `display:none`. Sans cette premiere ligne, la pastille affichait
   « 0 » en permanence sur un panier vide. */
.lien-panier b[hidden]{display:none}
.lien-panier b{
  position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:99px;
  background:var(--orange);color:var(--bleu-fonce);
  font-size:.68rem;font-weight:900;line-height:1;
}

/* ---- la barre collante ----
   Elle POUSSE le contenu au lieu de le recouvrir : `panier.js` ajoute au
   body un padding égal à sa hauteur. Sans ça, le pied de page et le dernier
   bouton passent dessous et deviennent inatteignables au pouce. */
.barre-panier{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:.9rem;
  padding:.7rem clamp(1rem,4vw,2rem);
  background:var(--bleu-fonce);color:#fff;
  box-shadow:0 -10px 30px rgba(0,0,0,.32);
  border-top:3px solid var(--orange);
}
.barre-panier[hidden]{display:none}

/* Le volet. La flèche ouvre le détail des articles sur place : le client
   vérifie ce qu'il a pris sans quitter la page où il choisit. Un <details>
   suffit, donc ça marche même sans JavaScript pour l'ouverture. */
.bp-volet{flex:1 1 auto;min-width:0}
.bp-volet summary{
  list-style:none;display:flex;align-items:center;gap:.8rem;
  min-height:44px;cursor:pointer;
}
.bp-volet summary::-webkit-details-marker{display:none}
.bp-n{font-size:.9rem;color:rgba(255,255,255,.86)}
.bp-n b{color:#fff;font-weight:900}
.bp-total{
  margin-left:auto;font-family:var(--display);font-weight:900;
  font-size:1.25rem;letter-spacing:.01em;
}
.bp-fleche{
  flex:none;font-size:.9rem;color:var(--orange);
  transition:transform .2s;
}
.bp-volet[open] .bp-fleche{transform:rotate(180deg)}
.bp-lignes{
  list-style:none;margin:.6rem 0 .2rem;padding:.7rem 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  max-height:38vh;overflow-y:auto;
}
.bp-lignes li{
  display:flex;gap:1rem;align-items:baseline;
  padding:.3rem 0;font-size:.85rem;color:rgba(255,255,255,.86);
}
.bp-lignes b{margin-left:auto;color:#fff;font-weight:800;white-space:nowrap}

.bp-cta{
  flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:0 1.3rem;border-radius:100px;
  background:var(--orange);color:var(--bleu-fonce);text-decoration:none;
  font-weight:800;font-size:.95rem;white-space:nowrap;
  align-self:flex-start;
}
.bp-cta:hover{background:#FF9420}
@media (max-width:479px){
  .nav-cta{padding:0 .8rem;font-size:.82rem;min-height:40px}
  .bp-cta{padding:0 1rem;font-size:.88rem}
  .bp-total{font-size:1.1rem}
  .bp-volet summary{gap:.5rem}
}

/* 🚨 LE ZOOM DE L'IPHONE SUR LES BOUTONS + ET −
   Signalé par le client le 30/08 : taper plusieurs fois sur « + » pour
   ajouter des packs déclenchait le zoom de Safari. Ce n'est pas un réglage
   de viewport, c'est le DOUBLE-TAP : deux appuis rapprochés au même endroit
   sont interprétés comme un zoom. `touch-action:manipulation` désactive ce
   geste-là, et lui seul : le défilement et le pincement restent normaux.
   La règle porte sur tous les boutons du site, pas seulement le compteur :
   le problème est le même partout où l'on tape deux fois de suite. */
button,.bouton,.barre-panier,.lien-panier,.lien-compte,summary{touch-action:manipulation}

/* la marque vedette, DESSOUS le titre JSOI, jamais au-dessus */
.vedette{
  margin-top:2.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.1rem;border-radius:var(--r);
  background:rgba(4,8,26,.55);border:1px solid rgba(254,214,5,.42);
}
.vedette img{width:64px;height:64px;border-radius:50%;flex:0 0 auto}
.vedette b{display:block;color:var(--jaune);font-size:1rem;letter-spacing:.02em}
.vedette span{display:block;font-size:.9rem;color:rgba(239,209,171,.92)}
.vedette a{
  margin-left:auto;text-decoration:none;font-weight:800;color:var(--jaune);
  display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;
}

/* =========================================================================
   6. RUBAN DEFILANT
   La constante JSOI d'une bande de marque a l'autre.
   ========================================================================= */
.ruban{
  background:var(--bleu);color:#fff;overflow:hidden;
  border-top:3px solid var(--orange);border-bottom:3px solid var(--orange);
}
.ruban-piste{display:flex;width:max-content;animation:defile 46s linear infinite}
.ruban-piste p{
  display:flex;align-items:center;gap:1.2rem;padding:.62rem 0;
  font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.ruban-piste i{font-style:normal;padding:0 1.2rem;opacity:.55;color:var(--orange)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* =========================================================================
   7. BANDES DE MARQUE
   Une bande par marque, pleine largeur, toutes au meme rang.
   ========================================================================= */
.bande{position:relative;overflow:hidden;padding:clamp(2.8rem,9vw,5rem) 0}
.bande-haut{margin-bottom:2.2rem}
.bande-tag{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;
  font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:.42rem .8rem;border-radius:100px;
}
.bande-nom{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,12vw,7.4rem);letter-spacing:0;line-height:.86;
  overflow-wrap:break-word;hyphens:none;
}
.bande-sous{font-size:1.05rem;font-weight:700;margin-top:.5rem;letter-spacing:.02em}
.bande-pitch{margin-top:1.2rem;max-width:56ch;font-size:1.02rem}
.bande-role{
  margin-top:1rem;max-width:56ch;font-size:.98rem;
  padding-left:1rem;border-left:3px solid currentColor;
}
.bande-note{margin-top:1.6rem;font-size:.84rem;opacity:.85;max-width:60ch}

/* ---- NGOUVOU, l'univers nuit ---- */
.b-ngouvou{
  background:
    radial-gradient(90% 70% at 85% 10%,rgba(231,2,128,.30),transparent 60%),
    radial-gradient(80% 70% at 5% 95%,rgba(254,214,5,.16),transparent 60%),
    var(--nuit);
  color:var(--creme);
}
.b-ngouvou .bande-tag{background:var(--jaune);color:var(--nuit)}
.b-ngouvou .bande-nom{color:var(--jaune);text-shadow:3px 3px 0 var(--magenta)}
.b-ngouvou .bande-sous{color:#fff}

.cans{display:grid;gap:.8rem;margin-top:2.2rem}
.can{
  display:grid;grid-template-columns:78px 1fr;gap:1rem;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(239,209,171,.2);
  border-radius:var(--r);padding:.8rem .9rem;
  border-top:3px solid var(--t,var(--magenta));
}
.can img{width:78px}
.can h3{font-size:1.02rem;letter-spacing:.02em;color:#fff}
.can .note{font-size:.86rem;color:rgba(239,209,171,.86);margin-top:.25rem}
.can .prix{
  margin-top:.5rem;font-family:var(--display);
  font-size:1.6rem;font-weight:900;color:var(--jaune);
}
.can .prix i{
  display:block;font-family:inherit;font-style:normal;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:rgba(239,209,171,.8);
}
.can .paliers{margin-top:.4rem;font-size:.78rem;color:rgba(239,209,171,.78)}
.can .paliers span{white-space:nowrap}
@media (min-width:820px){
  .b-ngouvou .bande-in{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:3rem;align-items:center;
  }
  .cans{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
  .can{grid-template-columns:1fr;text-align:center;padding:1.2rem .8rem}
  .can img{width:100%;max-width:120px;margin-inline:auto}
}

/* ---- les marques distribuees ---- */
.b-coca{background:linear-gradient(155deg,var(--coca) 0%,#9E0C16 100%);color:#fff}
.b-gold{background:linear-gradient(158deg,#A85F10 0%,#5C3105 100%);color:#FFF6E6}
.b-coca .bande-tag,
.b-gold .bande-tag{background:#fff;color:var(--encre)}
.b-coca .bande-nom{color:#fff}
.b-gold .bande-nom{color:#FFF6E6}

/* Les packshots sont detoures : ils se posent directement sur le fond de la
   bande, sans cadre ni pave blanc. C'est ce qui donne a chaque marque le
   meme rang visuel que NGOUVOU. */
.refs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.2rem 1rem;margin-top:2.4rem;
}
.ref{display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---- le cartouche du logo de marque --------------------------------------
   Demande de Moufazal le 28/08 : sur la liste des marques, on montre LE
   LOGO, pas la canette. La canette reste sur la page de la marque.

   Le fond clair n'est pas décoratif. Le rouge Coca-Cola sur le bleu JSOI
   est illisible, Gold Tea est noir et rouge, et le « by la patat' » de
   NGOUVOU est gris foncé : posés directement sur la bande, deux logos sur
   trois disparaissent. C'est aussi la convention des murs de marques.

   Hauteur fixe et `object-fit:contain` : les trois logos ont des
   proportions très différentes, Coca-Cola est un ruban et Gold Tea presque
   carré. Sans hauteur commune, la rangée n'est plus alignée, et l'alignement
   est précisément ce qu'il a demandé. */
/* 🚨 PLUS DE CARTOUCHE BLANC depuis le 29/08. Demande de William : les
   logos « incrustés dans le fond plutôt que dans un carré blanc, pour bien
   illustrer la DA grande marque », et un peu plus grands.

   Ce que le cartouche réglait est réglé autrement : les logos utilisés ici
   sont les déclinaisons « -nuit », où ce qui était noir passe en crème.
   Un cadre blanc résolvait le contraste en isolant chaque marque dans sa
   boîte ; la déclinaison fond sombre le résout en laissant les marques
   respirer sur le même bleu. C'est la seconde qui ressemble à un mur de
   marques, et c'est ce qui a été demandé.

   La hauteur reste IDENTIQUE d'une tuile à l'autre : c'est elle, et non le
   cadre, qui tient l'alignement de la rangée. Elle passe de 158 à 196 px
   au maximum, les logos gagnent donc environ un quart de surface. */
.cartouche{
  width:100%;height:clamp(150px,23vw,196px);
  display:flex;align-items:center;justify-content:center;
  padding:.4rem 0;overflow:hidden;
}
/* L'ombre portée détache les logos du bleu sans les enfermer. Elle suit la
   forme découpée, pas une boîte, parce qu'elle porte sur l'image. */
.cartouche .logo-marque{
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.42));
}
/* Les rangées de logos. Une seule pour NGOUVOU et Gold Tea, deux pour
   Coca-Cola : le cola en haut, Fanta et Sprite dessous. La marque
   « Coca-Cola » de notre catalogue couvre en réalité trois marques du
   groupe, et une vignette unique laissait croire qu'on ne distribue que
   le cola.
   La première rangée pèse plus lourd que la seconde : c'est elle qui nomme
   la tuile, les deux autres logos l'accompagnent. */
.logos{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;width:100%;height:100%;min-height:0;
}
/* ⚠️ `min-width:0` sur la rangée ET sur le picture. Un élément flex a
   `min-width:auto` par défaut : il refuse de descendre sous la largeur
   intrinsèque de son contenu, et le `max-width:100%` ne s'applique jamais.
   Le logo Coca-Cola, qui fait 760 px de large, débordait donc du cartouche
   et se faisait rogner à gauche et à droite. */
.rangee{
  display:flex;align-items:center;justify-content:center;
  gap:.9rem;width:100%;flex:1 1 0;min-height:0;min-width:0;
}
.logos .rangee:first-child:not(:last-child){flex:1.25 1 0}

/* 🚨 `display:contents` sur le <picture>, ET AUCUNE AUTRE RÈGLE QUI LE
   CONTREDISE. Trois mesures ont été nécessaires le 29/08 pour l'établir :

   1. Le <picture> formait un conteneur flex intermédiaire dont la hauteur
      restait indéfinie. Le `max-height:100%` de l'image ne se résolvait
      donc contre rien : les logos Fanta et Sprite faisaient 76 px de haut
      dans une rangée de 45, et débordaient sur le logo Coca-Cola.
   2. `display:contents` retire le <picture> du flux : l'image devient
      l'élément flex direct de la rangée, dont la hauteur est définie.
   3. Une règle `.cartouche > .logos picture{display:flex}` écrite juste
      après annulait tout, sa spécificité étant supérieure. Elle est
      supprimée. Deux règles de display sur un même élément, c'est une
      erreur qu'aucune mesure ne rattrape.

   `min-width:0` reste indispensable : un élément flex refuse par défaut de
   descendre sous la largeur intrinsèque de son contenu, et le logo
   Coca-Cola fait 760 px de large. */
.rangee > picture{display:contents}
.ref .logo-marque{
  max-width:100%;max-height:100%;width:auto;height:auto;
  min-width:0;min-height:0;object-fit:contain;display:block;
}

/* Les tuiles de marque tiennent sur UNE rangee. La grille generique est a
   deux colonnes, ce qui convenait a quatre marques ; a trois, la derniere
   restait seule sur sa ligne et cassait l'alignement que le client a
   justement demande. */
.refs-marques{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ref b{
  display:block;margin-top:1.1rem;font-family:var(--display);
  text-transform:uppercase;font-size:1.24rem;font-weight:900;
  letter-spacing:.01em;line-height:1.06;color:#fff;
}
.ref b::after{
  content:"";display:block;width:34px;height:3px;border-radius:3px;
  margin:.55rem auto 0;background:rgba(255,255,255,.8);
}
.ref span{display:block;font-size:.86rem;margin-top:.65rem;max-width:32ch;opacity:.94}
.ref .fmt{
  display:inline-block;font-style:normal;margin-top:.75rem;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.3);padding:.26rem .62rem;border-radius:100px;
}

/* ⚠️ Une marque sans logo fourni garde sa place, traitée typographiquement.
   On n'invente pas d'image et on n'emprunte pas le logo d'une autre. */
.cartouche.sans-image{
  background:rgba(0,0,0,.16);box-shadow:none;
  border:2px solid rgba(255,246,230,.34);
}
.sans-image b{
  margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.4rem,5vw,2.1rem);font-weight:900;line-height:1;
  letter-spacing:.02em;color:#FFF6E6;
}
.sans-image b::after{display:none}
.sans-image span{
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,246,230,.8);max-width:22ch;margin-inline:auto;
}

@media (min-width:1000px){
  .b-coca .bande-corps,
  .b-gold .bande-corps{
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:3rem;align-items:start;
  }
  .refs{margin-top:0}
}

/* mention de courtoisie sur les marques tierces */
.mention{background:var(--papier-2);padding:1.6rem 0;border-bottom:1px solid var(--trait)}
.mention p{font-size:.82rem;color:var(--encre-doux);max-width:90ch}


/* =========================================================================
   8. SECTIONS DE SERVICE SUR PAPIER
   ========================================================================= */
.bloc{padding:clamp(2.8rem,9vw,5rem) 0}
.bloc-2{background:var(--papier-2)}

/* les deux parcours : particulier et professionnel */
.parcours{display:grid;gap:1rem;margin-top:2.2rem}
.voie{
  border-radius:var(--r);padding:1.6rem 1.4rem;
  display:flex;flex-direction:column;
  border:2px solid var(--bleu);background:var(--blanc);
}
/* La voie professionnelle est un ilot sombre au milieu du papier : elle
   embarque donc les memes jetons contextuels que les sections sombres,
   sinon son bouton fantome ressort en bleu sur bleu. */
.voie.pro{
  background:var(--bleu);border-color:var(--bleu);color:#fff;
  --sur-couleur:var(--orange);
  --fant-encre:#fff;
  --fant-trait:rgba(255,255,255,.55);
  --fant-survol:rgba(255,255,255,.14);
}
.voie .num{
  font-family:var(--display);font-size:.72rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sur-couleur);
}
.voie h3{margin-top:.5rem;font-size:1.5rem;color:var(--bleu)}
.voie.pro h3{color:#fff}
/* ⚠️ Le :not(.num) n'est pas decoratif. Le surtitre est un <p class="num"> :
   sans lui, `.voie.pro p` repeint le surtitre en blanc et ecrase la regle
   `.voie .num`, moins specifique. Le surtitre perdait sa couleur d'accent
   sans que rien ne casse visiblement. */
.voie p:not(.num){margin-top:.8rem;font-size:.95rem;color:var(--encre-doux)}
.voie.pro p:not(.num){color:rgba(255,255,255,.88)}
.voie ul{margin:1rem 0 0;padding:0;list-style:none}
.voie li{
  position:relative;font-size:.9rem;
  padding:.35rem 0 .35rem 1.4rem;color:var(--encre-doux);
}
.voie.pro li{color:rgba(255,255,255,.88)}
.voie li::before{
  content:"";position:absolute;left:0;top:.95em;
  width:8px;height:2px;background:var(--orange);
}
.voie .bouton{margin-top:1.4rem;align-self:flex-start}
@media (min-width:820px){
  .parcours{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}


/* =========================================================================
   9. BLOCS METIER
   ========================================================================= */
/* ---- La regle de livraison, ecrite par bloc_livraison().
   Elle doit se lire partout ou l'on parle de commander, donc elle est
   dessinee pour tenir aussi bien sur le papier que dans une colonne. ---- */
.regle{
  margin-top:2.2rem;padding:1.4rem 1.3rem 1.5rem;
  background:var(--blanc);border:1px solid var(--trait);
  border-top:4px solid var(--orange);border-radius:var(--r);
  box-shadow:var(--ombre);color:var(--encre);
}
.regle h3{font-size:1.1rem;color:var(--bleu);letter-spacing:.01em}
.regle-duo{display:grid;gap:.9rem;margin-top:1.2rem}
.regle-c{
  padding:1.1rem 1.1rem 1.2rem;border-radius:var(--r-petit);
  background:var(--papier-2);border:1px solid var(--trait);
}
.regle-c b{
  display:block;font-size:.74rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange-texte);
}
.regle-c p{margin-top:.5rem;font-size:.95rem;color:var(--encre-doux)}
/* Le cas favorable est celui qu'on veut voir en premier : c'est lui qui
   porte le bleu plein. */
.regle-c-fort{background:var(--bleu);border-color:var(--bleu);color:#fff}
.regle-c-fort b{color:var(--orange)}
.regle-c-fort p{color:rgba(255,255,255,.9)}
/* ⚠️ Le delai se compte a partir de la CONFIRMATION. La phrase vient du
   modele de donnees, jamais raccourcie ici. */
.regle-delai{
  margin-top:1.1rem;font-size:.88rem;font-weight:700;color:var(--encre-doux);
  padding-top:.9rem;border-top:1px solid var(--trait);
}
@media (min-width:680px){
  .regle-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Le catalogue par marque ---- */
.catalogue{margin-top:2.2rem;display:grid;gap:1.4rem}
.cat-groupe{
  background:var(--blanc);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--trait);box-shadow:var(--ombre);
}
.cat-tete{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding:.9rem 1.1rem;background:var(--t,var(--bleu));color:#fff;
}
.cat-tete b{
  font-family:var(--display);text-transform:uppercase;
  font-size:1.3rem;font-weight:900;letter-spacing:.01em;
}
.cat-tete span{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,0,0,.4);padding:.26rem .6rem;border-radius:100px;
}
@media (min-width:560px){.cat-tete span{margin-left:auto}}
.cat-ligne{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;
  padding:.8rem 1.1rem;border-top:1px solid var(--trait);
}
.cat-ligne b{font-size:.98rem;font-weight:800}
.cat-ligne i{font-style:normal;font-size:.84rem;color:var(--encre-doux);flex:1 1 12rem}
.cat-ligne u{
  text-decoration:none;font-weight:800;font-size:.9rem;
  color:var(--bleu);white-space:nowrap;
}
.cat-ligne u.devis{color:var(--encre-doux);font-weight:700}
/* une ligne de service n'est pas une reference : fond neutre, libelle en
   petites capitales, pour que le decompte du catalogue reste juste */
.cat-note{background:var(--papier-2)}
.cat-note b{
  font-family:inherit;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-texte);
}

/* ---- La ligne detaillee du catalogue (produits.html)
   Un revendeur cherche une reference et son prix. Il reconnait la canette
   avant de lire son nom, donc chaque ligne porte sa vignette, puis son nom,
   son accroche, son format et son prix. Ces regles ne s'appliquent qu'aux
   lignes qui portent .cat-ligne-vig : les lignes simples de l'accueil et des
   maquettes gardent exactement le rendu qu'elles avaient. ---- */
.cat-ligne-vig{align-items:center}
.cat-groupe[id]{scroll-margin-top:calc(var(--entete-h) + 1rem)}

.cat-vig{
  flex:0 0 auto;width:46px;height:68px;
  display:flex;align-items:center;justify-content:center;
}
.cat-vig img{max-width:100%;max-height:68px;width:auto;height:auto;display:block}
/* ⚠️ Gold Cola n'a aucun packshot. On n'invente pas d'image : la case reste
   une pastille typographique, qui dit franchement qu'il n'y a pas de photo. */
.cat-vig-sans{
  border:1px dashed var(--trait);border-radius:var(--r-petit);
  font-family:var(--display);font-weight:900;font-size:.9rem;
  letter-spacing:.04em;color:var(--encre-doux);
}

/* Format, conditionnement et cafeine. ⚠️ Aucun text-transform ici : la
   cafeine s'ecrit « 32 mg / 100 mL » et une majuscule automatique la
   transformerait a l'ecran en « 32 MG / 100 ML ». */
.cat-meta{
  flex:0 1 auto;font-size:.8rem;font-weight:700;
  color:var(--encre-doux);line-height:1.65;
}

.cat-prix{
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  flex:0 0 auto;margin-left:auto;text-align:left;
}
.cat-prix strong{
  font-family:var(--display);font-size:1.35rem;font-weight:900;
  letter-spacing:.01em;color:var(--bleu);white-space:nowrap;
}
.cat-prix small{font-size:.76rem;font-weight:700;color:var(--encre-doux);white-space:nowrap}
.cat-prix .cat-degr{color:var(--orange-texte)}

/* A partir de 940 px la ligne passe en grille : les colonnes s'alignent
   d'une reference a l'autre, ce qu'un flex ne sait pas faire. En dessous,
   elle reste un flex qui se replie. */
@media (min-width:940px){
  .cat-ligne-vig{
    display:grid;
    grid-template-columns:46px minmax(8rem,.9fr) minmax(0,1.5fr) minmax(0,1.1fr) minmax(8rem,auto);
    gap:.3rem 1.2rem;
  }
  .cat-prix{align-items:flex-end;text-align:right}
}

/* ---- Les fiches d'argument ---- */
.fiches{display:grid;gap:1rem;margin-top:2.2rem}
.fiche{
  background:var(--blanc);border-radius:var(--r);
  padding:1.3rem 1.2rem;border-top:4px solid var(--orange);
  box-shadow:var(--ombre);
}
.fiche h3{font-size:1.02rem;color:var(--bleu);letter-spacing:.02em}
.fiche p,
.fiche li{font-size:.92rem;color:var(--encre-doux);margin-top:.6rem}
.fiche ul{margin:.4rem 0 0;padding-left:1.1rem}
.fiche li{margin-top:.35rem}
@media (min-width:720px){.fiches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.fiches{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Trois scenes metier remplacent six blocs abstraits sur l'accueil. */
.segments-pro{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1.1rem;margin-top:2.2rem;
}
.segment-pro{
  overflow:hidden;background:var(--blanc);border:1px solid var(--trait);
  border-radius:8px;box-shadow:var(--ombre);
}
.segment-pro-media{aspect-ratio:4 / 3;overflow:hidden;background:var(--papier-2)}
.segment-pro-media img{width:100%;height:100%;object-fit:cover}
.segment-pro-corps{padding:1.15rem 1.15rem 1.35rem}
.segment-pro-cible{
  margin:0 0 .45rem;font-size:.72rem;font-weight:800;line-height:1.3;
  color:var(--orange-texte);text-transform:uppercase;letter-spacing:.08em;
}
.segment-pro h3{font-size:1.08rem;line-height:1.25;color:var(--bleu);letter-spacing:0}
.segment-pro-corps > p:last-child{margin-top:.65rem;font-size:.9rem;color:var(--encre-doux)}

/* ---- Les etapes numerotees ---- */
.etapes{display:grid;gap:1rem;margin-top:2rem;counter-reset:e}
.etape{
  position:relative;background:var(--blanc);border-radius:var(--r);
  padding:1.2rem;border:1px solid var(--trait);
}
.etape::before{
  counter-increment:e;content:counter(e);
  display:block;margin-bottom:.4rem;
  font-family:var(--display);font-size:2.4rem;font-weight:900;
  color:var(--orange-texte);line-height:1;
}
.etape b{display:block;font-size:1rem}
.etape span{display:block;font-size:.9rem;color:var(--encre-doux);margin-top:.4rem}
@media (min-width:720px){.etapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.etapes{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* =========================================================================
   10. PHOTOS DE TERRAIN ET VISUELS DE COMPOSITION
   Les photos gardent leur cadrage d'origine : aucune n'est etiree, aucune
   n'est rognee. Le portrait reste portrait, le paysage reste paysage, et la
   legende dit ce qu'on voit.
   ========================================================================= */
.ph{
  margin:0;background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);
}
.ph img,
.ph video{width:100%;height:auto;display:block;background:var(--papier-2)}
.ph figcaption{
  padding:.75rem .9rem;font-size:.82rem;line-height:1.5;color:var(--encre-doux);
}
.ph-video{text-align:center}
.ph-video video{max-width:360px;margin-inline:auto;background:var(--nuit)}

/* Mosaique en colonnes CSS et non en grille : portraits et paysages n'ont
   pas la meme hauteur, les colonnes les empilent tels quels, sans trou et
   sans deformation. */
.terrain{margin-top:2.2rem;column-gap:1rem}
.terrain > *{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 1rem;
}
@media (min-width:700px){.terrain{columns:2}}
@media (min-width:1040px){.terrain{columns:3}}
.terrain-tete{margin-top:3.2rem}
.terrain-tete h3{font-size:1.2rem;color:var(--bleu)}
.terrain-tete p{margin-top:.5rem;font-size:.95rem;color:var(--encre-doux);max-width:64ch}

/* Les visuels de composition ne sont pas detoures : ils gardent leur fond,
   donc ils gardent un cadre. Un seul style pour tous. */
.visuel{
  margin:2.6rem 0 0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--trait);box-shadow:var(--ombre-forte);
}
.visuel img{width:100%}
.visuel figcaption{
  padding:.85rem 1.1rem;background:var(--blanc);border-top:1px solid var(--trait);
  font-size:.84rem;color:var(--encre-doux);
}


/* =========================================================================
   11. ACTUALITES, A PROPOS, CONTACT, FORMULAIRES
   ========================================================================= */
.actus{display:grid;gap:1.2rem;margin-top:2.2rem}
.actu{
  background:var(--blanc);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--trait);box-shadow:var(--ombre);
}
.actu-img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  border-bottom:1px solid var(--trait);
}
.actu-txt{padding:1.1rem 1.2rem}
.actu-txt .date{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-texte);
}
.actu-txt h3{margin-top:.4rem;font-size:1.05rem;color:var(--bleu)}
.actu-txt p{margin-top:.5rem;font-size:.88rem;color:var(--encre-doux)}
@media (min-width:760px){.actus{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- a propos ---- */
.propos{display:grid;gap:1.6rem;margin-top:2rem}
.propos p{color:var(--encre-doux)}
.propos p + p{margin-top:.9rem}
.propos h3{
  margin-top:1.9rem;font-size:.78rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-texte);
}
.propos h3 + p{margin-top:.6rem}
.propos .faits{
  margin-top:1.9rem;padding-top:1.4rem;
  border-top:1px solid var(--trait);font-size:.92rem;
}
@media (min-width:900px){
  .propos{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem;align-items:start}
}
/* 07/09 : sans photo de terrain en regard, le recit occupe seul la ligne,
   en colonne lisible plutot qu'etire sur toute la largeur. */
.propos-seul{max-width:72ch}
@media (min-width:900px){.propos-seul{grid-template-columns:minmax(0,1fr)}}

.valeurs{display:grid;gap:1rem;margin-top:1.2rem}
.valeur{
  background:var(--blanc);border-radius:var(--r);
  padding:1.2rem 1.2rem 1.3rem;border-top:4px solid var(--orange);
}
.valeur b{display:block;font-size:1.02rem;color:var(--bleu)}
.valeur span{display:block;margin-top:.45rem;font-size:.92rem;color:var(--encre-doux)}
@media (min-width:620px){.valeurs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.valeurs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- contact ---- */
.contact{display:grid;gap:1rem;margin-top:2.2rem}
.carte{
  background:var(--blanc);border-radius:var(--r);
  padding:1.3rem;border:1px solid var(--trait);box-shadow:var(--ombre);
}
.carte b{
  display:block;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-texte);
}
.carte a,
.carte p{
  display:block;margin-top:.5rem;font-size:1rem;font-weight:700;
  color:var(--bleu);text-decoration:none;
}
.carte a{display:flex;align-items:center;min-height:44px}
.carte small{
  display:block;margin-top:.5rem;font-size:.84rem;
  font-weight:400;color:var(--encre-doux);
}
@media (min-width:760px){.contact{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- formulaires ---- */
.form{
  margin-top:2.2rem;background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--r);padding:1.5rem 1.3rem 1.7rem;box-shadow:var(--ombre);
}
.champ{display:block;margin-top:1.1rem}
.champ:first-child{margin-top:0}
.champ > span{
  display:block;font-size:.74rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--encre-doux);
}
.champ input,
.champ select,
.champ textarea{
  width:100%;margin-top:.45rem;min-height:52px;padding:.7rem .9rem;
  font:inherit;color:var(--encre);background:var(--papier);
  border:2px solid var(--trait);border-radius:var(--r-petit);
}
.champ textarea{min-height:150px;resize:vertical;line-height:1.55}
.champ input:hover,
.champ select:hover,
.champ textarea:hover{border-color:rgba(0,48,131,.3)}
.champ input::placeholder,
.champ textarea::placeholder{color:#8A8F9B}
.obligatoire{color:var(--orange-texte)}
/* ⚠️ Dans une paire, l'espacement vient du gap de la grille et non de la
   marge des champs : avec `.champ{margin-top}`, le champ de gauche et celui
   de droite ne demarraient pas a la meme hauteur. */
.form-duo{display:grid;gap:1.1rem;margin-top:1.1rem}
.form-duo .champ{margin-top:0}
.form-note{margin-top:1rem;font-size:.82rem;color:var(--encre-doux);max-width:64ch}
/* ---- La case de consentement.
   ⚠️ Elle vit HORS de `.champ`. `.champ input` impose 100 % de largeur et
   52 px de haut : appliquee a une case a cocher, la regle en fait un
   rectangle geant. Ici la case garde sa taille propre, et c'est le libelle
   entier qui porte la cible tactile de 44 px. ---- */
.accord{
  display:flex;align-items:flex-start;gap:.7rem;
  margin-top:1.4rem;padding:.5rem 0;min-height:44px;max-width:64ch;
  font-size:.88rem;line-height:1.55;color:var(--encre-doux);cursor:pointer;
}
.accord input{
  flex:0 0 auto;width:22px;height:22px;margin:.18rem 0 0;
  accent-color:var(--bleu);cursor:pointer;
}
.form .bouton{margin-top:1.4rem}
@media (min-width:680px){
  .form-duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1rem}
}


/* =========================================================================
   12. TABLEAUX, TEXTES LONGS, BADGES
   ========================================================================= */
/* Un tableau large defile dans son propre cadre. Le corps de page, lui, ne
   defile jamais horizontalement. */
.tableau{
  margin-top:1.8rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);
  box-shadow:var(--ombre);
}
.tableau table{width:100%;border-collapse:collapse;min-width:34rem}
.tableau caption{
  caption-side:top;text-align:left;padding:.9rem 1rem 0;
  font-size:.84rem;color:var(--encre-doux);
}
.tableau th,
.tableau td{
  padding:.75rem .95rem;text-align:left;font-size:.93rem;
  border-bottom:1px solid var(--trait);
}
.tableau thead th{
  background:var(--bleu);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:0;
}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau td b{font-weight:800;color:var(--bleu);white-space:nowrap}

/* Les pages legales : mentions, CGV, retractation, confidentialite,
   cookies. Une seule mise en page pour les cinq. */
.prose{margin-top:2rem;max-width:76ch}
.prose > *:first-child{margin-top:0}
.prose h2{margin-top:2.6rem;font-size:1.35rem;line-height:1.24;color:var(--bleu)}
.prose h3{margin-top:1.7rem;font-size:1.02rem;color:var(--encre)}
.prose p{margin-top:.9rem;color:var(--encre-doux);font-size:.98rem}
.prose ul,
.prose ol{margin:.9rem 0 0;padding-left:1.3rem;color:var(--encre-doux)}
.prose li{margin-top:.4rem;font-size:.98rem}
.prose a{color:var(--bleu);font-weight:700}
.prose b,
.prose strong{color:var(--encre)}
.prose .maj{
  margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--trait);
  font-size:.82rem;color:var(--encre-doux);
}

/* ---- badges d'etat ---- */
.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.26rem .62rem;border-radius:100px;
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--papier-2);color:var(--encre-doux);border:1px solid var(--trait);
}
.badge-officiel{background:var(--bleu);color:#fff;border-color:transparent}
.badge-limitee{background:#C90170;color:#fff;border-color:transparent}
/* ⚠️ Fond plein et non transparence : pose sur le papier, un noir a 28 %
   donnait un gris pale sous du texte blanc, illisible. */
.badge-bientot{background:var(--encre-doux);color:#fff;border-color:transparent}

/* ⚠️ Statut « prochainement » : la ligne s'affiche, sans prix, visiblement
   en retrait. On grise l'image, pas le texte : un libelle a 60 %
   d'opacite ne passe plus le contraste et devient illisible au soleil. */
.bientot picture,
.bientot img{filter:grayscale(1);opacity:.78}
.bientot .prix{display:none}


/* =========================================================================
   13. APPEL FINAL
   ========================================================================= */
.appel{padding:clamp(3rem,10vw,5.4rem) 0;text-align:center}
.appel h2{
  font-family:var(--display);text-transform:uppercase;font-weight:900;
  font-size:clamp(1.8rem,7vw,3.2rem);letter-spacing:.02em;color:#fff;
}
.appel h2 em{font-style:normal;color:var(--orange)}
/* ⚠️ Selecteur enfant direct, et non `.appel p`. bloc_livraison() peut etre
   pose dans cette section : un `.appel p` general repeindrait en blanc le
   texte de la carte blanche de la regle, qui deviendrait invisible. */
.appel > .dedans > p{margin:1.1rem auto 0;max-width:56ch;color:rgba(255,255,255,.88)}
.appel .regle{text-align:left;margin-inline:auto;max-width:760px}


/* =========================================================================
   14. PIED DE PAGE
   Le socle y pose jsoi-logo-nuit : le pied est donc sombre, et c'est
   coherent avec la tete de page. Le papier tient le milieu, le bleu tient
   les deux extremites.
   ========================================================================= */
.pied{
  background:var(--bleu-fonce);color:rgba(255,255,255,.82);
  padding:3rem 0 2.4rem;border-top:4px solid var(--orange);
}
.pied-haut{display:grid;gap:2rem}
.pied-logo{width:190px}
.pied-baseline{margin-top:1rem;font-size:.92rem;max-width:34ch;color:rgba(255,255,255,.78)}
.pied-bloc h3{
  font-size:.74rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sur-couleur);
}
.pied-bloc p{margin-top:.4rem;font-size:.92rem;line-height:2.2}
.pied-bloc a{
  color:#fff;text-decoration:none;font-weight:700;
  display:inline-flex;align-items:center;min-height:44px;
}
.pied-bloc a:hover{color:var(--orange);text-decoration:underline}

.pied-legal{
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--trait-clair);
  font-size:.84rem;line-height:1.8;color:rgba(255,255,255,.7);
}
.pied-legal b{color:#fff}
.pied-liens{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;margin-top:.6rem}
.pied-liens a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.86rem;font-weight:700;color:#fff;text-decoration:none;
}
.pied-liens a:hover{color:var(--orange);text-decoration:underline}
/* L'avertissement caféine est une obligation, pas une note de bas de page :
   il reste lisible, encadré, jamais en gris pâle. */
.pied-avert{
  margin-top:1.2rem;padding:.9rem 1rem;max-width:70ch;
  border-left:3px solid var(--orange);background:rgba(255,255,255,.06);
  border-radius:0 var(--r-petit) var(--r-petit) 0;
  font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.84);
}
.pied-sosa{margin-top:1.6rem;font-size:.8rem;color:rgba(255,255,255,.62)}
/* Meme la signature de l'agence est une cible tactile de 44 px : c'est un
   lien, et un lien de 17 px de haut se rate au pouce. */
.pied-sosa a{
  color:#fff;font-weight:700;
  display:inline-flex;align-items:center;min-height:44px;
}
@media (min-width:640px){
  .pied-haut{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
  .pied-haut{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2.6rem}
}


/* =========================================================================
   15. FLOTTANT WHATSAPP ET APPARITIONS
   ========================================================================= */
.wa{
  position:fixed;right:14px;bottom:14px;z-index:70;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:grid;place-content:center;box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.wa svg{width:28px;height:28px;fill:#fff}

/* Apparition au defilement.
   ⚠️ L'etat masque n'est applique QUE si le script d'amorce a pose .js sur
   <html>. Script bloque, erreur JS, navigateur ancien : le contenu reste
   visible. Sans cette garde, une page entiere peut rester invisible. */
.js .app{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;
}
.js .app.vu{opacity:1;transform:none}


/* =========================================================================
   17. LES AJOUTS DU 07/09/2026 (recommandations de William)
   Les trois carrés du hero, les tuiles de marque en couleur, les carrés
   d'actualités, les réseaux en couleur, la FAQ en accordéon, le prix sur les
   références de Nos marques.
   ========================================================================= */

/* ---- 07/09, 12:53 : la bande claire du hero, le logo JSOI, le fondu vers le bleu ---- */
.hero-bandeau{background:var(--papier);position:relative;z-index:2}
.hero-bandeau-in{
  display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;
  padding:clamp(1.2rem,4vw,2.2rem) 0 clamp(.6rem,2vw,1rem);
}
.hero-bandeau picture{display:contents}
.hero-logo{width:clamp(210px,44vw,360px);height:auto;display:block;
  filter:drop-shadow(0 10px 22px rgba(0,28,78,.16))}
.hero-blason{width:clamp(72px,14vw,124px);height:auto;display:block;margin-left:auto;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.hero-fondu{
  height:clamp(72px,12vw,130px);position:relative;z-index:1;margin-bottom:-1px;
  background:linear-gradient(180deg,var(--papier) 0%,var(--bleu-fonce) 100%);
}
.hero{min-height:0}
/* Le blason de Mayotte en fond du hero (07/09, 12:59) : grand, en retrait,
   il flotte lentement et s'incline sous le pointeur (site.js). Sous le
   texte, jamais dessus : .hero-in est au-dessus, en z-index 2. */
.hero-blason-fond{
  position:absolute;z-index:0;pointer-events:none;
  right:-1%;top:clamp(.5rem,4vh,2.5rem);width:clamp(280px,38vw,560px);
  transform:none;opacity:.32;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.65)) saturate(1.15);
  animation:blason-flotte 7.5s ease-in-out infinite;
  will-change:transform;
}
.hero-blason-fond picture{display:contents}
.hero-blason-fond img{width:100%;height:auto;display:block;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s ease-out}
@keyframes blason-flotte{
  0%,100%{transform:translateY(0) rotate(-1.4deg)}
  50%{transform:translateY(-16px) rotate(1.4deg)}
}
@media (max-width:619px){
  .hero-blason-fond{width:70vw;right:-16%;top:auto;bottom:-4%;transform:none;opacity:.16;animation:none}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- R1 : un carré par marque dans le hero, avec le nombre de boissons ---- */
.vedettes{
  margin-top:2.2rem;max-width:760px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;
}
.vedette-m{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;
  padding:.95rem .6rem 1rem;border-radius:var(--r);text-decoration:none;color:#fff;
  background:rgba(4,8,26,.55);border:1px solid rgba(255,255,255,.16);
  border-top:3px solid var(--t,var(--orange));
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.vedette-m:hover{transform:translateY(-3px);border-color:var(--t,var(--orange));background:rgba(4,8,26,.72)}
.vedette-m picture{display:contents}
.vedette-m .logo-marque{
  height:36px;width:auto;max-width:92%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.vedette-m b{
  margin-top:.35rem;font-family:var(--display);text-transform:uppercase;
  font-size:.98rem;letter-spacing:.02em;line-height:1;
}
.vedette-m span{
  font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(239,209,171,.85);
}
.vedette-m strong{
  margin-top:.25rem;font-family:var(--display);font-size:1.7rem;line-height:1;
  color:var(--orange);
}
.vedette-m strong small{
  display:block;font-family:var(--corps,inherit);font-size:.66rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);
  margin-top:.2rem;
}
@media (max-width:619px){
  .vedettes{gap:.45rem;margin-top:1.6rem}
  .vedette-m{padding:.7rem .35rem .8rem;gap:.22rem}
  .vedette-m .logo-marque{height:26px}
  .vedette-m b{font-size:.8rem}
  .vedette-m span{font-size:.56rem;letter-spacing:.06em}
  .vedette-m strong{font-size:1.35rem}
}

/* ---- Les chiffres du hero, sous les carrés. La règle manquait dans la
   feuille : le bloc s'affichait en texte nu. Même dessin que .hero-preuves,
   mais visible sur téléphone, où il compte le plus. ---- */
.chiffres{
  margin-top:1.4rem;max-width:760px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;
  border-top:1px solid rgba(255,255,255,.28);padding-top:.4rem;
}
.chiffres div{padding:.6rem .6rem .7rem 0}
.chiffres b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1.05;color:var(--orange)}
.chiffres span{display:block;margin-top:.2rem;font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.82)}
@media (min-width:760px){.chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- R2 + R3 : la tuile de marque, dans sa couleur, canettes en éventail ---- */
.tuile-marque{
  position:relative;isolation:isolate;overflow:hidden;
  padding:1.3rem 1.1rem 1.5rem;border-radius:var(--r);
  background:var(--fond,var(--bleu));color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 54px rgba(0,0,0,.38);
  transition:transform .4s ease,box-shadow .4s ease;
}
.tuile-marque::before{
  content:"";position:absolute;left:50%;top:10%;z-index:-1;
  width:130%;aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,var(--glow,rgba(255,255,255,.25)) 0%,transparent 58%);
  filter:blur(6px);pointer-events:none;
}
.tuile-marque:hover{transform:translateY(-6px);box-shadow:0 36px 66px rgba(0,0,0,.46)}
.tuile-marque .cartouche{height:clamp(62px,8vw,80px);padding:0}
.tuile-cans{
  display:flex;justify-content:center;align-items:flex-end;
  height:214px;margin-top:.8rem;width:100%;
}
.tuile-can{
  display:block;font-style:normal;flex:none;margin:0 -16px;
  transform:rotate(var(--a,0deg)) translateY(calc(var(--d,0) * 1px));
  transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.tuile-can picture{display:contents}
.tuile-can img{
  height:200px;width:auto;display:block;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.55));
}
.tuile-marque:hover .tuile-can{
  transform:rotate(calc(var(--a,0deg) * 1.4)) translateY(calc(var(--d,0) * 1px - 8px));
}
.ref .tuile-compte{
  display:inline-flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;justify-content:center;
  margin-top:.7rem;padding:.35rem .85rem;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  font-size:.8rem;font-weight:700;max-width:none;opacity:1;
}
.tuile-compte strong{font-family:var(--display);font-size:1.35rem;line-height:1;font-weight:900}
.tuile-compte small{
  display:block;width:100%;text-align:center;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;opacity:.85;
}
.tuile-marque .actions{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:1.1rem}
.refs-marques{grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:1.2rem}

/* ---- R6a : le prix sur chaque référence de Nos marques ---- */
.ref .ref-prix{
  margin-top:.55rem;font-family:var(--display);font-size:1.3rem;font-weight:900;
  letter-spacing:.01em;line-height:1;opacity:1;max-width:none;
}
.ref .ref-prix i{
  display:block;font-style:normal;font-family:var(--corps,inherit);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:.85;margin-top:.25rem;
}

/* ---- R6b : les carrés d'actualités, façon Instagram ---- */
.carres{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:2.2rem;
}
@media (min-width:700px){.carres{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
.carre{
  position:relative;overflow:hidden;aspect-ratio:1;border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  padding:1rem;text-align:center;text-decoration:none;color:#fff;
  background:var(--fond,var(--bleu));box-shadow:var(--ombre);
  transition:transform .35s ease,box-shadow .35s ease;
}
a.carre:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte)}
.carre svg{
  width:clamp(44px,9vw,68px);height:auto;fill:currentColor;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));
}
.carre b{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em;line-height:1}
.carre span{font-size:.8rem;opacity:.92;max-width:22ch}
.carre-insta{--fond:linear-gradient(45deg,#F9CE34 0%,#EE2A7B 50%,#6228D7 100%)}
.carre-tiktok{--fond:#0F0F0F}
.carre-tiktok svg{filter:drop-shadow(2px 2px 0 #FE2C55) drop-shadow(-2px -2px 0 #25F4EE)}
.carre-facebook{--fond:#1877F2}
.carre-snap{--fond:#FFFC00;color:#0F0F0F}
.carre-wa{--fond:#25D366}
.carre-jsoi{
  --fond:var(--blanc);color:var(--bleu);border:2px dashed var(--trait);box-shadow:none;
}
.carre-jsoi span{color:var(--encre-doux)}
.carre-photo{margin:0;padding:0}
.carre-photo picture{display:contents}
.carre-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- R8 : les réseaux en pastilles colorées (pied de page, contact) ---- */
.resos{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}
.reso{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 1rem 0 .5rem;border-radius:100px;text-decoration:none;
  font-weight:800;font-size:.86rem;color:#fff;
  background:var(--fond,var(--bleu));box-shadow:0 6px 16px rgba(0,0,0,.22);
  transition:transform .25s ease,filter .25s ease;
}
.pied-bloc .reso{color:#fff;min-height:44px}
.reso:hover{transform:translateY(-2px);filter:brightness(1.08);text-decoration:none}
.reso svg{
  width:30px;height:30px;padding:6px;box-sizing:border-box;flex:none;
  fill:currentColor;border-radius:50%;background:rgba(255,255,255,.2);
}
.reso-insta{--fond:linear-gradient(45deg,#F9CE34,#EE2A7B 55%,#6228D7)}
.reso-tiktok{--fond:#0F0F0F}
.reso-tiktok svg{filter:drop-shadow(1.5px 1.5px 0 #FE2C55) drop-shadow(-1.5px -1.5px 0 #25F4EE)}
.reso-facebook{--fond:#1877F2}
.reso-snap{--fond:#FFFC00;color:#0F0F0F}
.pied-bloc .reso-snap{color:#0F0F0F}
.reso-snap svg{background:rgba(0,0,0,.12)}

/* ---- R7 : la FAQ en accordéon, et les deux encarts côte à côte ---- */
.faq{margin-top:1.6rem;max-width:78ch}
.faq-q{border-top:1px solid var(--trait)}
.faq-q:last-child{border-bottom:1px solid var(--trait)}
.faq-q summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:54px;padding:.75rem 0;
  font-weight:800;font-size:.98rem;color:var(--bleu);
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{
  content:"+";flex:none;font-family:var(--display);font-size:1.5rem;line-height:1;
  color:var(--orange-texte);transition:transform .2s ease;
}
.faq-q[open] summary::after{transform:rotate(45deg)}
.faq-r{padding:0 0 1.1rem;max-width:68ch}
.faq-r p{font-size:.95rem;color:var(--encre-doux)}
.encarts{display:grid;gap:1rem;margin-top:1.8rem}
.encarts .encart{margin-top:0}
@media (min-width:760px){.encarts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================================
   16. MOUVEMENT REDUIT
   Un seul endroit, en dernier, pour que rien ne repasse devant.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ruban-piste{animation:none}
  .js .app{opacity:1;transform:none;transition:none}
  .hero-blason-fond{animation:none}
  .hero-blason-fond img{transform:none;transition:none}
  .bouton:hover{transform:none}
  .tuile-marque:hover,.vedette-m:hover,a.carre:hover,.reso:hover{transform:none}
  .tuile-marque:hover .tuile-can{transform:rotate(var(--a,0deg)) translateY(calc(var(--d,0) * 1px))}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- Compositions des références (05/09/2026) -------------------------
   Le dos de la canette, replié : un <details> par référence sur la page de
   marque. Pas de JS, et fermé par défaut pour que la page reste courte. */
.compos{display:grid;gap:.8rem;margin-top:1.6rem}
.compo{border:1px solid #dfe3ec;border-radius:14px;background:#fff;overflow:hidden}
.compo summary{list-style:none;cursor:pointer;padding:1rem 2.8rem 1rem 1.2rem;
  font-weight:700;position:relative;min-height:48px}
.compo summary::-webkit-details-marker{display:none}
.compo summary::after{content:"▾";position:absolute;right:1.1rem;top:50%;
  transform:translateY(-50%);transition:transform .2s;line-height:1}
.compo[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.compo-corps{padding:0 1.2rem 1.2rem;display:grid;gap:1.1rem}
@media (min-width:860px){.compo-corps{grid-template-columns:1fr 1.2fr;gap:1.6rem}}
.compo-ing b,.compo-nutri b{display:block;margin-bottom:.4rem}
.compo-ing p{margin:0;line-height:1.55}
.compo table{width:100%;border-collapse:collapse;font-size:.94rem}
.compo th,.compo td{padding:.42rem .5rem;border-bottom:1px solid #e6e9f0;text-align:left;vertical-align:top}
.compo th[scope=col]{font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;color:#6E7488;font-weight:600}
.compo th[scope=row]{font-weight:500}
.compo tr.fort th,.compo tr.fort td{font-weight:700}
.compo-pied{font-size:.82rem;color:#6E7488;margin:.7rem 0 0}

/* =========================================================================
   LE BANDEAU COOKIES (consentement.js)
   09/09/2026 : sorti du style local de cookies.html. Le bandeau parait
   sur toutes les pages des que la mesure d'audience (GA4) est branchee.
   ========================================================================= */
.cookies-etat{
  margin-top:1.6rem;padding:1rem 1.2rem;border-radius:var(--r);
  border:1px solid var(--trait);background:var(--blanc);
  box-shadow:var(--ombre);color:var(--encre);font-size:.95rem;font-weight:700;
}
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  transform:translateY(110%);transition:transform .35s ease;
  background:var(--bleu-fonce);border-top:4px solid var(--orange);
  box-shadow:0 -18px 44px rgba(0,0,0,.42);color:rgba(255,255,255,.86);
  max-height:86svh;overflow-y:auto;
}
.cookies.ouvert{transform:none}
.cookies-in{
  width:min(1180px,100% - 2.2rem);margin-inline:auto;padding:1.3rem 0 1.5rem;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:1.1rem 2rem;align-items:start;
}
.cookies-txt b{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.02em;color:var(--orange);margin-bottom:.4rem;
}
.cookies-txt p{font-size:.88rem;line-height:1.6}
.cookies-txt a{color:#fff;text-decoration:underline}
.cookies-ligne{
  display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.6rem;
  font-size:.84rem;line-height:1.5;cursor:pointer;
}
.cookies-ligne input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--orange)}
.cookies-ligne b{color:#fff}
.cookies-boutons{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.7rem}
.cookies-boutons .bouton{flex:1 1 auto;min-width:11rem}
/* ⚠️ « Tout refuser » a EXACTEMENT le meme poids visuel que « Tout
   accepter » : meme fond plein, meme taille, meme couleur. C'est le premier
   point que la CNIL controle, et un « accepter » en orange face a un
   « refuser » en contour est le cas d'ecole du dessin trompeur.
   On les designe par leur attribut et non par la classe `fantome` que pose
   le script : elle habille A LA FOIS « refuser » et « enregistrer », et
   seul le second est un choix secondaire. */
.cookies-boutons .bouton[data-tout],
.cookies-boutons .bouton[data-rien]{
  background:var(--orange);border-color:var(--orange);color:var(--bleu-fonce);
}
.cookies-boutons .bouton[data-tout]:hover,
.cookies-boutons .bouton[data-rien]:hover{background:#FF9420;border-color:#FF9420}
.cookies-boutons .bouton[data-choisir]{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.42);
}
.cookies-boutons .bouton[data-choisir]:hover{background:rgba(255,255,255,.10)}
@media(max-width:820px){
  .cookies-in{grid-template-columns:1fr;padding:1.1rem 0 1.3rem}
  .cookies-boutons{display:grid;grid-template-columns:1fr 1fr}
  .cookies-boutons .bouton{min-width:0;padding:.8rem .6rem;font-size:.86rem}
  .cookies-boutons .bouton:last-child{grid-column:1/-1}
}

/* 10/09/2026 — accueil : une offre lisible et les vrais produits. */
.hero-commerce{background:radial-gradient(ellipse at 85% 35%,#1649a0 0,transparent 55%),#001c4e;color:#fff;overflow:hidden;padding:52px 0 0}
.hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 34px;align-items:center}
.hc-copy{position:relative;z-index:2;padding:14px 0 20px}
.hc-eyebrow{color:#ffb354;text-transform:uppercase;font-size:.72rem;letter-spacing:.15em;font-weight:750;margin-bottom:20px}
.hc-copy h1{font-family:var(--display);font-size:clamp(3rem,5.3vw,4.7rem);font-weight:900;line-height:1.01;letter-spacing:-.04em;margin:0;text-transform:none}
.hc-copy h1 em{font-style:normal;color:#ff9b24}
.hc-intro{max-width:39ch;color:#dce6f8;font-size:1.07rem;line-height:1.6;margin:22px 0}
.hc-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hc-actions .bouton{border-radius:12px;padding:15px 23px;font-size:.98rem;gap:18px;box-shadow:0 8px 28px #0003}
.hc-whatsapp{color:#fff;font-size:.88rem;text-underline-offset:5px;min-height:36px;display:inline-flex;align-items:center;gap:10px}
.hc-whatsapp:hover{color:#ffb354}
.hc-small{color:#b9cbea;font-size:.72rem;line-height:1.5;margin-top:18px}
.hc-visual{position:relative;min-width:0;height:465px;isolation:isolate}
.hc-local{position:absolute;right:0;top:0;display:flex;align-items:center;gap:13px;z-index:3;font-size:.78rem;line-height:1.45;color:#dce6f8}
.hc-local b{color:#fff;font-size:.98rem}
.hc-flag{display:flex;align-items:center;justify-content:center;width:92px;aspect-ratio:3/2;background:#fff;border-radius:3px;box-shadow:0 5px 20px #0003;transform:rotate(3deg)}
.hc-flag picture{display:contents}.hc-flag img{width:62%;height:78%;object-fit:contain}
.hc-orbit{position:absolute;left:4%;top:14%;width:94%;aspect-ratio:1;border:1px solid #729ee44a;border-radius:50%;z-index:-1;box-shadow:0 0 0 35px #739ee407,0 0 0 70px #739ee406;background:radial-gradient(circle,#3879c54a,transparent 70%)}
.hc-cans{position:absolute;left:0;right:0;top:78px;height:318px}
.hc-cans::after{content:"";position:absolute;bottom:-12px;left:3%;width:94%;height:28px;border-radius:50%;background:#0007;filter:blur(14px);z-index:-1}
.hc-can{position:absolute;bottom:0;width:23%;height:87%;transform-origin:bottom center;filter:drop-shadow(9px 12px 9px #0005)}
.hc-can picture{display:contents}.hc-can img{width:100%;height:100%;object-fit:contain}
.hc-can-0{left:0;transform:rotate(-15deg);height:76%;z-index:1}
.hc-can-1{left:19%;transform:rotate(-8deg);height:88%;z-index:2}
.hc-can-2{left:39%;height:100%;z-index:4}
.hc-can-3{left:59%;transform:rotate(9deg);height:88%;z-index:3}
.hc-can-4{left:78%;transform:rotate(16deg);height:76%;z-index:1}
.hc-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.79rem;color:#c6d7f2;line-height:1.6}
.hc-caption b{display:block;color:#fff;font-size:1.02rem}
.hc-service{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff29;padding:24px 0 28px;gap:26px}
.hc-service div+div{border-left:1px solid #ffffff29;padding-left:26px}
.hc-service b{display:block;color:#fff;font-size:1rem;margin-bottom:5px}
.hc-service span{display:block;color:#bdcde7;font-size:.8rem;line-height:1.5;max-width:32ch}
.carre-jsoi[hidden]{display:none}
@media(max-width:760px){
 .hero-commerce{padding-top:26px}.hc-grid{grid-template-columns:1fr;gap:12px;width:calc(100% - 36px)}
 .hc-copy{padding:0}.hc-eyebrow{font-size:.62rem;letter-spacing:.1em;margin-bottom:13px}
 .hc-copy h1{font-size:clamp(2.65rem,10.4vw,4rem);line-height:1.01}.hc-copy h1 br:first-of-type{display:none}
 .hc-intro{font-size:.92rem;line-height:1.5;margin:16px 0;max-width:40ch}
 .hc-actions{gap:8px}.hc-actions .bouton{font-size:.85rem;padding:12px 17px;min-height:48px;width:100%;justify-content:space-between}
 .hc-whatsapp{font-size:.79rem;min-height:38px}.hc-small{font-size:.66rem;margin-top:7px}
 .hc-visual{height:300px;margin:5px 0 8px}.hc-local{top:0;font-size:.63rem;gap:9px}.hc-local b{font-size:.77rem}.hc-flag{width:62px}
 .hc-cans{top:53px;height:207px;left:4%;right:4%}.hc-orbit{width:77%;left:12%;top:5%}
 .hc-caption{font-size:.67rem}.hc-caption b{font-size:.81rem}
 .hc-service{gap:13px;padding:19px 0 23px;grid-template-columns:1fr}.hc-service div{display:grid;grid-template-columns:1fr 1.2fr;gap:13px;align-items:start}.hc-service div+div{border-left:0;padding-left:0}
 .hc-service b{font-size:.81rem}.hc-service span{font-size:.74rem}
}

/* Les accès restent dans l’écran, y compris sur les petits téléphones. */
@media(max-width:619px){
 .entete-in{gap:6px;width:calc(100% - 24px)}
 .entete .logo-img{width:94px}
 .entete .nav-cta{font-size:.76rem;padding:0 12px;min-height:42px}
 .entete .lien-compte{display:none}
 .entete .burger{margin-left:0;width:44px;height:44px}
}
@media(max-width:359px){.entete .logo-img{width:82px}.entete-in{gap:4px}.entete .nav-cta{padding:0 10px}}