/* Polices auto-hébergées (extraites de la maquette) */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/rubik-0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/rubik-1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Edu QLD Hand";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/edu-qld-hand-2.woff2") format("woff2");
}

/* Polices embarquees. En production, remplacer ce bloc par :
   <link href="https://fonts.googleapis.com/css2?family=Edu+QLD+Hand:wght@400..700&family=Rubik:wght@300;400;500;600&display=swap" rel="stylesheet"> */


/* ============================================================
   TE ORA NO PORINETIA — maquettes UI
   Charte GROUPE SALEM. Couleurs strictement chartées.
   ============================================================ */

:root{
  color-scheme: light;
  /* TE ORA NO PORINETIA */
  --jaune:#EAB00F;
  --jaune-fonce:#E2A100;
  --jaune-clair:#FFBD14;
  --creme:#FDF8E7;
  /* GROUPE SALEM */
  --bordeaux:#9B2745;
  --bordeaux-fonce:#841938;
  --bordeaux-clair:#BF2C56;
  --encre:#540C21;
  --rose:#F5EAED;
  --blanc:#FFFFFF;
  --ppn:#9B2745;

  --trame-jaune:url("/maquette/motifs/trame-jaune.svg");
  --trame-bordeaux:url("/maquette/motifs/trame-bordeaux.svg");
  --trame-salem:url("/maquette/motifs/trame-salem.svg");
  --frise:url("/maquette/motifs/frise.svg");
  --frise-heros:url("/maquette/motifs/frise-heros.svg");

  /* epaisseur unique des filets jaunes ; les marqueurs d'etat ont la leur */
  --filet:1px;
  --filet-actif:2px;
  --gouttiere:clamp(1.25rem, 4vw, 3.5rem);
  /* frise : largeur du blanc libre a gauche du contenu, puis bande centree dedans */
  --espace-marge:calc(max((100vw - 1240px) / 2, 0px) + var(--gouttiere));
  --frise-largeur:min(clamp(90px, 8.5vw, 130px), calc(var(--espace-marge) - 12px));
  --frise-marge:calc((var(--espace-marge) - var(--frise-largeur)) / 2);
  --largeur:1240px;
  --rythme:clamp(2.6rem, 4.8vw, 4.4rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme: light; }
}
:root[data-theme="dark"]{ color-scheme: light; }

*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
body{
  position:relative;
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:"Rubik",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block;}
/* Sprite SVG : l’attribut hidden ne force pas display:none sur <svg> (Chromium) */
.sprite-icone,
svg[hidden]{
  position:absolute !important;
  width:0 !important;height:0 !important;
  overflow:hidden !important;
  display:block !important;
  pointer-events:none;
}
button{font:inherit;color:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px;border-radius:2px;}

/* ---------- frise ----------
   Bande unique dans la marge gauche, sur toute la hauteur du site.
   Posee au-dessus des aplats de section et sous les contenus, fond fixe au cadre :
   la bande fait fenetre et le motif semble defiler au scroll. */
body::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:0;bottom:0;
  left:var(--frise-marge);
  width:var(--frise-largeur);
  background-image:var(--frise);
  background-repeat:repeat-y;
  background-size:var(--frise-largeur) auto;
  background-attachment:fixed;
  /* --frise-y : parallaxe au scroll (catalogue et accueil) */
  background-position:left var(--frise-marge) top var(--frise-y, 0px);
}
@media (max-width:900px){ body::before{display:none;} }
/* Frise au-dessus des aplats de section, contenus et messages au-dessus d'elle.
   main ne crée pas de contexte : sinon son fond masque la frise dans la marge. */
main{position:relative;}
.contenu,
.message,
.flash,
.alerte{
  position:relative;
  z-index:2;
}

/* ---------- typographie ---------- */
.titre{
  font-family:"Edu QLD Hand","Rubik",cursive;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.055em;
  line-height:1.16;
  margin:0;
}
.titre--leger{font-weight:400;}
.surtitre{
  font-family:"Rubik",sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin:0;
  color:var(--bordeaux);
}
.filet{
  width:66px;height:1px;border:0;margin:0 auto;
  background:currentColor;opacity:.75;
}

/* ---------- structure ---------- */
.contenu{
  width:100%;max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:var(--gouttiere);
}
.section{padding-block:var(--rythme);}
/* la courbe du heros assure deja la separation : on retire le blanc en trop dessous */
.heros + .section{padding-top:clamp(1.3rem,2.2vw,2rem);}
.vue[hidden]{display:none;}

/* ---------- en-tête ---------- */
.entete{
  position:sticky;top:0;z-index:60;
  background:var(--creme);
}
.entete__interieur{
  display:flex;align-items:center;gap:1.5rem;
  min-height:76px;
}
.entete__logo img{height:42px;width:auto;}
.entete__nav{
  margin-left:auto;display:flex;align-items:center;
  gap:clamp(.5rem,2vw,1.75rem);
}
.lien-nav{
  background:none;border:0;padding:.45rem .15rem;cursor:pointer;
  font-size:.9rem;font-weight:400;letter-spacing:.04em;
  text-decoration:none;position:relative;
}
.lien-nav[aria-current="page"]{font-weight:500;}
.lien-nav[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:.1rem;
  height:var(--filet-actif);background:var(--jaune);
}
.profil-actif{position:relative;flex:0 0 auto;}
/* bouton jaune, aux mesures communes des boutons du site,
   avec un triangle signalant le menu deroulant */
.profil-actif__btn{
  /* largeur fixe, calee sur le libelle le plus long : le bouton ne bouge plus
     au changement de profil ; le libelle reste ferre a gauche, le chevron a droite */
  width:9.5rem;
  display:inline-flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.78rem 1rem;cursor:pointer;
  font-family:inherit;
  font-size:.72rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;
  background:var(--jaune);color:var(--encre);
  border:0;border-radius:0;
  transition:background-color .18s ease;
}
.profil-actif__btn:hover{background:var(--jaune-clair);}
/* chevron au trait, meme epaisseur et memes bouts arrondis que les fleches */
.profil-actif__chevron{transition:transform .2s ease;}
.profil-actif__btn[aria-expanded="true"] .profil-actif__chevron{transform:rotate(180deg);}
.profil-menu{
  position:absolute;top:calc(100% + .4rem);right:0;z-index:70;
  min-width:15.5rem;margin:0;padding:.3rem;list-style:none;
  background:var(--blanc);border:1px solid rgba(84,12,33,.18);
  box-shadow:0 12px 28px rgba(84,12,33,.16);
}
.profil-menu form{margin:0;}
.profil-menu button,
.profil-menu a{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;
  padding:.6rem .8rem;font-size:.9rem;line-height:1.3;
  color:inherit;text-decoration:none;font-family:inherit;
}
.profil-menu button:hover,
.profil-menu a:hover{background:var(--creme);}
/* l'entree courante se signale par son seul fond */
.profil-menu button[aria-current],
.profil-menu a[aria-current]{background:var(--creme);font-weight:500;}
.profil-menu small{
  display:block;font-size:.75rem;font-weight:400;
  color:rgba(84,12,33,.72);margin-top:.12rem;
}
.panier-bouton{
  --panier-padding-v:.62rem;
  --panier-ico:26px;
  --panier-h:calc(var(--panier-ico) + 2 * var(--panier-padding-v));
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--encre);color:var(--creme);
  border:0;border-radius:0;cursor:pointer;
  padding:var(--panier-padding-v) 0 var(--panier-padding-v) 1.15rem;
  font-size:.78rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;
}
.panier-bouton:hover,
.panier-bouton:focus,
.panier-bouton:focus-visible{text-decoration:none;}
.panier-bouton__ico{flex:0 0 auto;width:var(--panier-ico);height:var(--panier-ico);color:var(--jaune);stroke-width:3.8;}
/* pave carre a droite, sur toute la hauteur du bouton */
.panier-bouton__nb{
  align-self:stretch;
  margin-block:calc(var(--panier-padding-v) * -1);
  margin-inline-start:.55rem;
  flex:0 0 auto;width:var(--panier-h);
  display:grid;place-items:center;
  background:var(--jaune);color:var(--encre);
  font-size:.86rem;font-weight:600;letter-spacing:0;
  border-radius:0;font-variant-numeric:tabular-nums;
}

/* ============================================================
   ACCUEIL — héros
   ============================================================ */
.heros{
  position:relative;z-index:2;overflow:hidden;
  background:var(--jaune);   /* aplat uni #EAB00F, sans trame */
  color:var(--encre);
  isolation:isolate;
}
/* le heros passe au-dessus de la bande de page et reprend la frise
   dans sa teinte propre, #FFBD14, avec le meme calage et le meme fond fixe */
.heros::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:0;bottom:0;
  left:var(--frise-marge);
  width:var(--frise-largeur);
  background-image:var(--frise-heros);
  background-repeat:repeat-y;
  background-size:var(--frise-largeur) auto;
  background-attachment:fixed;
  background-position:left var(--frise-marge) top var(--frise-y, 0px);
}
@media (max-width:900px){ .heros::before{display:none;} }

/* deux colonnes : discours et choix de profil a gauche, visuel a droite */
.heros__grille{
  position:relative;z-index:3;
  --gouttiere-heros:clamp(1rem,2vw,1.7rem);
  --heros-pad-haut:clamp(2.2rem,4vw,3.3rem);
  --heros-pad-bas:clamp(2.2rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:var(--gouttiere-heros);
  align-items:center;
  padding-block:var(--heros-pad-haut) var(--heros-pad-bas);
}
.heros__copie{min-width:0;position:relative;}

.heros__surtitre{margin-bottom:1.1rem;color:var(--bordeaux);}
.heros__titre{
  font-size:clamp(1.75rem,3.4vw,2.7rem);
  line-height:1.24;margin:0;color:var(--encre);
}
.heros__intro{
  max-width:46ch;margin:1rem 0 0;
  font-size:clamp(.95rem,1.2vw,1.02rem);
  color:rgba(84,12,33,.9);
}

/* cartes de profil */
.profils{
  margin-top:clamp(1.5rem,2.6vw,2rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(.9rem,1.6vw,1.15rem);
}
.profil{
  display:flex;flex-direction:column;
  background:var(--creme);
  border:0;
  border-radius:0;
  padding:1.3rem 1.25rem 1.15rem;
  text-align:left;
  will-change:transform;
  transition:transform .5s cubic-bezier(.19,.72,.28,1),
             box-shadow .5s cubic-bezier(.19,.72,.28,1);
}
/* au survol : simple elevation */
.profil:hover,
.profil:focus-within{
  transform:translateY(-7px);
  box-shadow:0 16px 34px rgba(84,12,33,.16);
}
.profil__tete{
  display:flex;align-items:flex-start;
  margin-bottom:clamp(1.3rem,2.2vw,1.75rem);
}
.profil__pastille{flex:0 0 auto;display:grid;place-items:center;}
.profil__ico{
  width:clamp(48px,4.6vw,58px);height:clamp(48px,4.6vw,58px);
  color:var(--encre);
}
.profil h2{
  font-family:"Edu QLD Hand",cursive;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.2;
  font-size:clamp(1.15rem,1.9vw,1.4rem);margin:0;
}
.profil p{
  margin:.75rem 0 1.2rem;flex:1;
  font-size:.86rem;line-height:1.6;color:rgba(84,12,33,.85);
}
@media (max-width:640px){
  /* icône à gauche du titre ; le texte et le bouton restent en dessous */
  .profil{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:.85rem;
    align-items:center;
  }
  .profil__tete{grid-column:1;grid-row:1;margin-bottom:0;}
  .profil h2{grid-column:2;grid-row:1;}
  .profil p,.profil form{grid-column:1 / -1;}
  /* l'épingle a du blanc à droite dans le carré : on le rogne, le dessin garde sa taille */
  .profil__ico--pin{width:40.84px;}
}
/* visuel : photo masquee par la courbe identitaire */
/* le visuel occupe toute sa colonne : bord gauche cale sur la gouttiere,
   bord droit cale sur le bord droit du contenu */
/* le visuel deborde la zone de contenu : il file jusqu'au bord droit de l'ecran
   et occupe toute la hauteur de la section, fond compris. L'aplat de la
   composition etant celui du heros, ce debord ne cree aucune limite visible. */
.heros__visuel{
  position:relative;min-width:0;
  align-self:stretch;
  margin:calc(-1 * var(--heros-pad-haut)) calc(-1 * var(--espace-marge))
         calc(-1 * var(--heros-pad-bas)) 0;
}
/* visuel hors flux : la figure n'impose plus sa hauteur intrinseque a la rangee.
   La composition est fournie sur l'aplat #EAB00F du heros : elle est affichee
   en entier, sans recadrage ni masque, et se fond dans le fond de section. */
.heros__photo{
  /* retrait vertical : la composition est limitee par la hauteur de rangee,
     ce retrait la reduit d'autant et lui laisse respirer sur l'aplat.
     Hauteur calculee, et non auto : sur un element remplace, auto reprendrait
     le rapport intrinseque et annulerait le retrait du bas. */
  --heros-photo-retrait:clamp(1rem,3.5vw,3.6rem);
  position:absolute;
  top:var(--heros-photo-retrait);left:0;
  width:100%;height:calc(100% - 2 * var(--heros-photo-retrait));
  /* leger decalage vers la droite : la composition garde du jeu sur l'aplat
     a droite, sans revenir au centrage qui la collerait au texte */
  object-fit:contain;object-position:25% 50%;
}
@media (max-width:900px){
  .heros__grille{grid-template-columns:minmax(0,1fr);gap:2rem;}
  .heros__visuel{
    min-height:0;
    margin:0 calc(-1 * var(--espace-marge)) calc(-1 * var(--heros-pad-bas));
  }
  .heros__photo{position:static;width:100%;height:auto;}
}

/* ---------- icones de trait ---------- */
/* epaisseur des pictogrammes traces en filet, heritee par les <use> */
.profil__ico,.etape__ico,.engagement__ico{stroke-width:1.45;}
.ui-ico{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- boutons ---------- */
/* Socle commun a tous les boutons du site, cale sur les boutons
   « Voir le catalogue » du premier bloc de la page d'accueil. */
.bouton,
.ajouter{
  display:inline-flex;align-items:center;justify-content:space-between;gap:.9rem;
  padding:.78rem 1rem;cursor:pointer;
  font-family:inherit;
  font-size:.72rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;
  background:var(--jaune);color:var(--encre);
  border:0;border-radius:0;
  transition:background-color .18s ease,color .18s ease;
}
.bouton:hover,
.ajouter:hover{background:var(--jaune-clair);}
/* variante sombre, reservee aux fonds jaunes ou un aplat jaune ne ressortirait pas */
.bouton--plein{background:var(--encre);color:var(--creme);}
.bouton--plein:hover{background:var(--bordeaux);}
/* même police que le bouton plein, sans padding, flèche à gauche, fond transparent */
.bouton--transparent{
  background:transparent;color:var(--bordeaux);
  padding:0;justify-content:flex-start;
}
.bouton--transparent:hover,
.bouton--transparent:focus-visible{background:transparent;color:var(--bordeaux);}
/* la fleche avance au survol et revient au relachement, sur tous les boutons ;
   le bouton Panier de l'en-tete garde son traitement propre */
.bouton .ui-ico,
.ajouter .ui-ico{transition:transform .26s cubic-bezier(.22,.61,.36,1);}
.bouton:hover .ui-ico, .bouton:focus-visible .ui-ico,
.ajouter:hover .ui-ico, .ajouter:focus-visible .ui-ico{transform:translateX(6px);}
.bouton--transparent:hover .ui-ico,
.bouton--transparent:focus-visible .ui-ico{transform:translateX(-6px);}

/* ============================================================
   ACCUEIL — têtes de section
   ============================================================ */
.tete-section{text-align:left;max-width:56ch;margin:0 0 clamp(1.9rem,3.4vw,2.7rem);}
.tete-section .surtitre{margin-bottom:1.15rem;color:var(--bordeaux);}
.tete-section .titre{font-size:clamp(1.65rem,3.6vw,2.6rem);color:var(--encre);}
.tete-section p{margin:1rem 0 0;max-width:52ch;color:rgba(84,12,33,.82);}
.tete-section .filet{color:var(--jaune);margin:1.15rem 0;}

/* parcours de commande : fond blanc, clos par un filet jaune ferre sur la
   zone de contenu, et non sur toute la largeur de l'ecran */
.bande-creme{position:relative;}
.bande-creme::after{
  content:"";position:absolute;bottom:0;height:var(--filet);
  left:calc(max((100% - var(--largeur)) / 2, 0px) + var(--gouttiere));
  right:calc(max((100% - var(--largeur)) / 2, 0px) + var(--gouttiere));
  background:var(--jaune);
}
@media (max-width:640px){
  .tete-section .surtitre{margin-top:0;}
  .bande-creme{background-color:var(--creme);}
  .bande-creme::after{content:none;}
}

/* ============================================================
   ACCUEIL — bande d'engagements
   ============================================================ */
/* se fixe sous l'en-tete au defilement ; son aplat interrompt la frise */
.engagements{
  position:sticky;top:76px;z-index:3;
  background:var(--blanc);
  border-bottom:var(--filet) solid var(--jaune);
}
.engagements__grille{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.16fr);
  padding-block:clamp(1.3rem,2.4vw,1.8rem);
}
.engagement{
  display:flex;align-items:center;gap:1.05rem;
  padding-inline:clamp(.9rem,1.9vw,1.55rem);
  border-right:var(--filet) solid var(--jaune);
}
.engagement:first-child{padding-left:0;}
.engagement:last-child{padding-right:0;border-right:0;}
.engagement__ico{flex:0 0 auto;width:42px;height:42px;color:var(--bordeaux);}
.engagement strong{display:block;font-size:.84rem;font-weight:500;line-height:1.35;}
.engagement p{margin:.2rem 0 0;font-size:.82rem;line-height:1.45;color:rgba(84,12,33,.85);}
@media (max-width:820px){
  /* dans le flux : ne reste pas collé sous l'en-tête, ne recouvre pas les étapes.
     Pas de filet sous le dernier engagement (le bandeau n'a plus de bordure). */
  .engagements{position:static;top:auto;z-index:3;border-bottom:0;}
  .engagements__grille{grid-template-columns:minmax(0,1fr);padding-block:.4rem;}
  .engagement{
    border-right:0;border-bottom:var(--filet) solid var(--jaune);
    padding:1.05rem 0;
  }
  .engagement:last-child{border-bottom:0;}
}

/* ============================================================
   ACCUEIL — étapes
   ============================================================ */
.etapes{
  counter-reset:etape;
  --gouttiere-etapes:clamp(2rem,4vw,3.2rem);
  display:grid;
  column-gap:var(--gouttiere-etapes);
  row-gap:clamp(1.5rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
/* colonnes sans retrait : l'etape 1 se cale sur le titre,
   l'etape 4 sur le bord droit du contenu ; les filets tiennent la gouttiere.
   L'icone reste au-dessus ; le numero est sur la ligne du titre. */
.etape{position:relative;}
.etape + .etape::after{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--gouttiere-etapes) / -2);
  width:var(--filet);background:var(--jaune);
}
.etape__ico{display:block;width:50px;height:50px;color:var(--bordeaux);margin-bottom:1rem;}
.etape h3{
  display:flex;align-items:baseline;gap:.45rem;
  font-size:1.02rem;font-weight:500;margin:0 0 .5rem;
  letter-spacing:.01em;
}
.etape h3::before{
  counter-increment:etape;content:counter(etape,decimal-leading-zero);
  flex:0 0 auto;
  font-size:.74rem;font-weight:600;letter-spacing:.18em;
  color:var(--jaune-fonce);
}
.etape p{margin:0;font-size:.93rem;color:rgba(84,12,33,.88);}
@media (max-width:700px){
  .etape + .etape::after{display:none;}
  .etape + .etape{border-top:var(--filet) solid var(--jaune);padding-top:2.4rem;}
}

/* ============================================================
   ACCUEIL — groupe SALEM
   ============================================================ */
.groupe{
  background:var(--blanc);
  position:relative;overflow:hidden;
}
.groupe__grille{
  display:grid;gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .groupe__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
.groupe__titre .surtitre{margin-bottom:1rem;color:var(--bordeaux);}
.groupe h2{
  font-family:"Edu QLD Hand",cursive;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.18;
  font-size:clamp(1.6rem,3.1vw,2.55rem);
  margin:0;color:var(--encre);
}
.groupe__texte{padding-top:clamp(0rem,1.2vw,1.1rem);}
/* meme corps de texte que les blocs du parcours de commande */
.groupe__texte p{margin:0;font-size:.93rem;color:rgba(84,12,33,.88);max-width:58ch;}
.groupe__valeurs{
  list-style:none;margin:clamp(1.5rem,2.6vw,2.1rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem;
}
/* etiquettes ajourees : fond blanc, filet et texte en jaune.
   Teinte la plus soutenue de la palette jaune, pour la lisibilite. */
.groupe__valeurs li{
  font-size:.82rem;padding:.48rem .85rem;
  background:var(--blanc);
  border:1px solid var(--jaune-fonce);
  color:var(--jaune-fonce);
}

/* ============================================================
   CATALOGUE — bandeau voyage
   ============================================================ */
.bandeau{
  position:relative;z-index:2;
  background:var(--jaune);
  color:var(--blanc);
}
/* filet de cloture ferre sur la zone de contenu, et non sur toute la largeur */
.bandeau::after{
  content:"";position:absolute;bottom:0;height:var(--filet);
  left:calc(max((100% - var(--largeur)) / 2, 0px) + var(--gouttiere));
  right:calc(max((100% - var(--largeur)) / 2, 0px) + var(--gouttiere));
  background:var(--jaune-clair);
}
.bandeau__interieur{
  --bandeau-gouttiere:clamp(.9rem,1.9vw,1.55rem);
  display:flex;align-items:center;
  gap:var(--bandeau-gouttiere);
  padding-block:clamp(1.3rem,2.4vw,1.8rem);
}
.bandeau__ico{
  flex:0 0 auto;width:42px;height:42px;
  color:var(--creme);
}
.bandeau__corps{
  display:flex;align-items:center;gap:var(--bandeau-gouttiere);
  min-width:0;flex:1 1 auto;
}
.bandeau__meta{
  display:flex;align-items:center;gap:var(--bandeau-gouttiere);
  min-width:0;flex:0 1 auto;
}
.bandeau__col{min-width:0;}
.bandeau__meta .bandeau__col + .bandeau__col,
.bandeau__meta + .bandeau__cell-iles{
  border-left:var(--filet) solid var(--jaune-clair);
  padding-left:var(--bandeau-gouttiere);
}
.bandeau__cell-iles{flex:1;min-width:0;line-height:1.2;}
.bandeau__label{
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 .3rem;color:var(--creme);
}
.bandeau__label-short{display:none;}
/* contenus sous les titres : graisse normale, identique d une colonne a l autre */
.bandeau__numero{
  font-size:.95rem;font-weight:400;letter-spacing:.01em;
  margin:0;line-height:1.35;
}
.bandeau__date{
  font-size:.95rem;font-weight:400;margin:0;line-height:1.35;
}
/* desktop : libellé des îles sur une ligne, liste sur la suivante */
.bandeau__iles{
  display:block;
  margin:0;font-size:.95rem;font-weight:400;line-height:1.2;
  color:var(--blanc);
}
@media (max-width:900px){
  .bandeau__interieur{
    align-items:flex-start;
    gap:.65rem;
    padding-block:.75rem;
  }
  .bandeau__ico{width:30px;height:30px;margin-top:.15rem;}
  .bandeau__corps{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.35rem;
    min-width:0;
  }
  .bandeau__meta{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:.75rem;
    row-gap:.15rem;
  }
  .bandeau__meta .bandeau__col{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.35rem .45rem;
  }
  .bandeau__meta .bandeau__col + .bandeau__col,
  .bandeau__meta + .bandeau__cell-iles{
    border-left:0;
    padding-left:0;
  }
  .bandeau__label{
    font-size:.58rem;letter-spacing:.14em;margin:0;
  }
  .bandeau__label-long{display:none;}
  .bandeau__label-short{display:inline;}
  .bandeau__numero,
  .bandeau__date{
    font-size:.86rem;line-height:1.25;margin:0;
  }
  .bandeau__cell-iles{
    display:block;
    min-width:0;
    max-width:100%;
  }
  .bandeau__cell-iles .bandeau__label{display:inline;margin:0 .4rem 0 0;}
  .bandeau__iles{
    display:inline;
    max-width:100%;
    margin:0;
    font-size:.8rem;
    line-height:1.2;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    overflow-wrap:normal;
  }
}

/* ---------- navigation catégories ---------- */
.cat-nav{
  position:sticky;top:76px;z-index:50;
  background:var(--blanc);
  border-bottom:var(--filet) solid var(--jaune);
}
/* piste scrollable à gauche, profil fixe à droite — jamais superposés */
.cat-nav__interieur{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.55rem;
  min-width:0;
}
.cat-nav__piste{
  min-width:0;
  max-width:100%;
  display:flex;gap:.35rem;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-block:.65rem;
  /* masque net : les libellés ne peignent jamais sous le profil */
  mask-image:linear-gradient(to right, #000 calc(100% - .75rem), transparent);
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - .75rem), transparent);
}
.cat-nav__piste::-webkit-scrollbar{display:none;width:0;height:0;}
.cat-nav__lien{
  flex:0 0 auto;background:none;border:0;cursor:pointer;
  padding:.55rem .95rem;font-size:.87rem;white-space:nowrap;
  color:rgba(84,12,33,.72);text-decoration:none;
  border-bottom:var(--filet-actif) solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.cat-nav__lien:hover{color:var(--encre);}
.cat-nav__lien.est-actif{color:var(--encre);font-weight:500;border-bottom-color:var(--jaune);}
.cat-nav .profil-actif{
  position:relative;z-index:2;
  justify-self:end;
  background:var(--blanc);
  padding-inline-start:.15rem;
}

/* ---------- catégories & produits ---------- */
.categorie{padding-top:clamp(2.1rem,3.6vw,3rem);scroll-margin-top:150px;}
.categorie__tete{
  display:flex;align-items:baseline;gap:1rem;
  padding-bottom:1rem;margin-bottom:clamp(1.25rem,2.2vw,1.7rem);
  border-bottom:var(--filet) solid var(--jaune);
}
.categorie__tete h2{
  font-family:"Edu QLD Hand",cursive;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.35rem,2.8vw,1.95rem);margin:0;color:var(--encre);
}
.categorie__nb{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bordeaux);margin-left:auto;
}
.grille-produits{
  display:grid;gap:clamp(.8rem,1.5vw,1.2rem);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1024px){ .grille-produits{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:700px){ .grille-produits{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:420px){ .grille-produits{grid-template-columns:minmax(0,1fr);} }
.produit{
  display:flex;flex-direction:column;
  background:var(--creme);
  border-radius:0;
  padding:1rem 1rem .95rem;
}
/* etiquette a droite du prix : fond transparent, filet a la couleur du texte */
.etiquette{
  margin-left:auto;align-self:center;
  font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.18rem .4rem;white-space:nowrap;
  color:var(--bordeaux);background:transparent;
  border:1px solid currentColor;
}
/* visuel produit : packshot sur fond blanc, cadre creme de la carte.
   Remplacer le contenu de la figure par <img src="…" alt=""> a la livraison des visuels client. */
.produit__visuel{
  position:relative;margin:0 0 .8rem;
  aspect-ratio:4/3;overflow:hidden;
  background:var(--blanc);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
}
.produit__visuel img{
  display:block;width:100%;height:100%;object-fit:cover;
  padding:0;box-sizing:border-box;
}
.produit__visuel-ico{width:34px;height:34px;color:var(--bordeaux);opacity:.32;}
.produit__visuel-legende{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(84,12,33,.45);
}
.produit h3{
  font-size:.93rem;font-weight:500;margin:0 0 .3rem;line-height:1.32;
}
.produit__desc{
  margin:0 0 .85rem;font-size:.79rem;line-height:1.45;
  color:rgba(84,12,33,.75);
}
.produit__pied{margin-top:auto;}
.produit__prix{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .5rem;
  margin-bottom:1.05rem;
}
.produit__prix strong{font-size:1.08rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;}
.produit__prix span{font-size:.7rem;color:rgba(84,12,33,.7);letter-spacing:.04em;}
/* colonnes etroites : le compteur passe au-dessus du bouton */
.produit__achat{display:flex;flex-direction:column;gap:.45rem;align-items:stretch;}
.compteur{
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(84,12,33,.25);background:var(--blanc);
}
.compteur button{
  width:2rem;height:100%;min-height:2.25rem;
  background:none;border:0;cursor:pointer;
  font-size:.95rem;line-height:1;color:var(--encre);
}
.compteur button:hover{background:var(--rose);}
.compteur output{
  min-width:2.1rem;text-align:center;
  font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums;
}
.ajouter{width:100%;padding-inline:.8rem;}
.ajouter.est-ajoute{background:var(--encre);color:var(--creme);}

/* ---------- bandeau de commande du panier ----------
   Même hauteur et même composition que le résumé catalogue : phrase à la
   place du texte, total au même endroit, bouton à droite. La phrase peut
   passer sur deux lignes sans dépasser la hauteur du résumé. */
.panier-bandeau{
  position:sticky;bottom:0;z-index:55;
}
.panier-bandeau.panier-resume{margin-top:0;}
.panier-mention{display:none;}
.panier-bandeau .panier-resume__texte{
  flex:1 1 0;min-width:0;margin:0;
  max-width:50%;
  font-size:clamp(.66rem, 1.5vw, .86rem);
  line-height:1.25;
}
.panier-bandeau .panier-resume__total,
.panier-bandeau .bouton{flex:0 0 auto;}
/* juste au-dessus du passage mobile, la phrase est étroite : elle reste
   dans la hauteur du résumé, sans passer sous le total */
@media (max-width:760px){
  .panier-bandeau .panier-resume__texte{font-size:.62rem;line-height:1.15;}
}

/* ---------- panier flottant ---------- */
.panier-resume{
  position:sticky;bottom:0;z-index:55;
  margin-top:clamp(2rem,3.6vw,3rem);
  background:var(--jaune-clair);color:var(--encre);
  border-top:var(--filet) solid color-mix(in oklab, var(--jaune) 55%, transparent);
}
.panier-resume__interieur{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  padding-block:1rem;
}
.panier-resume__texte{font-size:.86rem;color:rgba(84,12,33,.82);min-width:0;}
.panier-resume__total{
  margin-left:auto;display:flex;align-items:baseline;gap:.6rem;
  font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.panier-resume__total small{
  font-size:.66rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(84,12,33,.7);
}
.page-catalogue{
  --panier-resume-h:0px;
}
/* catalogue seulement : le bouton est centré sur l'ensemble total + fret */
.page-catalogue .panier-resume__interieur{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "total cta"
    "texte cta";
  align-items:center;
  column-gap:1rem;
  row-gap:.28rem;
}
.page-catalogue .panier-resume__texte{grid-area:texte;margin:0;}
.page-catalogue .panier-resume__total{grid-area:total;margin:0;justify-self:start;}
.page-catalogue .panier-resume .bouton{grid-area:cta;align-self:center;justify-self:end;}
@media (max-width:640px){
  .page-catalogue{
    /* total + bouton, puis le résumé sur la ligne du dessous */
    --panier-resume-h:4.6rem;
  }
  html:has(body.page-catalogue){
    --panier-resume-h:4.6rem;
    scroll-padding-bottom:calc(var(--panier-resume-h) + .75rem);
  }
  /* le résumé et le catalogue partagent la même cellule : la barre colle
     en bas de l'écran, puis s'arrête au-dessus du pied de page */
  .catalogue-zone{
    display:grid;
  }
  .catalogue-zone > .catalogue,
  .catalogue-zone > .panier-resume{
    grid-area:1 / 1;
    min-width:0;
  }
  .page-catalogue .catalogue{
    padding-bottom:calc(var(--panier-resume-h) + 1rem);
  }
  .page-catalogue .produit,
  .page-catalogue .produit__visuel{
    scroll-margin-bottom:calc(var(--panier-resume-h) + .75rem);
  }
  .page-catalogue .panier-resume{
    position:sticky;
    inset-inline:0;
    bottom:0;
    align-self:end;
    justify-self:stretch;
    width:100%;
    height:max-content;
    margin-top:0;
    z-index:3;
  }
  .panier-resume__interieur{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "total cta"
      "texte texte";
    align-items:center;
    column-gap:.6rem;
    row-gap:.28rem;
    padding-block:.5rem .42rem;
  }
  .panier-resume__texte{
    grid-area:texte;
    width:auto;
    min-width:0;
    margin:0;
    font-size:.74rem;
    line-height:1.25;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }
  .panier-resume__total{
    grid-area:total;
    width:auto;
    margin:0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    font-size:1.2rem;
    gap:.1rem;
    line-height:1;
  }
  .panier-resume__total small{
    display:block;
    font-size:.58rem;
    letter-spacing:.16em;
    line-height:1;
  }
  .panier-resume .bouton{
    grid-area:cta;
    width:auto;
    margin:0;
    align-self:center;
    justify-content:center;
    gap:.4rem;
    padding:.55rem .7rem;
    font-size:.62rem;
    letter-spacing:.06em;
    white-space:nowrap;
    box-sizing:border-box;
  }
  .panier-resume .bouton .ui-ico{flex:0 0 auto;width:15px;height:15px;}
  .cat-nav__interieur{gap:.4rem;}
  .cat-nav__lien{padding:.45rem .7rem;font-size:.8rem;}
  .cat-nav .profil-actif__btn{
    width:auto;
    min-width:0;
    max-width:7.25rem;
    padding:.55rem .65rem;
    font-size:.64rem;
    letter-spacing:.06em;
    gap:.35rem;
  }
}

/* ============================================================
   pied de page
   ============================================================ */
/* passe au-dessus de la frise : son aplat l'interrompt sur toute sa hauteur */
.pied{
  position:relative;z-index:2;
  background-color:var(--encre);
  color:var(--creme);
  padding-block:clamp(2.4rem,4.4vw,3.4rem) clamp(1.8rem,3vw,2.5rem);
}
/* motif du groupe SALEM, fondu de gauche a droite : absent a gauche,
   il monte progressivement jusqu'au bord droit. z-index negatif pour
   rester sous les contenus et au-dessus de l'aplat bordeaux. */
.pied::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--trame-salem);
  background-size:118px 125px;
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%, transparent 26%, rgba(0,0,0,.45) 60%, #000 100%);
  mask-image:linear-gradient(to right,
    transparent 0%, transparent 26%, rgba(0,0,0,.45) 60%, #000 100%);
}
.pied__grille{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  padding-bottom:2.1rem;
  border-bottom:1px solid rgba(253,248,231,.2);
}
.pied__logo img{width:min(190px,70%);margin-bottom:1.1rem;}
.pied__grille p{margin:0;font-size:.89rem;font-weight:300;color:rgba(253,248,231,.82);max-width:34ch;}
.pied h3{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;margin:0 0 1rem;color:var(--jaune-clair);
}
.pied ul{list-style:none;margin:0;padding:0;}
.pied li{margin-bottom:.55rem;}
.pied li a,.pied li button{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:.89rem;font-weight:300;text-decoration:none;
  color:rgba(253,248,231,.86);
}
.pied li a:hover,.pied li button:hover{color:var(--jaune-clair);}
.pied__contact{font-style:normal;display:grid;gap:.6rem;}
.pied__socials{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem;}
.pied__social{
  display:inline-flex;
  color:var(--creme);transition:color .18s ease;
}
.pied__social svg{width:26px;height:26px;fill:currentColor;}
.pied__social:hover{color:var(--jaune-clair);}
a.pied__coordonnee{text-decoration:none;}
a.pied__coordonnee:hover{color:var(--jaune-clair);}
.pied__coordonnee{font-size:.89rem;font-weight:300;color:rgba(253,248,231,.86);}
.pied__bas{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;
  padding-top:1.5rem;
}
.pied__bas p{margin:0;font-size:.78rem;color:rgba(253,248,231,.62);}
.pied__legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .85rem;
  list-style:none;margin:0;padding:0;
  font-size:.78rem;font-weight:300;color:rgba(253,248,231,.62);
}
.pied__legal li{margin:0;}
.pied__legal li + li::before{content:"·";margin-right:.85rem;opacity:.65;}
.pied__legal li a{font-size:.78rem;font-weight:300;color:inherit;text-decoration:none;}
.pied__legal li a:hover{color:var(--jaune-clair);text-decoration:underline;text-underline-offset:2px;}
.pied__salem{margin-left:auto;display:flex;align-items:center;gap:.9rem;}
.pied__salem span{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,248,231,.6);}
.pied__salem img{height:34px;width:auto;}

/* ---------- utilitaires ---------- */
.ico{display:block;width:100%;height:100%;fill:currentColor;}
.saut{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.saut:focus{
  position:fixed;top:.5rem;left:.5rem;width:auto;height:auto;
  clip-path:none;padding:.75rem 1.25rem;background:var(--encre);
  color:var(--creme);z-index:100;
}
@media (max-width:640px){
  .cat-nav{top:68px;}
  .entete__interieur{min-height:68px;gap:.6rem;}
  .entete__logo img{height:32px;}
  .lien-nav{font-size:.8rem;}
  .entete__nav{gap:.55rem;}
  .panier-bouton__texte{display:none;}
  .panier-bouton{--panier-padding-v:.55rem;--panier-ico:24px;padding-inline-start:.7rem;gap:.4rem;}
  .profil-menu{min-width:13.5rem;}
  .categorie{scroll-margin-top:130px;}
  .panier-actions,.coordonnees-actions,.confirmation-actions{
    flex-direction:column;align-items:stretch;
  }
  .panier-actions .bouton,.coordonnees-actions .bouton,.confirmation-actions .bouton{
    width:100%;text-align:center;
  }
  /* la phrase quitte le bandeau : elle est sous le Total, dans la page */
  .panier-mention{display:block;margin:1.15rem 0 0;font-size:.95rem;font-weight:400;line-height:1.45;text-align:left;color:rgba(84,12,33,.88);}
  .panier-bandeau .panier-mention-bandeau{display:none;}
  .panier-bandeau .panier-resume__interieur{padding-block:.55rem;row-gap:0;}
  .page-coordonnees .coordonnees__retour{display:inline-block;margin-top:.85rem;font-size:.9rem;}
  .coordonnees__grille{grid-template-columns:minmax(0,1fr);}
  .page-panier .panier-totaux{max-width:none;margin-inline:0;padding:0;}
  .page-panier .panier h1.titre{
    font-family:"Rubik",sans-serif;
    font-weight:600;
    font-size:1.15rem;
    letter-spacing:.04em;
    line-height:1.25;
    text-wrap:balance;
  }
  .panier h1 .libelle-long,
  .panier-resume .libelle-long{display:none;}
  .panier h1 .libelle-court,
  .panier-resume .libelle-court{display:inline;}
}
@media (max-width:420px){
  /* Accueil tient dans le logo ; Catalogue reste visible à côté du panier. */
  .entete__nav .lien-nav--accueil{display:none;}
  .cat-nav .profil-actif__btn{max-width:6.75rem;font-size:.6rem;padding:.5rem .55rem;}
}
@media (max-width:399px){
  .entete__nav .lien-nav--catalogue{display:none;}
}

/* ---------- messages unifiés (flash, alerte métier, états) ---------- */
.message,
.flash,
.alerte {
  margin: 1rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--creme);
  border: 1px solid rgba(84, 12, 33, 0.12);
  border-left: 4px solid var(--jaune);
  color: var(--encre);
  font-size: 0.98rem;
  line-height: 1.5;
}
.messages { padding-block: 1rem 0; }
.message--success,
.flash--success { border-left-color: #2f6b3a; background: #eef7ef; }
.message--error,
.message--warning,
.flash--error,
.flash--warning {
  border-left-color: var(--bordeaux);
  background: color-mix(in oklab, var(--rose) 75%, var(--blanc));
}
.message--info,
.alerte--info,
.alerte--commande {
  margin: 0 0 1.5rem;
  border-left-color: var(--jaune);
  background: var(--creme);
}
.page-catalogue .message--warning,
.page-catalogue .alerte--commande {
  margin-block: 1.25rem 0.35rem;
}
.page-panier [data-testid="cart-empty"].message {
  margin: 0 0 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(84, 12, 33, .88);
}
.visually-hidden, .saut {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.page-panier .panier,
.page-coordonnees .coordonnees {
  padding-block: clamp(2.4rem, 4.5vw, 3.8rem) 4rem;
}
.libelle-court{display:none;}
.panier h1 {
  margin: 0 0 1.5rem;
  padding-block: 0.15em 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--encre);
  line-height: 1.28;
  overflow: visible;
  max-width: 100%;
}
/* Écran 04 wireframe — colonne unique, champs + récap + CTA */
.coordonnees {
  max-width: 36rem;
  margin-inline: auto;
}
.coordonnees__titre {
  margin: 0 0 1.75rem;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 600;
  color: var(--encre);
  line-height: 1.25;
}
.coordonnees__recap {
  margin-top: 0.35rem;
  padding: 1.15rem 1.2rem 1.05rem;
  background: var(--creme);
  border: 1px solid rgba(84, 12, 33, 0.14);
  border-top: 3px solid var(--jaune);
}
.coordonnees__recap-titre {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.coordonnees__recap-ligne,
.coordonnees__recap-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.coordonnees__recap-ligne {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  color: rgba(84, 12, 33, 0.82);
}
.coordonnees__recap-total {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(84, 12, 33, 0.16);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--encre);
}
.pied__profil-form { margin: 0; }
.pied__lien-bouton {
  display: inline; padding: 0; margin: 0;
  border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; text-align: left;
  text-decoration: underline;
}
.pied__lien-bouton:hover { color: var(--jaune-clair); }
.panier-table { width: 100%; border-collapse: collapse; background: var(--blanc); }
.panier-table th, .panier-table td {
  padding: 1rem 0.75rem; border-bottom: 1px solid rgba(84, 12, 33, 0.12);
  text-align: left; vertical-align: middle;
}
.panier-table th {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(84, 12, 33, 0.7); background: var(--creme);
}
.panier-ligne__titre { margin: 0; font-weight: 600; }
.panier-ligne__meta { margin: 0.25rem 0 0; font-size: 0.9rem; color: rgba(84, 12, 33, 0.72); }
.panier-ligne__suppr {
  border: 0; background: transparent; color: var(--bordeaux);
  font-size: 1.2rem; cursor: pointer;
}
.panier-totaux {
  margin: 1.5rem 0 0 auto; max-width: 22rem; display: grid; gap: 0.65rem;
  background: var(--blanc); padding: 1.25rem 0 1.25rem 1.25rem;
}
.panier-totaux > div { display: flex; justify-content: space-between; gap: 1rem; }
.panier-totaux dt, .panier-totaux dd { margin: 0; }
.panier-totaux__total {
  font-size: 1.25rem; font-weight: 700; padding-top: 0.5rem;
  border-top: 1px solid var(--jaune);
}
.panier-paiement { margin: 1.75rem 0 0; max-width: 52rem; }
.cart-ppn-notice {
  width: 100%;
  max-width: none;
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--rose);
  border: 0;
  border-left: 3px solid var(--bordeaux);
  color: var(--bordeaux);
  font-weight: 400;
  text-align: left;
}
.mention-ppn {
  padding: 0.9rem 1rem; background: var(--rose);
  border-left: 3px solid var(--bordeaux);
}
.panier-actions, .coordonnees-actions, .confirmation-actions {
  margin-top: 2rem; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 1rem; align-items: center;
}
.coordonnees__retour { display: none; }
.lien-retour { color: var(--encre); text-decoration: none; font-weight: 500; }
.lien-retour:hover { color: var(--bordeaux); }

.formulaire {
  display: grid; gap: 1.15rem;
  background: transparent; padding: 0;
}
.formulaire--coordonnees { max-width: none; }
.formulaire__rangee {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.formulaire__champ {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.formulaire__label {
  margin: 0;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--encre);
}
.formulaire__controle,
.formulaire input.formulaire__controle,
.formulaire select.formulaire__controle,
.formulaire textarea.formulaire__controle {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(84, 12, 33, 0.22);
  border-radius: 0;
  background: var(--blanc);
  color: var(--encre);
  min-height: 2.85rem;
}
.formulaire__controle:focus,
.formulaire input.formulaire__controle:focus,
.formulaire select.formulaire__controle:focus {
  outline: 2px solid var(--jaune);
  outline-offset: 1px;
  border-color: var(--jaune);
}
.formulaire__champ--erreur .formulaire__controle {
  border-color: var(--bordeaux);
  background: color-mix(in oklab, var(--rose) 70%, var(--blanc));
}
.formulaire__erreur {
  margin: 0;
  padding: 0.35rem 0 0.1rem 0.65rem;
  border-left: 3px solid var(--bordeaux);
  color: var(--bordeaux);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.35;
}
.formulaire__erreur + .formulaire__erreur { margin-top: 0.25rem; }
.formulaire ul { list-style: none; margin: 0; padding: 0; }
.formulaire .erreur { color: var(--bordeaux); font-size: 0.88rem; font-weight: 400; }
.formulaire__submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.35rem;
  padding-block: 0.95rem;
}
.formulaire__honeypot {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
@media (max-width: 520px) {
  .formulaire__rangee { grid-template-columns: minmax(0, 1fr); }
}
/* Écran 05 wireframe — confirmation centrée */
.page-confirmation .confirmation {
  display: grid;
  place-items: center;
  min-height: min(70vh, 40rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.confirmation__bloc {
  width: min(36rem, 100%);
  display: grid;
  justify-items: center;
  gap: 1.15rem;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--creme);
  border-top: 4px solid var(--jaune);
}
.confirmation__icone {
  color: var(--bordeaux);
  width: 3.5rem;
  height: 3.5rem;
}
.confirmation__check {
  display: block;
  width: 100%;
  height: 100%;
}
.confirmation__titre {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--encre);
  line-height: 1.2;
}
.confirmation__lead {
  margin: 0;
  max-width: 32rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(84, 12, 33, 0.88);
}
.confirmation__reference {
  margin: 0.35rem 0 0;
  width: 100%;
  max-width: 28rem;
  padding: 1rem 1.25rem;
  background: var(--blanc);
  border: 1px solid rgba(84, 12, 33, 0.16);
  display: grid;
  gap: 0.25rem;
}
.confirmation__reference-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.confirmation__reference-valeur {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: var(--encre);
  letter-spacing: 0.02em;
}
.confirmation__email {
  margin: 0;
  max-width: 30rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(84, 12, 33, 0.78);
}
.confirmation__cta {
  margin-top: 0.55rem;
  justify-content: center;
  min-width: 14rem;
  text-decoration: none;
  background: transparent !important;
  color: var(--encre) !important;
  border: 2px solid var(--encre);
}
.confirmation__cta:hover,
.confirmation__cta:focus-visible {
  background: var(--encre) !important;
  color: var(--creme) !important;
}

@media (max-width: 640px) {
  .panier-table,
  .panier-table tbody { display: block; width: 100%; background: transparent; }
  .panier-table thead { display: none; }
  .panier-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "produit produit suppr"
      "prix qty total";
    align-items: center;
    column-gap: .55rem;
    row-gap: .4rem;
    width: 100%;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(84, 12, 33, .14);
  }
  .panier-table td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .panier-table td:nth-child(1) { grid-area: produit; }
  .panier-table td:nth-child(2) {
    grid-area: prix;
    justify-self: start;
    font-size: .84rem;
    color: rgba(84, 12, 33, .75);
    white-space: nowrap;
  }
  .panier-table td:nth-child(3) { grid-area: qty; justify-self: center; }
  .panier-table td:nth-child(4) {
    grid-area: total;
    justify-self: end;
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .panier-table td:nth-child(5) { grid-area: suppr; justify-self: end; align-self: start; }
  .panier-ligne__titre { font-size: .98rem; line-height: 1.25; }
  .panier-ligne__meta { margin-top: .12rem; font-size: .75rem; line-height: 1.35; }
  .panier-table td form { margin: 0; }
  .panier-ligne__qty .compteur { width: max-content; }
  .panier-ligne__qty .compteur button { width: 1.7rem; min-height: 1.8rem; }
  .panier-ligne__qty .compteur output { min-width: 1.5rem; font-size: .9rem; }
  .panier-ligne__suppr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    font-size: 1rem; line-height: 1;
  }
}

/* Compat catalogue : grille maquette */
.catalogue__grille { display: contents; }
.profil-menu a {
  display: flex; flex-direction: column; gap: .15rem;
  width: 100%; padding: .7rem .85rem; text-align: left;
  color: var(--encre); text-decoration: none; background: transparent; border: 0;
  font: inherit; cursor: pointer;
}
.profil-menu a:hover { background: var(--creme); }
.profil-menu a small { font-size: .78rem; font-weight: 300; color: rgba(84,12,33,.72); }
.saut {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.saut:focus {
  position: fixed; top: .5rem; left: .5rem; width: auto; height: auto;
  clip-path: none; padding: .75rem 1.25rem; background: var(--encre);
  color: var(--creme); z-index: 100;
}

/* ---------- pages légales ---------- */
.page-legal .legal {
  padding: clamp(2.4rem, 4.5vw, 3.8rem) 0 4.5rem;
  max-width: 46rem;
}
.legal__entete { margin-bottom: 2.2rem; }
.legal__surtitre {
  font-family: "Rubik", sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  color: var(--bordeaux);
}
.legal__titre {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--encre);
}
.legal__intro {
  margin: 0;
  color: rgba(84, 12, 33, .78);
  font-size: 1.02rem;
}
.legal__entete .message { margin: 1.1rem 0 1rem; }
.legal__section {
  margin: 0 0 1.75rem;
  padding: 0;
  background: none;
  border: 0;
}
.legal__section h2 {
  margin: 0 0 .65rem;
  font-family: "Rubik", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.legal__section p {
  margin: 0;
  white-space: pre-line;
  color: var(--encre);
  line-height: 1.65;
}
.legal__note {
  margin: 2rem 0 0;
  font-size: .9rem;
  color: rgba(84, 12, 33, .65);
}