/* L'ÉCRIN CANIN PROVENCE — PROPOSITION C
   Écrite directement à partir du brief de Wasséla.

   « Nous voulons que quelqu'un qui arrive sur le site ait davantage
     l'impression d'entrer dans une Maison provençale contemporaine
     que dans une animalerie en ligne. »

   Traduction en règles :
   - beaucoup de blanc, peu d'éléments, de très grandes photos
   - titres en display à fort contraste, textes fins et espacés
   - aucun arrondi, aucune ombre : des filets d'un cheveu
   - la Provence par la matière et la lumière, jamais par le folklore
   - pensé pour le téléphone d'abord : le trafic viendra d'Instagram */

:root {
  /* Palette exacte du brief */
  --sable:     #C8B38A;
  --ecru:      #E0D3BE;
  --taupe:     #8E867C;
  --olive:     #6B7355;   /* coloris Luberon */
  --lavande:   #A99BC1;   /* coloris Valensole, très désaturé */

  /* Le texte était un anthracite — #2B2724, presque noir. Il est
     maintenant un brun de noyer. Sur une page de sable et d'écru, un
     noir vient d'ailleurs : il tranche au lieu de tenir ensemble. Le
     brun appartient à la même lumière que le reste. Premier essai à
     #3D2C1E : encore trop près du noir, on ne voyait pas la couleur.
     Celui-ci se lit comme un brun, et tient toujours 8,7 contre 1 sur
     le fond — très au-dessus du seuil de 4,5. */
  --anthracite:#5A4230;

  /* Les fonds ont pris un cran. L'ivoire tirait au blanc pur et la
     crème s'en distinguait à peine ; sur un écran mal réglé les deux se
     confondaient, et le site n'avait plus de sol. */
  --ivoire:    #FAF6EE;
  --creme:     #F1EADD;
  /* Teinte des emplacements d'image en attente : elle doit se distinguer
     du fond, sinon une image qui charge ressemble à un trou dans la page. */
  --attente:   #DDD0BB;
  /* Le filet suit les fonds : laissé à sa valeur d'avant, il disparaissait
     sur l'écru devenu plus foncé que lui. */
  --filet:     #DFD3BF;

  --texte:      var(--anthracite);
  /* Le taupe #8E867C du brief ne contraste qu'à 3,5 sur fond ivoire, en
     dessous du seuil lisible de 4,5. On le garde comme couleur de marque
     (filets, pastilles) et on lit sur une teinte de la même famille,
     assez foncée pour être confortable : 5,4. */
  /* Le texte secondaire s'éclaircit d'autant : à #6D5B49 il se
     confondait avec le brun principal une fois celui-ci relevé, et la
     hiérarchie disparaissait. 5,1 contre 1, au-dessus du seuil. */
  --texte-doux: #7A6653;
  --fond:       var(--ivoire);

  --largeur:  1440px;
  --marge:    clamp(20px, 5vw, 80px);
  /* Respiration entre sections. Le réglage d'origine — jusqu'à 118 px
     de chaque côté, soit 236 px entre deux blocs — convenait à une
     vitrine d'une page. Sur un site qui a du contenu, il oblige à
     faire défiler pour rien. */
  --air:      clamp(40px, 4.5vw, 76px);

  /* IvyPresto Display est commerciale. Bodoni Moda en tenait lieu : même
     famille didone, mais des déliés si fins qu'ils devenaient pénibles à
     lire. Playfair Display garde le contraste et l'élégance avec des
     pleins nettement plus solides — c'est le bon compromis en attendant
     l'achat de la licence. */
  --display: "Playfair Display", "IvyPresto Display", Didot, Georgia, serif;
  --courant: "Jost", -apple-system, "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--courant); font-size: 17.5px; font-weight: 400;
  line-height: 1.72; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--display); font-weight: 500; line-height: 1.1; margin: 0;
  font-optical-sizing: auto; }
/* Un titre ne laisse pas un mot seul sur sa dernière ligne.
   « Notre histoire commence avec / eux. » : le point d'orgue de la
   phrase se retrouvait abandonné en bas, et le titre perdait sa tenue.
   Le navigateur équilibre maintenant les lignes lui-même — deux moitiés
   de longueur voisine plutôt qu'une longue et une orpheline. */
h1, h2, h3 { text-wrap: balance; }
/* Un didone perd ses déliés en dessous de 2 rem : les intertitres passent
   au sans, plus lisible, et l'écart avec les grands titres est assumé. */
h3 { font-family: var(--courant); font-weight: 500; line-height: 1.3; margin: 0; }
h1 { font-size: clamp(2.5rem, 6.6vw, 5.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.3rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: .01em; }
p { margin: 0 0 1.3em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
/* Colonnes de lecture : en caractères plutôt qu'en pixels, et elles
   grandissent avec l'écran sans jamais dépasser ce que l'œil suit. */
.etroit { max-width: min(100%, clamp(34rem, 52vw, 46rem)); }
.section { padding: var(--air) 0; }
.section + .section { padding-top: 0; }
.section-creme { background: var(--creme); }
.section-creme + .section, .section + .section-creme { padding-top: var(--air); }

/* Libellé de section : le seul ornement du site. */
.oeil {
  font-size: .74rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; color: var(--texte-doux); display: block; margin-bottom: 26px;
}
.oeil-trait { display: flex; align-items: center; gap: 16px; }
.oeil-trait::after { content: ""; height: 1px; flex: 1; background: var(--filet); max-width: 120px; }

.intro { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--texte-doux); max-width: 56ch; line-height: 1.65; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom: 1px solid transparent; padding: 10px 0;
}
.entete-inner { display: flex; align-items: center; gap: 24px; }
/* Sur le hero, l'en-tête est transparent et blanc ; ailleurs il se pose. */
.entete.pose { background: rgba(253,252,250,.94); backdrop-filter: blur(14px); border-bottom-color: var(--filet); }
.entete.clair .logo span, .entete.clair .nav a { color: #fff; }
.entete.clair .burger span { background: #fff; }
.entete.clair .logo img { filter: brightness(0) invert(1); }

.logo { display: inline-flex; align-items: center; gap: 13px; flex: 0 1 auto; min-width: 0; }
.logo img { height: 40px; width: auto; transition: filter .4s ease; }
.logo span {
  font-family: var(--display); font-size: 1.22rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: color .4s ease;
}
.nav { display: flex; gap: 36px; margin-left: auto; align-items: center; }

/* Le panier n'est plus dans le menu : il en est le frère. Sur grand
   écran il se colle au bout de la barre, comme avant — seule la place
   dans le document a changé. */
.entete-inner > .nav-panier { display: flex; align-items: center; margin-left: 36px; }
.nav a {
  font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .13em;
  white-space: nowrap; position: relative; transition: color .4s ease, opacity .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 7px;
  background: var(--sable); color: var(--anthracite); font-size: .62rem; letter-spacing: 0;
}

.burger { display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px;
  border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; z-index: 70; }
.burger span { display: block; height: 1px; width: 100%; background: var(--anthracite);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .2s, background .4s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.voile-menu { position: fixed; inset: 0; background: rgba(43,39,36,.42); opacity: 0;
  pointer-events: none; transition: opacity .35s; z-index: 55; }
.voile-menu.visible { opacity: 1; pointer-events: auto; }
.saut-contenu { position: absolute; left: -9999px; z-index: 100; background: var(--anthracite); color: #fff; padding: 12px 20px; }
.saut-contenu:focus { left: 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; font-family: var(--courant); font-size: .78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; padding: 0 0 9px;
  border: 0; background: none; cursor: pointer; position: relative; color: inherit;
}
.btn::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform-origin: right;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::after { transform: scaleX(0); transform-origin: left; }
.btn-cadre {
  padding: 17px 42px; border: 1px solid currentColor;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.btn-cadre::after { display: none; }
.btn-cadre:hover { background: var(--anthracite); color: var(--ivoire); border-color: var(--anthracite); }
.btn-cadre.sur-photo:hover { background: #fff; color: var(--anthracite); border-color: #fff; }
.btn:disabled, .btn[disabled] { opacity: .35; cursor: not-allowed; }

/* Les gestes décisifs — ajouter au panier, passer commande, payer —
   ne peuvent pas se présenter comme un lien de plus. Le filet suffit
   pour « en savoir plus » ; ici il faut une surface pleine, qu'on
   trouve du regard sans avoir à la chercher. Le reste du site garde
   sa discrétion : c'est ce qui fait que ces trois-là ressortent. */
.btn-plein {
  background: var(--anthracite); color: var(--ivoire);
  border-color: var(--anthracite); text-align: center;
}
.btn-plein:hover { background: var(--olive); border-color: var(--olive); color: var(--ivoire); }
.btn-plein:disabled, .btn-plein[disabled] {
  background: var(--taupe); border-color: var(--taupe); color: var(--ivoire); opacity: .55;
}

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  display: flex; align-items: flex-end; color: #fff; }
.hero-fond { position: absolute; inset: -6% 0; background-size: cover; background-position: center; }

/* Plusieurs photographies se succèdent sur le même hero. Elles sont
   empilées et c'est l'opacité qui les fait passer de l'une à l'autre :
   aucune ne bouge, aucune ne redessine la mise en page, et le fondu se
   fait sur le processeur graphique. Un glissement latéral aurait été
   plus voyant — et c'est précisément ce qu'on ne veut pas d'une
   photographie qu'on a choisie pour elle-même.

   La translation, elle, appartient à la parallaxe : le script l'écrit
   en style direct sur ces mêmes calques. On ne touche donc ici qu'à
   l'opacité, sans quoi les deux se contrediraient. */
.hero[data-fondu] .hero-fond { opacity: 0; transition: opacity 1600ms ease-in-out; }
.hero[data-fondu] .hero-fond.est-vu { opacity: 1; }

/* Les repères, discrets : de simples filets clairs posés sur la photo.
   Ils ne s'affichent que lorsqu'il y a plusieurs vues. */
.hero-vues {
  /* Alignés sur le texte, en bas à gauche, et non dans le coin opposé :
     c'est là que le dégradé assombrit la photo, et c'est là que le
     regard revient après le bouton. Le coin droit, lui, est déjà pris
     par la bulle de messagerie. */
  position: absolute; z-index: 3; left: var(--marge); bottom: 14px;
  display: flex; gap: 6px; align-items: center;
}
.hero-vue {
  /* La cible fait 30 × 40 pour le doigt ; le filet, lui, ne fait que
     deux pixels et se dessine au centre. La hauteur est posée sur la
     boîte, pas obtenue par des marges intérieures : avec
     box-sizing: border-box, « height: 2px; padding: 12px 0 » ne laissait
     aucune place au contenu et le filet mesurait zéro. */
  width: 30px; height: 40px; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  position: relative;
}
.hero-vue::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  margin-top: -1px; background: rgba(255,255,255,.5);
  /* Une photographie claire — un ciel de fin de journée, un champ sec —
     avalerait un filet blanc. L'ombre portée le détache de tout fond. */
  box-shadow: 0 0 5px rgba(0,0,0,.5);
  transition: background .5s ease; 
}
.hero-vue:hover::after { background: rgba(255,255,255,.75); }
.hero-vue.est-vue::after { background: #fff; }
.hero-vue:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }



/* Mouvement refusé : la première photographie reste, et les repères
   permettent encore de voir les autres — à la main. */
@media (prefers-reduced-motion: reduce) {
  .hero[data-fondu] .hero-fond { transition: none; }
}
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,26,23,.66) 0%, rgba(30,26,23,.14) 52%, rgba(30,26,23,.22) 100%); }
.hero-contenu { position: relative; z-index: 2; width: 100%; max-width: var(--largeur);
  margin: 0 auto; padding: 0 var(--marge) clamp(56px, 9vh, 118px); }
.hero h1 { color: #fff; max-width: 13ch; }
.hero .accroche { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: rgba(255,255,255,.94);
  max-width: 42ch; margin: 26px 0 34px; font-weight: 300; }
.hero .btn { color: #fff; }
.defiler { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .3em; color: rgba(255,255,255,.75); }
.defiler::after { content: ""; display: block; width: 1px; height: 34px; margin: 12px auto 0;
  background: rgba(255,255,255,.5); animation: filer 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes filer { 0%,100% { transform: scaleY(.3); opacity: .3 } 50% { transform: scaleY(1); opacity: 1 } }

/* ---------- Manifeste : grande phrase seule ---------- */
/* Une phrase longue en didone fatigue vite. On garde le serif pour la
   tenue, mais avec une taille mesurée et un interlignage confortable. */
.manifeste { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.38;
  max-width: 24ch; font-optical-sizing: auto; }
.manifeste em { font-style: italic; color: var(--texte-doux); }

/* ---------- Grille éditoriale ---------- */
.duo { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--marge); align-items: center; }
.duo-texte { grid-column: 1 / 6; }
.duo-media { grid-column: 7 / 13; }
.duo.inverse .duo-texte { grid-column: 8 / 13; }
.duo.inverse .duo-media { grid-column: 1 / 7; }
.duo-media img { width: 100%; }

/* ---------- Photo pleine page ---------- */
/* La bande pleine largeur garde un RAPPORT, elle ne prend plus une
   hauteur en vh. C'était la cause du recadrage qui changeait d'un écran
   à l'autre : la largeur venait de la fenêtre, la hauteur de sa hauteur,
   et le rapport entre les deux variait sans cesse — d'où des têtes
   coupées sur un écran large et bas, entières sur un autre.

   À rapport fixe, la découpe est la même partout, et la photographie
   peut être recadrée une fois pour toutes à ce rapport. Le plafond en
   vh n'intervient que sur un écran très bas, et le recadrage garde
   assez de marge pour l'absorber. */
.pleine {
  position: relative; overflow: hidden;
  aspect-ratio: 2 / 1;
  min-height: 280px;
  max-height: 86vh;
}
/* Pas de débordement ici, contrairement au hero : ce calque-là ne
   glisse pas. Les « -6 % » servaient à cacher les bords pendant la
   parallaxe ; ils retiraient douze pour cent de la hauteur de l'image,
   six en haut et six en bas — et sur une photographie où les visages
   touchent le bord haut et les pieds le bord bas, c'est exactement ce
   qu'il ne faut pas perdre. */
.pleine-fond { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pleine-legende { position: absolute; left: var(--marge); bottom: clamp(24px, 4vw, 48px); z-index: 2;
  color: #fff; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 2.5vw, 2.2rem); max-width: 18ch; line-height: 1.25; }
.pleine::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,26,23,.5), transparent 55%); }

/* ---------- Collections ---------- */
.collections { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 48px); }
.collection-carte { position: relative; display: block; overflow: hidden; }
.collection-carte img { width: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.collection-carte:hover img { transform: scale(1.045); }
.collection-legende { padding: 22px 0 0; display: flex; justify-content: space-between;
  align-items: baseline; gap: 16px; border-top: 1px solid var(--filet); margin-top: 20px; }
.collection-legende h3 { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
.pastille-coloris { width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  margin-right: 9px; vertical-align: 0; }

/* ---------- Bande de matières ----------
   C'était un défilement horizontal : une largeur fixe par vignette, et
   ce qui dépassait était coupé au bord du conteneur. Sur un écran
   étroit, cela donnait une photo tranchée en deux et une légende
   amputée en plein mot — sans que rien ne dise qu'on pouvait faire
   glisser.

   C'est devenu une grille qui se replie. Chaque vignette est entière,
   chaque légende se lit, et l'on voit d'un coup ce que la section
   promet : les détails qui ne se voient que de près. */
/* ---------- Un texte, une pièce, côte à côte ----------
   Le texte tient une colonne étroite : une ligne de trente mots ne se
   lit pas. L'image prend le reste, et l'ensemble s'aligne sur le haut
   plutôt que sur le milieu — centrer un paragraphe de quatre lignes
   face à une photo d'un mètre de haut le laisse flotter. */
.duo-edito {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--marge); align-items: center;
}
.duo-edito-texte { grid-column: 1 / 6; }
.duo-edito-media { grid-column: 7 / 13; margin: 0; }
/* L'image passe à gauche : c'est l'ordre visuel qui change, pas l'ordre
   du document — le texte reste lu en premier par une synthèse vocale. */
.duo-edito.inverse .duo-edito-texte { grid-column: 8 / 13; }
.duo-edito.inverse .duo-edito-media { grid-column: 1 / 7; }
/* La pièce se montre ENTIÈRE. Un cadre en 4/3 coupait le haut et le bas
   d'une photographie carrée : la laisse y perdait sa boucle et le
   harnais ses bords. Ici c'est la photographie qui donne sa hauteur au
   cadre, et non l'inverse — on ne recadre pas un plan produit, on le
   montre. */
.duo-edito-media img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
}

@media (max-width: 900px) {
  .duo-edito-texte, .duo-edito-media,
  .duo-edito.inverse .duo-edito-texte,
  .duo-edito.inverse .duo-edito-media { grid-column: 1 / 13; }
  /* Sur téléphone, l'image passe SOUS le texte dans les deux sens :
     une photo posée avant le titre laisse arriver sans savoir sur quoi. */
  .duo-edito-media { margin-top: 36px; order: 2; }
  .duo-edito-texte { order: 1; }
}

.matieres {
  display: grid;
  /* Le nombre de colonnes vient du gabarit, qui seul connaît le nombre
     de vignettes : « auto-fit » en posait trois pour quatre images, et
     la quatrième se retrouvait seule sur sa ligne. */
  grid-template-columns: repeat(var(--cols-large, 4), 1fr);
  gap: clamp(14px, 2vw, 30px);
}

@media (max-width: 1000px) {
  .matieres { grid-template-columns: repeat(var(--cols-moyen, 2), 1fr); }
}
/* Le cadre de l'image : c'est lui qui retient la dérive, pas la figure —
   sinon l'image agrandie recouvre la légende. */
.matiere-visuel { display: block; overflow: hidden; }
.matiere img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* Quatre gros plans de même taille, posés sur une même ligne, font une
   planche de contact : l'œil les balaie sans en regarder aucun. Une
   vignette sur deux descend donc, et les proportions alternent — on les
   regarde alors une par une, ce qui est tout l'objet d'une section qui
   s'appelle « ce qui ne se voit que de près ».
   La grille s'aligne en haut, faute de quoi le décalage serait avalé. */
.matieres { align-items: start; }
/* Une <figure> arrive avec 40 px de marge de chaque côté, que le
   navigateur pose lui-même. Personne ne les avait retirées : dans une
   colonne de 279 px, la photographie n'en occupait que 199. Quatre-
   vingts pixels perdus par vignette, sur une section qui existe pour
   montrer le détail de près. */
.matiere { margin: 0; }
.matiere:nth-child(even) { margin-top: clamp(28px, 4.5vw, 68px); }
.matiere:nth-child(odd)  img { aspect-ratio: 4/5; }
.matiere:nth-child(even) img { aspect-ratio: 3/4; }
.matiere figcaption { margin-top: 14px; font-size: .76rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux);
  /* Une légende sur deux lignes ne doit pas décaler la vignette
     suivante : c'est la grille qui aligne, pas la longueur du texte. */
  line-height: 1.5; }

/* Sous 560 px, deux colonnes de détail deviennent illisibles : on
   n'en garde qu'une, en pleine largeur. Une colonne divise toujours,
   quel que soit le nombre de vignettes. */
@media (max-width: 560px) {
  .matieres { grid-template-columns: 1fr; }
  .matiere:nth-child(even) { margin-top: 0; }
  .matiere:nth-child(odd) img, .matiere:nth-child(even) img { aspect-ratio: 4/5; }
}

/* ---------- Récit collant : l'image reste, le texte défile ---------- */
.recit { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--marge); }
.recit-media { grid-column: 1 / 6; position: sticky; top: 118px; align-self: start; }
.recit-media img { width: 100%; aspect-ratio: 3/4; object-fit: cover;  object-position: 50% var(--cadrage, 50%); }
.recit-texte { grid-column: 7 / 13; }

/* Le récit en texte suivi : la première phrase donne le ton, la
   signature se lit comme une signature. */
.recit-corps p { margin: 0; }
.recit-corps p + p { margin-top: 1.15em; }
.recit-corps p:first-child { font-size: 1.18rem; line-height: 1.5; color: var(--anthracite); }
.recit-corps p:nth-last-child(2) { font-style: italic; }
.recit-corps p:last-child { margin-top: 1.6em; letter-spacing: .02em; }

.recit-etape { padding: clamp(40px, 9vh, 110px) 0; border-bottom: 1px solid var(--filet); }
.recit-etape:last-child { border-bottom: 0; }
.recit-etape .numero { font-family: var(--courant); font-weight: 500; font-size: .8rem; color: var(--texte-doux);
  letter-spacing: .2em; display: block; margin-bottom: 14px; }

/* ---------- Chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--marge); }
.chiffre { border-top: 1px solid var(--filet); padding-top: 24px; }
/* Les deux éléments sont des <span> : sans display:block ils restaient
   sur la même ligne et le libellé chevauchait le chiffre. */
.chiffre .valeur { display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.05; }
.chiffre .libelle { display: block; font-size: .76rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; color: var(--texte-doux);
  margin-top: 14px; max-width: 22ch; }

/* ---------- Produits ---------- */
.produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); }
.produit-carte { display: block; }
.produit-carte .visuel { overflow: hidden; display: block; background: var(--attente); }
.produit-carte img { width: 100%; aspect-ratio: 1/1; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.produit-carte:hover img { transform: scale(1.05); }
.produit-carte .nom { font-family: var(--display); font-weight: 500;
  font-size: 1.3rem; margin: 18px 0 6px; }
.produit-carte .meta { font-size: .74rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .13em; color: var(--texte-doux); }
.produit-carte .prix { margin-top: 10px; font-size: .95rem; }

/* ---------- Maison d'Éguilles ---------- */
.maison { position: relative; color: #fff; padding: clamp(80px, 14vh, 170px) 0; overflow: hidden; }
.maison-fond { position: absolute; inset: -6% 0; background-size: cover; background-position: center; }
.maison::after { content: ""; position: absolute; inset: 0; background: rgba(30,26,23,.52); }
.maison .conteneur { position: relative; z-index: 2; }
.bientot { display: inline-block; border: 1px solid rgba(255,255,255,.5); padding: 7px 18px;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .26em; margin-bottom: 26px; }

/* ---------- Newsletter ---------- */
.lettre { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--marge); align-items: end; }
.lettre-texte { grid-column: 1 / 7; }
.lettre-form { grid-column: 8 / 13; }
.form-lettre { display: flex; border-bottom: 1px solid var(--anthracite); }
.form-lettre input { flex: 1; border: 0; background: none; padding: 14px 0;
  font-family: inherit; font-size: 1rem; color: var(--texte); font-weight: 300; }
.form-lettre input:focus { outline: none; }
.form-lettre .btn { padding-bottom: 14px; white-space: nowrap; }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 26px; }
.champ label { display: block; font-size: .74rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .13em; color: var(--texte-doux); margin-bottom: 10px; }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--filet);
  background: none; font-family: inherit; font-size: 1rem; font-weight: 300;
  color: var(--texte); border-radius: 0;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-bottom-color: var(--anthracite); }
.champ textarea { min-height: 130px; resize: vertical; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--marge); }
.aide { font-size: .82rem; color: var(--texte-doux); margin-top: 8px; }

.flash { padding: 16px 22px; border: 1px solid var(--filet); margin-bottom: 30px; font-size: .9rem; }
.flash-succes { border-color: var(--olive); color: var(--olive); }
.flash-erreur { border-color: #A8756F; color: #A8756F; }
.vide { padding: var(--air) 0; color: var(--texte-doux); }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--filet); padding: clamp(56px, 8vw, 100px) 0 40px; }
.pied-grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--marge); }
.pied-marque { grid-column: 1 / 5; }
.pied-marque img { height: 62px; width: auto; margin-bottom: 20px; }
.pied-marque .nom { font-family: var(--display); font-size: 1.7rem; margin-bottom: 12px; }
.pied-col { grid-column: span 2; }
.pied-lettre { grid-column: 9 / 13; }
.pied h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--texte-doux); margin: 0 0 18px; font-weight: 500; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 11px; }
.pied li a { font-size: .95rem; }
.pied li a:hover { color: var(--olive); }
.pied-bas { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--filet); margin-top: clamp(44px, 6vw, 76px); padding-top: 26px;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux); }

/* ============================================================
   TÉLÉPHONE D'ABORD
   Le brief est explicite : la majorité arrivera d'Instagram.
   ============================================================ */
@media (max-width: 1100px) {
  .duo-texte, .duo.inverse .duo-texte { grid-column: 1 / 13; }
  .duo-media, .duo.inverse .duo-media { grid-column: 1 / 13; }
  .duo-texte { margin-bottom: 36px; }
  .recit-media { grid-column: 1 / 13; position: static; margin-bottom: 40px; }
  .recit-texte { grid-column: 1 / 13; }
  .lettre-texte, .lettre-form { grid-column: 1 / 13; }
  .lettre-form { margin-top: 30px; }
  .pied-marque { grid-column: 1 / 13; margin-bottom: 44px; }
  .pied-col { grid-column: span 4; }
  .pied-lettre { grid-column: 1 / 13; margin-top: 36px; }

  .burger { display: flex; margin-left: 12px; order: 3; }

  /* Le panier sort du panneau et se place entre le logo et le burger.
     Il devient donc lui qui pousse tout à droite — le burger ne peut
     plus s'en charger, puisqu'il n'est plus le premier à droite. */
  .entete-inner > .nav-panier { order: 2; margin-left: auto; }

  /* Le panneau garde son ordre malgré tout : il est en position fixe,
     l'ordre ne le concerne pas, mais autant que ce soit explicite. */
  .nav { order: 4; }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); z-index: 60;
    background: var(--ivoire); border-left: 1px solid var(--filet);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 104px var(--marge) 40px; margin: 0;
    transform: translateX(101%); transition: transform .42s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.ouvert { transform: translateX(0); }
  /* Dans le panneau, les liens redeviennent lisibles même si l'en-tête est clair. */
  .entete.clair .nav a { color: var(--anthracite); }
  .nav a { padding: 18px 0; border-bottom: 1px solid var(--filet);
    font-size: .82rem; letter-spacing: .18em; }
  .nav a::after { display: none; }
  body.menu-ouvert { overflow: hidden; }
}

@media (max-width: 780px) {
  .produits { grid-template-columns: repeat(2, 1fr); }
  .chiffres { grid-template-columns: 1fr; gap: 28px; }
  .champs-2 { grid-template-columns: 1fr; }
  .hero { height: 92svh; }
  body:has(.bandeau-nouvelle) .hero { height: calc(92svh - var(--haut-fixe, 120px)); }
}

@media (max-width: 560px) {
  .collections { grid-template-columns: 1fr; }
  .produits { grid-template-columns: 1fr; }
  .pied-col { grid-column: span 6; }
  .manifeste { max-width: none; }
  .collection-legende { flex-direction: column; gap: 6px; }
}

/* Garde-fous */
html, body { max-width: 100%; overflow-x: clip; }
p, li, h1, h2, h3 { overflow-wrap: break-word; }


/* ============================================================
   BOUTIQUE
   Le repérage d'abord : où suis-je, qu'est-ce qui est filtré,
   comment je reviens en arrière.
   ============================================================ */
.entete-boutique { padding-top: calc(84px + var(--air)); padding-bottom: clamp(32px, 4vw, 52px); }

.fil { font-size: .78rem; color: var(--texte-doux); margin-bottom: 28px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fil a { border-bottom: 1px solid transparent; }
.fil a:hover { border-bottom-color: var(--texte-doux); }
.fil [aria-current] { color: var(--texte); }

.barre-filtres {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 52px);
  padding: 22px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.groupe-filtre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etiquette-filtre {
  font-size: .68rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; color: var(--texte-doux); margin-right: 4px;
}
.puce {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 1px solid var(--filet);
  font-size: .82rem; color: var(--texte); white-space: nowrap;
  transition: border-color .25s, background .25s, color .25s;
}
.puce:hover { border-color: var(--anthracite); }
.puce.actif { background: var(--anthracite); color: var(--ivoire); border-color: var(--anthracite); }
.puce .pastille-coloris { margin: 0; }

.titre-groupe {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 10px;
}
.produits-2 { grid-template-columns: repeat(2, 1fr); }
.produit-carte .resume {
  display: block; color: var(--texte-doux); font-size: .92rem;
  margin-top: 6px; line-height: 1.55;
}
.produit-carte .prix { display: block; margin-top: 12px; }

@media (max-width: 780px) { .produits-2 { grid-template-columns: 1fr; } }

/* ---------- Fiche produit ---------- */
.fiche { padding-top: calc(84px + clamp(28px, 4vw, 56px)); }
.titre-produit { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.12; margin-bottom: 14px; }
.ligne-achat { display: flex; gap: 14px; align-items: stretch; margin: 26px 0 34px; flex-wrap: wrap; }
.ligne-achat .btn-cadre { flex: 1; min-width: 200px; }
.bloc-detail h4 { font-size: .74rem; font-weight: 500; letter-spacing: .13em; }
@media (max-width: 1100px) { .fiche { padding-top: calc(84px + 28px); } }

/* ---------- Cartes produit : tous les éléments en bloc ----------
   Ce sont des <span> à l'intérieur d'un <a>. Sans display:block ils
   se suivent sur la même ligne : le libellé se collait au nom. */
.produit-carte .visuel,
.produit-carte .meta,
.produit-carte .nom,
.produit-carte .resume,
.produit-carte .prix { display: block; }
.produit-carte .meta { margin-bottom: 6px; }

/* Idem pour les cartes de collection. */
.collection-carte .collection-legende { display: flex; }

/* ============================================================
   FICHE PRODUIT, ENSEMBLE ET PANIER
   ============================================================ */

.produit-haut {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--marge); align-items: start;
}
.produit-galerie { grid-column: 1 / 8; }
.produit-infos   { grid-column: 8 / 13; position: sticky; top: 116px; }

.galerie-principale { aspect-ratio: 4/5; overflow: hidden; background: var(--attente); }
.galerie-principale img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.galerie-principale img.change { opacity: 0; }

.galerie-vignettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.galerie-vignettes button {
  padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: 1/1; overflow: hidden; opacity: .5; transition: opacity .3s;
}
.galerie-vignettes button.actif, .galerie-vignettes button:hover { opacity: 1; }
.galerie-vignettes img { width: 100%; height: 100%; object-fit: cover; }

.prix-produit { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 1.8rem); margin: 4px 0 24px; }

.axe { margin-bottom: 24px; }
.axe-nom { font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; color: var(--texte-doux); margin-bottom: 11px; }
.axe-valeurs { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------- Le montant d'une carte cadeau ----------
   Quatre montants tout prêts, et pour qui n'y trouve pas son compte, un
   champ. Le « € » est posé dans le cadre plutôt qu'après : on écrit
   dans la case, on lit le montant d'un bloc. */
.champ-montant { margin-bottom: 24px; }
.montant-saisie {
  display: inline-flex; align-items: center;
  border: 1px solid var(--filet); background: var(--ivoire);
  transition: border-color .22s;
}
.montant-saisie:focus-within { border-color: var(--anthracite); }
.montant-saisie input {
  width: 7ch; border: 0; background: none; padding: 12px 0 12px 16px;
  font-family: inherit; font-size: 1.05rem; color: var(--texte);
  -moz-appearance: textfield;
}
.montant-saisie input:focus { outline: none; }
.montant-saisie input::-webkit-outer-spin-button,
.montant-saisie input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.montant-unite {
  padding: 12px 16px 12px 6px; font-size: 1.05rem; color: var(--texte-doux);
}
.option-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border: 1px solid var(--filet); background: none;
  font-family: inherit; font-size: .86rem; color: var(--texte); cursor: pointer;
  transition: border-color .22s, background .22s, color .22s;
}
.option-btn:hover:not(:disabled) { border-color: var(--anthracite); }
.option-btn.actif { background: var(--anthracite); color: var(--ivoire); border-color: var(--anthracite); }
.option-btn:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
/* Le bloc d'alerte REMPLACE la ligne d'achat : « display: flex » l'emportait
   sur l'attribut hidden, et le bouton grisé restait sous l'alerte. */
.ligne-achat[hidden], .a-venir[hidden] { display: none !important; }
/* Ensemble : le coloris commun, au-dessus des pièces. */
.axe-ensemble { margin: 6px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--ligne, rgba(58,44,33,.15)); }
/* Épuisée ou annoncée : choisissable, pour laisser son adresse. */
.option-btn.option-bientot { border-style: dashed; color: var(--texte-doux, #8C7B67); }
.option-btn.option-bientot.actif { color: var(--ivoire); border-style: solid; }
.pastille-coloris { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

.dispo { font-size: .78rem; letter-spacing: .04em; margin: 16px 0; color: var(--texte-doux); }
.dispo-ok     { color: var(--olive); }
.dispo-faible { color: #9A6B2F; }
.dispo-ko     { color: #8C5252; }

.qte { display: inline-flex; align-items: center; border: 1px solid var(--filet); }
.qte button { width: 44px; height: 52px; border: 0; background: none; cursor: pointer;
  font-size: 1rem; color: var(--texte); }
.qte input { width: 44px; height: 52px; border: 0; text-align: center; background: none;
  color: var(--texte); font-family: inherit; font-size: .95rem; }
.qte input::-webkit-outer-spin-button, .qte input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bloc-detail { border-top: 1px solid var(--filet); padding: 20px 0; }
.bloc-detail h4 { margin: 0 0 8px; font-family: var(--courant); color: var(--texte-doux);
  text-transform: uppercase; }
.bloc-detail p { margin: 0; }

/* ---------- Ensemble coordonné ---------- */
.ensemble-item { border-top: 1px solid var(--filet); padding: 24px 0; }
.ensemble-item h3 { margin-bottom: 4px; }
.ensemble-total { border-top: 2px solid var(--anthracite); padding-top: 24px; margin-top: 20px; }
.ensemble-total .montant { font-family: var(--display); font-weight: 500; font-size: 2rem; }
.barre { text-decoration: line-through; color: var(--texte-doux); margin-right: 12px; }

/* ---------- Panier et commande ---------- */
.table-panier { width: 100%; border-collapse: collapse; }
.table-panier th {
  text-align: left; font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texte-doux);
  padding-bottom: 16px; border-bottom: 1px solid var(--anthracite);
}
.table-panier td { padding: 24px 0; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.panier-produit { display: flex; gap: 20px; align-items: center; }
.panier-produit img { width: 88px; height: 110px; object-fit: cover; background: var(--attente); }

.recap { border: 1px solid var(--filet); padding: 30px; position: sticky; top: 116px; }
.recap-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: .93rem; }
.recap-total {
  display: flex; justify-content: space-between; padding-top: 18px; margin-top: 12px;
  border-top: 1px solid var(--anthracite);
  font-family: var(--display); font-weight: 500; font-size: 1.5rem;
}
.etiquette { display: inline-block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texte-doux); border: 1px solid var(--filet); padding: 4px 12px; }
.etiquette-epuise { border-color: #C79C9C; color: #8C5252; }

@media (max-width: 1100px) {
  .produit-galerie { grid-column: 1 / 13; }
  .produit-infos { grid-column: 1 / 13; position: static; margin-top: 40px; }
  .recap { position: static; margin-top: 32px; }
}
@media (max-width: 700px) {
  .galerie-vignettes { grid-template-columns: repeat(4, 1fr); }
  .table-panier thead { display: none; }
  .table-panier tr { display: block; border-bottom: 1px solid var(--filet); padding: 20px 0; }
  .table-panier td { display: block; border: 0; padding: 6px 0; }
}

/* ============================================================
   CARTES GÉNÉRIQUES
   Les pages collection, journal et ensemble reprennent un balisage
   commun aux trois propositions. On l'habille ici dans le langage
   de la version C : pas d'ombre, pas d'arrondi, un filet et de l'air.
   ============================================================ */
.carte { display: flex; flex-direction: column; background: none; }
.carte-image { display: block; overflow: hidden; background: var(--attente); }
.carte-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.carte:hover .carte-image img { transform: scale(1.04); }
.carte-corps { padding: 18px 0 0; display: flex; flex-direction: column; flex: 1; }
.carte-meta { font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; color: var(--texte-doux); margin-bottom: 8px; }
.carte-corps h3 { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 8px; }
.carte-corps h3 a { color: var(--texte); }
.carte-resume { color: var(--texte-doux); font-size: .93rem; line-height: 1.6; flex: 1; margin: 0; }
.carte-prix { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: .95rem; }

.grille { display: grid; gap: clamp(22px, 3vw, 44px); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

.section-titre { margin-bottom: clamp(30px, 4vw, 52px); }
.section-titre h2 { margin-bottom: 14px; }
.section-titre p { color: var(--texte-doux); max-width: 56ch; margin: 0; }
.lecture { max-width: min(100%, clamp(34rem, 54vw, 48rem)); }
.chapo { color: var(--texte-doux); max-width: 56ch; }
.article-contenu { font-size: 1.05rem; }
.article-contenu img { margin: 30px 0; }
.article-contenu h2 { margin-top: 1.5em; margin-bottom: .4em; }
.surtitre { font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .18em; color: var(--texte-doux); display: block; margin-bottom: 16px; }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.galerie-item { margin: 0; overflow: hidden; }
.galerie-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--attente); }
.galerie-item figcaption { font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texte-doux); margin-top: 10px; }
.credit-photo { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texte-doux); margin-top: 14px; }
.texte-image { display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--marge); align-items: center; }
.texte-image .ti-texte { grid-column: 1 / 6; }
.texte-image .ti-media { grid-column: 7 / 13; }
.texte-image.inverse .ti-texte { grid-column: 8 / 13; }
.texte-image.inverse .ti-media { grid-column: 1 / 7; }

@media (max-width: 900px) {
  .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .texte-image .ti-texte, .texte-image.inverse .ti-texte,
  .texte-image .ti-media, .texte-image.inverse .ti-media { grid-column: 1 / 13; }
  .texte-image .ti-texte { margin-bottom: 30px; }
}
@media (max-width: 560px) {
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
}

/* ---------- Manifeste ----------
   Seule sur la page, la phrase laissait la moitié droite vide et la
   section flottait. Elle a désormais un vis-à-vis, légèrement décalé
   vers le bas pour éviter l'effet de deux blocs posés côte à côte. */
.manifeste-bloc {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--marge); align-items: center;
}
.manifeste-texte { grid-column: 1 / 7; }
.manifeste-media { grid-column: 8 / 13; margin: 0; }
.manifeste-media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--attente); }

/* Une photographie plus haute que son cadre se coupe au centre, et l'on
   y perd les deux bouts. « bas » retient le sol — les pieds, les pattes,
   les pavés —, « haut » retient les visages. */
.manifeste-media.cadrage-bas  img { object-position: center bottom; }
.manifeste-media.cadrage-haut img { object-position: center top; }
.manifeste-bloc.seul .manifeste-texte { grid-column: 1 / 9; }

@media (max-width: 900px) {
  .manifeste-texte, .manifeste-media,
  .manifeste-bloc.seul .manifeste-texte { grid-column: 1 / 13; }
  .manifeste-media { margin-top: 40px; }
  .manifeste-media img { aspect-ratio: 4/3; }
  /* Sauf celle qu'on a calée en bas : passée en 4/3 puis tirée vers le
     sol, il n'en resterait que les pieds. Elle garde son portrait. */
  .manifeste-media.cadrage-bas img { aspect-ratio: 3/4; }
}

/* ============================================================
   TRIO DE CARTES — emprunté à la proposition A
   La composition centrée et les cartes posées rassurent ; on garde
   cette générosité, mais en typographie et palette de la version C,
   avec un arrondi discret et une ombre à peine perceptible.
   ============================================================ */
.titre-centre { text-align: center; margin-bottom: clamp(38px, 5vw, 66px); }
.titre-centre .oeil { display: inline-block; }
.titre-centre h2 { margin: 0 auto; max-width: 20ch; }
.chapo-centre {
  color: var(--texte-doux); max-width: 62ch; margin: 22px auto 0;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
}

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 40px); }
.trio-carte {
  display: flex; flex-direction: column; background: var(--ivoire);
  border: 1px solid var(--filet); border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 14px rgba(43,39,36,.045);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
a.trio-carte:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(43,39,36,.10); }
.trio-visuel { display: block; overflow: hidden; background: var(--attente); }
/* Une photographie plus haute que son cadre se coupe au milieu, et l'on
   y perd les deux bouts — une tête, des pattes. Chaque carte dit donc
   où couper ; sans consigne, on reste au milieu. */
.trio-visuel img { object-position: 50% var(--cadrage, 50%); }
.trio-visuel img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
a.trio-carte:hover .trio-visuel img { transform: scale(1.04); }
.trio-corps { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 28px; }
.trio-titre {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.25; margin-bottom: 10px;
}
.trio-texte { display: block; color: var(--texte-doux); font-size: .94rem; line-height: 1.62; flex: 1; }
.trio-lien {
  display: block; margin-top: 16px; font-size: .74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; color: var(--texte);
}

@media (max-width: 900px) { .trio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trio { grid-template-columns: 1fr; } }




/* ============================================================
   AFFICHAGE DES PHOTOS
   Les photos produits sont prises en studio sur fond blanc. Deux
   fausses pistes écartées : les poser à nu sur la page les faisait
   flotter sans limite ; les poser sur un panneau teinté faisait
   apparaître un carré blanc — celui du studio — au milieu de la
   teinte.
   La bonne réponse est de les traiter pour ce qu'elles sont : des
   tuiles blanches. Le fichier étant carré, il remplit exactement son
   cadre, sans recadrage ni marge parasite, et un filet d'un cheveu
   dessine la limite.
   ============================================================ */
.produit-carte img,
.collection-carte img,
.carte-image img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--filet);
  padding: 0;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
/* Le cadre garde ses limites pendant l'agrandissement au survol. */
.produit-carte .visuel, .carte-image { display: block; overflow: hidden; }
.produit-carte:hover img,
.collection-carte:hover img,
.carte:hover .carte-image img { transform: scale(1.03); }

.galerie-principale { aspect-ratio: 1/1; background: #FFFFFF; border: 1px solid var(--filet); }
.galerie-principale img { object-fit: cover; width: 100%; height: 100%; padding: 0; border: 0; }
.galerie-vignettes img { background: #FFFFFF; object-fit: cover; padding: 0;
  border: 1px solid var(--filet); }

/* Macros de matière et photos de vie : elles remplissent leur cadre,
   il n'y a pas d'objet à détacher d'un fond. */
.matiere img { background: none; border: 0; object-fit: cover; aspect-ratio: 1/1; }
.trio-visuel img { background: none; border: 0; object-fit: cover; aspect-ratio: 4/3; }
.galerie-item img, .manifeste-media img, .recit-media img,
.duo-media img, .ti-media img, .image-pleine {
  background: none; border: 0; padding: 0; object-fit: cover;
}

/* ---------- Bandeau d'actualité ----------
   Une seule ligne, sous l'en-tête. Il n'existe que s'il y a une
   nouvelle de moins de deux mois : pas d'actualité, pas de bandeau,
   donc jamais d'espace vide à meubler. */
.bandeau-nouvelle {
  display: block; background: var(--creme); border-bottom: 1px solid var(--filet);
  padding: 11px 0; font-size: .84rem; color: var(--texte);
  position: relative; z-index: 40; margin-top: var(--haut-entete, 84px);
  transition: background .3s ease;
}
.bandeau-nouvelle:hover { background: var(--ecru); }
.bandeau-nouvelle .conteneur {
  display: flex; align-items: baseline; gap: 16px;
}
.bandeau-date {
  font-size: .68rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texte-doux); white-space: nowrap; flex: 0 0 auto;
}
.bandeau-titre {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.bandeau-lien {
  flex: 0 0 auto; font-size: .68rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texte-doux); border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
/* Le hero passe sous l'en-tête — sauf quand un bandeau d'actualité
   s'intercale. L'en-tête se pose alors, le bandeau le suit, et le hero
   ne commence qu'en dessous des deux. Lui laisser 100svh le poussait
   d'autant sous le bord de l'écran, et c'est le bouton, posé tout en
   bas, qui disparaissait — à toutes les tailles de fenêtre, puisque
   le débordement valait exactement la hauteur des deux barres.

   Il ne prend donc que ce qui reste. Les deux hauteurs sont mesurées
   par le script : écrites en dur, elles se démentent dès que la police
   d'affichage arrive, que la fenêtre rétrécit ou que le bandeau passe
   sur deux lignes. Les valeurs de repli servent le temps d'un souffle,
   et si le script ne vient jamais. */
body:has(.bandeau-nouvelle) .hero {
  margin-top: 0;
  height: calc(100svh - var(--haut-fixe, 132px));
  min-height: 420px;
}
@media (max-width: 640px) {
  .bandeau-lien { display: none; }
  .bandeau-titre { white-space: normal; }
}

/* ---------------------------------------------------------------
   Rappel d'aperçu
   Visible seulement avant l'ouverture, et seulement pour qui
   franchit le rideau. Posé en bas, il ne déplace aucune mise en
   page : on peut l'ajouter ou l'enlever sans rien recalculer.
   --------------------------------------------------------------- */
.rappel-apercu {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(43, 38, 33, .93);
  color: #F6F1E9;
  font-family: var(--courant);
  font-size: .8rem;
  line-height: 1.35;
  box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .25);
}

.rappel-apercu a {
  flex: none;
  color: #F6F1E9;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 241, 233, .5);
  padding-bottom: 1px;
}

.rappel-apercu a:hover { border-bottom-color: #F6F1E9; }

@media (max-width: 520px) {
  .rappel-apercu {
    flex-direction: column;
    gap: .35rem;
    text-align: center;
    border-radius: 1rem;
  }
}

@media print { .rappel-apercu { display: none; } }

/* ---------------------------------------------------------------
   Texte long — pages légales
   Une seule colonne étroite : au-delà de 70 signes par ligne, l'œil
   se perd en revenant à la ligne suivante.
   --------------------------------------------------------------- */
.texte-long { max-width: min(100%, 72ch); }

.texte-long h3 {
  margin: clamp(28px, 4vw, 44px) 0 .6rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 500;
}
.texte-long h3:first-child { margin-top: 0; }

.texte-long p {
  margin: 0 0 1rem;
  color: var(--texte-doux);
  line-height: 1.75;
}

.texte-maj {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 1rem;
  border-top: 1px solid var(--trait, rgba(0,0,0,.08));
  font-size: .85rem;
}

/* Bandeau de tête réduit — pages qui se lisent plutôt qu'elles ne se
   contemplent : mentions légales, conditions de vente. */
.hero.hero-compact {
  height: auto;
  min-height: clamp(220px, 34vh, 340px);
  padding: clamp(60px, 9vw, 110px) 0 clamp(36px, 5vw, 60px);
}
.hero.hero-compact h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }

/* Bandeau à proportions fixes : la photographie entière, le titre
   dessous. Aucune hauteur d'écran n'intervient — c'est elle qui rognait
   la photo différemment d'un écran à l'autre. La double sélection bat
   les hauteurs imposées quand un bandeau d'actualité est affiché. */
.hero.hero-rapport,
body:has(.bandeau-nouvelle) .hero.hero-rapport {
  height: auto; min-height: 0; display: block; overflow: visible;
  color: var(--texte); background: var(--ivoire);
}
.hero.hero-rapport::after { display: none; }
.hero.hero-rapport .hero-fond {
  position: relative; inset: auto; width: 100%;
  aspect-ratio: var(--rapport, 2.2);
  background-size: cover; background-position: center; transform: none !important;
}
.hero.hero-rapport .hero-contenu { padding: clamp(30px, 4vw, 56px) var(--marge) clamp(6px, 1.5vw, 18px); }
.hero.hero-rapport h1 { color: var(--anthracite); max-width: none; }
.hero.hero-rapport .accroche { color: var(--texte-doux); margin-bottom: 0; }
.hero.hero-rapport .btn { color: var(--texte); }
@media (max-width: 760px) {
  .hero.hero-rapport .hero-fond { aspect-ratio: var(--rapport-mob, var(--rapport, 2.2)); }
}

/* ---------------------------------------------------------------
   Réseaux et contact direct
   --------------------------------------------------------------- */
.pied-reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 1.4rem 0 0;
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.pied-reseaux a {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texte-doux, #7A6653);
  transition: color .25s ease;
}
.pied-reseaux a:hover { color: #fff; }



/* Ce que l'ensemble fait gagner : lisible sans être criard. */
.recap-remise { color: #3F6B45; }

/* ---------------------------------------------------------------
   Appel vers l'ensemble coordonné
   Posé sous le bouton d'achat, là où l'hésitation est encore vive.
   Discret : c'est une proposition, pas une réclame.
   --------------------------------------------------------------- */
.appel-ensemble {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--filet, rgba(0,0,0,.1));
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, background .25s ease;
}
.appel-ensemble:hover {
  border-color: var(--accent, #B5643C);
  background: rgba(0, 0, 0, .015);
}

.appel-ensemble img {
  flex: none;
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
}

.appel-texte { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.appel-texte strong { font-size: .95rem; font-weight: 500; }
.appel-detail { font-size: .82rem; color: var(--texte-doux); }
.appel-gain { color: #3F6B45; }
.appel-fleche { flex: none; color: var(--texte-doux); }

@media (max-width: 420px) {
  .appel-ensemble { gap: 11px; padding: 10px 11px; }
  .appel-ensemble img { width: 46px; height: 46px; }
}

/* ---------------------------------------------------------------
   Vidéos
   Le rapport 16/9 est réservé avant le chargement : la page ne
   sursaute pas quand le lecteur arrive.
   --------------------------------------------------------------- */
.video-cadre {
  position: relative;
  margin: clamp(24px, 4vw, 40px) 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #10100E;
}
.video-cadre iframe,
.video-cadre video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------------------------------------------------------------
   Formulaires du compte cliente
   Une colonne étroite et centrée : rien d'autre à regarder que ce
   qu'on est en train de remplir.
   --------------------------------------------------------------- */
/* Une largeur fixe de 30 rem donnait une colonne de 480 px perdue au
   milieu d'un écran de 2000. Elle suit maintenant la fenêtre, sans
   jamais s'étaler : au-delà de 40 rem, une ligne de formulaire devient
   difficile à parcourir de gauche à droite. */
.conteneur-formulaire { max-width: clamp(20rem, 44vw, 40rem); }

/* Le titre et son introduction se touchaient. */
.conteneur-formulaire h1 { margin-bottom: .55em; }

/* À deux colonnes dès qu'il y a la place : prénom et nom côte à côte
   n'ont pas besoin de deux lignes. */
@media (min-width: 900px) {
  .formulaire { gap: 22px; }
  .champ-front input { padding: 12px 2px; }
}

.intro-formulaire {
  color: var(--texte-doux);
  line-height: 1.75;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.formulaire { display: flex; flex-direction: column; gap: 18px; }
.formulaire .paire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.champ-front { display: flex; flex-direction: column; gap: 6px; }
.champ-front label {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.champ-front .facultatif { text-transform: none; letter-spacing: 0; }

.champ-front input {
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--filet, rgba(0,0,0,.14));
  background: transparent;
  font: inherit;
  color: var(--texte);
  border-radius: 0;
}
.champ-front input:focus {
  outline: none;
  border-bottom-color: var(--accent, #B5643C);
}

.aide-front { font-size: .78rem; color: var(--texte-doux); margin: 0; }

.case-front {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--texte-doux);
}
.case-front input { width: auto; }

.lien-secondaire {
  font-size: .88rem;
  color: var(--texte-doux);
  line-height: 1.9;
  margin: 4px 0 0;
}

/* ── Tableau de bord de la cliente ── */
.compte-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.lien-discret { font-size: .84rem; color: var(--texte-doux); }

.compte-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(28px, 4vw, 52px);
}

.bloc-compte h2 {
  font-size: 1.15rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--filet, rgba(0,0,0,.1));
}

.tableau-compte { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau-compte th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-weight: 400;
  padding-bottom: 8px;
}
.tableau-compte td { padding: 10px 0; border-bottom: 1px solid var(--filet, rgba(0,0,0,.07)); }
.tableau-compte .num { text-align: right; font-variant-numeric: tabular-nums; }

.adresse-compte,
.coordonnees-compte {
  font-style: normal;
  line-height: 1.8;
  color: var(--texte-doux);
  margin: 0 0 16px;
}

.vide-compte { color: var(--texte-doux); line-height: 1.8; }

/* ---------------------------------------------------------------
   Choix du mode de livraison
   --------------------------------------------------------------- */
.modes-livraison { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

.mode-livraison {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--filet, rgba(0,0,0,.12));
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.mode-livraison:hover { border-color: var(--texte-doux); }
.mode-livraison:has(input:checked) {
  border-color: var(--texte, #5A4230);
  background: rgba(0, 0, 0, .015);
}

.mode-livraison input { flex: none; width: auto; accent-color: var(--texte, #5A4230); }

.mode-corps { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-nom { font-size: .96rem; }
.mode-detail,
.mode-delai { font-size: .82rem; color: var(--texte-doux); }

.mode-prix { flex: none; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   Coloris qui défilent sur les cartes
   Les photos sont empilées ; une seule est opaque à la fois. Le
   fondu se fait en CSS, la minuterie en JS.
   --------------------------------------------------------------- */
.visuel-coloris { position: relative; display: block; }

.visuel-coloris img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .9s ease;
}

/* Toutes empilées sauf la première, qui donne sa hauteur au bloc. */
.visuel-coloris img + img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* Seule la photo marquée « actif » est visible. Le serveur pose cette
   marque sur la première : sans JavaScript, on voit donc une photo
   fixe plutôt qu'un cadre vide — et rien ne dépend d'une classe posée
   par le navigateur, qu'un filet de sécurité peut retirer. */
.visuel-coloris img { opacity: 0; }
.visuel-coloris img.actif { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .visuel-coloris img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Passe de resserrement
   Les titres étaient calibrés pour des pages de vitrine, où un mot
   occupe l'écran. Appliqués à une boutique ou à un formulaire, ils
   coupent les mots et repoussent le contenu hors de vue.
   ═══════════════════════════════════════════════════════════════ */

/* ── Pages de formulaire ────────────────────────────────────────
   Une colonne de 30 rem ne peut pas porter un titre de 5,6 rem :
   « Se connecter » se coupait en trois. */
.conteneur-formulaire h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  max-width: none;
  hyphens: none;
  /* Un titre de deux mots ne doit jamais se briser au milieu. */
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}
.conteneur-formulaire { padding-top: clamp(20px, 4vw, 48px); }

/* ── Boutique : voir la collection d'un coup d'œil ──────────────
   Sur un grand écran on tenait trois pièces par rangée, immenses,
   sans jamais voir l'ensemble. En mobile, une seule par rangée :
   il fallait faire défiler pour savoir ce qui existe. */
.entete-boutique ~ .section .produits {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(16px, 2vw, 30px);
}
/* Les ensembles montrent trois pièces à la fois : ils gardent
   de la place, sans quoi on ne distingue plus rien. */
.entete-boutique ~ .section .produits-2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

@media (max-width: 640px) {
  /* Deux par rangée : on embrasse la gamme sans faire défiler.
     La règle de bureau est plus spécifique — il faut la reprendre
     nommément, sinon elle l'emporte jusque sur un téléphone. */
  .produits,
  .entete-boutique ~ .section .produits,
  .entete-boutique ~ .section .produits-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .produit-carte .nom { font-size: 1rem; line-height: 1.25; }
  .produit-carte .meta { font-size: .68rem; }
  .produit-carte .resume { display: none; }
}

/* Le titre d'une page de boutique n'a pas à occuper un écran. */
.entete-boutique h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.entete-boutique { padding-bottom: clamp(20px, 3vw, 36px); }

/* ── Bandeaux de tête sans photo ────────────────────────────────
   Une image décorative étirée sur un écran entier ne donne qu'un
   grand aplat gris. Quand le bandeau ne porte pas une vraie
   photographie, il se réduit à sa hauteur utile. */
.hero.hero-decor {
  height: auto;
  min-height: clamp(200px, 30vh, 300px);
  padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 52px);
}
.hero.hero-decor .hero-fond {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .28;
}
.hero.hero-decor::after { background: none; }
.hero.hero-decor h1,
.hero.hero-decor .accroche { color: var(--texte); }
.hero.hero-decor .accroche { color: var(--texte-doux); }
.hero.hero-decor h1 { font-size: clamp(2rem, 5vw, 3.6rem); }

/* ── Manifeste sans image ───────────────────────────────────────
   Le texte tenait sur la moitié gauche et laissait une colonne
   blanche de la hauteur de l'écran. Sans image à faire vivre, il
   n'y a plus de raison de garder cette place : le texte respire
   sur toute la largeur utile, un peu plus grand. */
.manifeste-bloc.seul { align-items: start; }
.manifeste-bloc.seul .manifeste-texte { grid-column: 1 / 11; }
.manifeste-bloc.seul .manifeste { max-width: 26ch; }

@media (min-width: 1100px) {
  .manifeste-bloc.seul .manifeste { font-size: clamp(1.7rem, 3.2vw, 2.8rem); }
}

/* Deux sections de texte qui se suivent cumulaient leurs marges :
   on retire celle du haut de la seconde. */
/* Deux sections qui se suivent ne cumulent pas leurs marges : c'est la
   règle d'origine, que j'avais annulée par mégarde. */



/* La première section d'une page réservait la hauteur d'un bandeau
   qui n'existe pas ici : sur un téléphone, on démarrait par un tiers
   d'écran vide avant même le fil d'Ariane. */
main > .section:first-child { padding-top: clamp(28px, 5vw, 72px); }

@media (max-width: 640px) {
  main > .section:first-child { padding-top: 20px; }
  .entete-boutique { padding-bottom: 16px; }
  .barre-filtres { gap: 10px; }
}

/* ---------------------------------------------------------------
   Duo : l'image et le texte sur la même rangée
   Quand le texte est écrit avant l'image mais placé à sa droite
   (colonnes 8/13 puis 1/7), la grille ne revient pas en arrière :
   elle ouvre une nouvelle rangée et l'image tombe 500 px plus bas.
   On fixe donc les deux sur la première rangée.
   --------------------------------------------------------------- */
.duo > * { grid-row: 1; }

/* 1100 px, et non 900 : c'est à cette largeur que les colonnes repassent
   en pleine largeur, plus haut dans cette feuille. Les deux seuils
   doivent coïncider — quand ils divergeaient, le texte et l'image
   s'empilaient tous deux sur la première rangée entre 900 et 1100 px, et
   se recouvraient. */
@media (max-width: 1100px) {
  /* Empilés, chacun reprend sa rangée. */
  .duo > * { grid-row: auto; }
}

/* ---------------------------------------------------------------
   Le monogramme, plus présent
   Il faisait 40 px, perdu à côté du nom. Il porte la marque autant
   que le nom lui-même : on lui donne sa place.
   --------------------------------------------------------------- */
/* L'emblème donne sa hauteur à l'en-tête : trop grand, la bande
   blanche mange l'écran avant même la première image. */
.logo img { height: clamp(40px, 3.2vw, 48px); }
.logo { gap: clamp(10px, 1vw, 14px); }
.logo span { font-size: clamp(1.08rem, 1.35vw, 1.3rem); }

/* Bande fine, et tout aligné sur la même ligne médiane : logo, menu,
   icônes. Sans hauteur imposée, chaque élément se calait sur sa propre
   taille et le menu paraissait remonté. */
.entete-inner {
  min-height: clamp(60px, 5.4vw, 76px);
  padding-block: 8px;
  align-items: center;
}
.nav { align-items: center; }

@media (max-width: 640px) {
  .logo img { height: 38px; }
  .logo span { font-size: 1rem; }
  .entete-inner { min-height: 56px; }
}

/* ---------------------------------------------------------------
   Code promotionnel au panier
   --------------------------------------------------------------- */
.form-code { margin-bottom: 18px; }
.form-code label {
  display: block;
  margin-bottom: 7px;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.form-code-ligne { display: flex; gap: 8px; }
.form-code-ligne input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--filet);
  background: transparent;
  font: inherit;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.form-code-ligne button {
  flex: none;
  padding: 9px 15px;
  border: 1px solid var(--texte);
  background: transparent;
  font: inherit;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.form-code-ligne button:hover { background: var(--texte); color: var(--ivoire); }

.code-pose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px dashed var(--filet);
  border-radius: 6px;
  font-size: .9rem;
}
.lien-nu {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  color: var(--texte-doux);
  cursor: pointer;
  text-decoration: underline;
}
.lien-nu:hover { color: var(--texte); }

/* ---------------------------------------------------------------
   Cartes produit : le prix toujours à la même hauteur
   Une description d'une ligne et une autre de deux faisaient sauter
   le prix d'une carte à l'autre. La carte devient une colonne, et le
   prix se pousse en bas : quelle que soit la longueur du texte, la
   ligne des prix reste droite.
   --------------------------------------------------------------- */
.produit-carte {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.produit-carte .visuel,
.produit-carte .visuel-coloris { flex: none; }

/* Ce qui pousse le prix vers le bas. */
.produit-carte .prix { margin-top: auto; padding-top: .55rem; }

/* Le résumé occupe la place disponible, sans l'imposer. */
.produit-carte .resume { flex: 0 1 auto; }

/* Toutes les cartes d'une rangée ont la même hauteur. */
.produits { align-items: stretch; }

/* Prix barré et économie. Discret : c'est une information, pas un cri. */
.prix-barre {
  margin-left: .4em;
  color: var(--texte-doux);
  font-size: .86em;
  text-decoration-thickness: 1px;
}
.prix-gain {
  margin-left: .3em;
  font-size: .8em;
  color: #3F6B45;
  letter-spacing: .02em;
}
.prix-attente { color: var(--texte-doux); font-style: italic; }

/* ---------------------------------------------------------------
   Le monogramme en médaillon
   Le fichier porte son propre fond olive : carré, il faisait un
   bloc posé à côté du nom. En rond, il devient une pièce, ce qui
   convient mieux à une Maison.
   --------------------------------------------------------------- */
/* L'en-tête porte le monogramme ECP, plus haut que large. L'ancienne
   règle le forçait en médaillon carré, rogné en cercle — pensée pour
   l'emblème rond au chien, elle coupait le haut et le bas des lettres.
   Il garde donc ses proportions : seule sa hauteur est fixée plus haut. */
.entete .logo img {
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.pied .logo img,
.pied-logo img { border-radius: 0; }

/* L'icône du compte, un peu plus grande : un chien au trait demande
   plus de place qu'une silhouette pour rester lisible. */
.nav-compte-icone { width: 34px; height: 34px; }
.nav-compte-icone svg { width: 25px; height: 25px; }

/* Le menu de motifs, dans le même trait que les autres champs. */
.duo-media select {
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--filet);
  background: transparent;
  font: inherit;
  color: var(--texte);
  border-radius: 0;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 11px) center, calc(100% - 6px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
.duo-media select:focus { outline: none; border-bottom-color: var(--accent, #6B7355); }

/* ═══════════════════════════════════════════════════════════════
   Compte : une icône de chien, et un repli qui connecte
   ═══════════════════════════════════════════════════════════════ */
.nav-compte { position: relative; display: inline-flex; }

.nav-compte-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: inherit;
}
.nav-compte-icone::after { content: none; }   /* pas de soulignement animé */

/* Le dessin passe par un masque plutôt que par une image : il prend
   ainsi la couleur du texte, claire sur un hero sombre, foncée sur
   l'en-tête posé. Une image ne saurait pas faire les deux. */
.icone-chien {
  display: block;
  width: 27px;
  height: 27px;
  background: currentColor;
  -webkit-mask: url("../../uploads/marque/icone-chien.png") center / contain no-repeat;
          mask: url("../../uploads/marque/icone-chien.png") center / contain no-repeat;
}

.nav-compte-repli {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 16.5rem;
  padding: 18px 18px 0;
  background: var(--ivoire);
  border: 1px solid var(--filet);
  border-radius: 10px;
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .11);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
  text-align: left;
}

/* Un pont invisible entre l'icône et le repli : sans lui, celui-ci se
   referme dès qu'on quitte l'icône pour aller le chercher. */
.nav-compte::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 16.5rem;
  height: 16px;
}

.nav-compte:hover .nav-compte-repli,
.nav-compte:focus-within .nav-compte-repli {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.repli-connexion { display: flex; flex-direction: column; gap: 13px; }
.repli-connexion label { display: flex; flex-direction: column; gap: 5px; }
.repli-connexion label span {
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.repli-connexion input {
  width: 100%;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--filet);
  background: transparent;
  font: inherit;
  font-size: .92rem;
  color: var(--texte);
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
}
.repli-connexion input:focus { outline: none; border-bottom-color: var(--texte); }

.repli-connexion button {
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--texte);
  background: var(--texte);
  color: var(--ivoire);
  font: inherit;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.repli-connexion button:hover { background: transparent; color: var(--texte); }

.repli-oubli {
  font-size: .78rem;
  color: var(--texte-doux);
  text-transform: none;
  letter-spacing: 0;
}
.repli-oubli::after { content: none; }

.repli-pied-compte {
  margin: 16px -18px 0;
  padding: 13px 18px;
  border-top: 1px solid var(--filet);
  background: var(--creme);
  border-radius: 0 0 9px 9px;
  font-size: .82rem;
  color: var(--texte-doux);
}
.repli-pied-compte a {
  color: var(--texte);
  text-transform: none;
  letter-spacing: 0;
  font-size: .82rem;
  text-decoration: underline;
}
.repli-pied-compte a::after { content: none; }

.repli-liens { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; }
.repli-liens a { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1080px) {
  /* Dans le tiroir mobile, pas de repli : on renvoie vers les pages. */
  .nav-compte { display: block; width: 100%; }
  .nav-compte-icone { display: none; }
  .nav-compte::after { content: none; }
  .nav-compte-repli {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
  }
  .repli-connexion { display: none; }
  .repli-pied-compte {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
}

/* ---------------------------------------------------------------
   Bouton de conversation
   Posé en bas à droite, hors du flux : rien à recalculer selon qu'un
   numéro soit renseigné ou non.

   Aux couleurs de la Maison, et non au vert de WhatsApp : ce vert-là
   jure avec la lavande et l'olivier. Une bulle plutôt qu'un logo, un
   mot plutôt qu'une icône seule — on comprend qu'on peut écrire.
   --------------------------------------------------------------- */
.bouton-message {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px 11px 14px;
  border-radius: 999px;
  background: var(--anthracite);
  color: var(--ivoire);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .04em;
  box-shadow: 0 .55rem 1.5rem rgba(43, 39, 36, .24);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.bouton-message svg { width: 21px; height: 21px; flex: none; }
.bouton-message span { white-space: nowrap; }

.bouton-message:hover,
.bouton-message:focus-visible {
  background: var(--olive);
  transform: translateY(-2px);
  box-shadow: 0 .8rem 1.9rem rgba(43, 39, 36, .3);
}

/* Le rappel d'aperçu occupe le bas de l'écran pendant la préparation. */
body:has(.rappel-apercu) .bouton-message { bottom: clamp(76px, 11vw, 94px); }

@media (max-width: 560px) {
  /* Sur un téléphone, le mot prend trop de place : la bulle suffit. */
  .bouton-message { padding: 12px; }
  .bouton-message span { display: none; }
}

@media print { .bouton-message { display: none; } }

/* ---------------------------------------------------------------
   Panier : un cabas marqué d'une empreinte
   --------------------------------------------------------------- */
.panier-lien {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}
.panier-lien svg { width: 23px; height: 23px; display: block; }
.panier-lien::after { content: none; }   /* pas de soulignement animé */

/* Le compte d'articles, posé sur le coin du cabas. */
.panier-lien .pastille {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--sable);
  color: var(--anthracite);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* Ici, le mot « Panier » revenait en dur sous 1080 px, et le pictogramme
   disparaissait. La règle avait un sens quand le panier vivait DANS le
   tiroir, au milieu d'une liste de liens écrits : une icône seule ne s'y
   serait pas comprise. Il en est sorti — il est maintenant le frère du
   menu, dans la barre — et la règle, elle, est restée : sur téléphone on
   lisait « Panier » là où l'on voulait un dessin.

   Le pictogramme est donc le même à toutes les largeurs. Seule la cible
   grandit pour le doigt ; le mot ne subsiste que dans l'étiquette lue
   par les lecteurs d'écran, où il est nécessaire et invisible. */
@media (max-width: 1080px) {
  .panier-lien { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------
   Aperçu du panier au survol
   Savoir ce qu'on a mis dedans sans quitter la page qu'on regarde.
   --------------------------------------------------------------- */
.nav-panier { position: relative; display: inline-flex; }

.nav-panier-repli {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 20rem;
  padding: 16px 16px 0;
  background: var(--ivoire);
  border: 1px solid var(--filet);
  border-radius: 10px;
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .11);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
  text-align: left;
}

/* Le pont invisible, sans quoi le repli se referme dès qu'on quitte
   l'icône pour aller le chercher. */
.nav-panier::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 20rem;
  height: 16px;
}

.nav-panier:hover .nav-panier-repli,
.nav-panier:focus-within .nav-panier-repli {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.panier-vide {
  margin: 0 0 14px;
  font-size: .88rem;
  color: var(--texte-doux);
  text-transform: none;
  letter-spacing: 0;
}

.panier-repli-lignes { display: flex; flex-direction: column; gap: 12px; }

.panier-repli-ligne { display: flex; align-items: center; gap: 11px; }

.panier-repli-visuel {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--attente);
}
.panier-repli-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.panier-repli-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panier-repli-nom {
  font-size: .86rem;
  color: var(--texte);
  text-transform: none;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panier-repli-detail {
  font-size: .74rem;
  color: var(--texte-doux);
  text-transform: none;
  letter-spacing: 0;
}
.panier-repli-prix {
  flex: none;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

.panier-repli-reste {
  margin: 2px 0 0;
  font-size: .76rem;
  color: var(--texte-doux);
  text-transform: none;
  letter-spacing: 0;
}

.panier-repli-total {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--filet);
  font-size: .86rem;
  text-transform: none;
  letter-spacing: 0;
}

.panier-repli-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px -16px 0;
  padding: 13px 16px;
  border-top: 1px solid var(--filet);
  background: var(--creme);
  border-radius: 0 0 9px 9px;
}

.panier-repli-btn {
  flex: 1;
  padding: 9px;
  text-align: center;
  background: var(--texte);
  color: var(--ivoire);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
  border: 1px solid var(--texte);
}
.panier-repli-btn:hover { background: transparent; color: var(--texte); }
.panier-repli-btn::after { content: none; }

.panier-repli-lien {
  font-size: .78rem;
  color: var(--texte-doux);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  white-space: nowrap;
}
.panier-repli-lien::after { content: none; }

@media (max-width: 1100px) {
  /* Le panier n'est plus dans le tiroir : il reste une icône compacte
     dans la barre. La règle d'avant l'étirait sur toute la largeur —
     c'était juste tant qu'il était une ligne de menu, absurde depuis
     qu'il est posé à côté du burger.

     Pas de repli au survol non plus : sur un écran tactile il n'y a pas
     de survol, et une touche doit mener au panier, pas ouvrir un
     aperçu qu'on ne saurait pas refermer. Le seuil suit celui du menu,
     1100 px, au lieu de 1080 : vingt pixels d'écart laissaient une
     bande où le menu était replié mais l'aperçu encore actif. */
  .nav-panier { display: inline-flex; width: auto; }
  .nav-panier-repli, .nav-panier::after { display: none; }

  /* Une cible de 44 px, comme le burger. En dessous, on rate le panier
     une fois sur trois au pouce — et c'est le bouton qu'on touche le
     plus souvent après l'ajout au panier. */
  .nav-panier > a {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
}

/* Coordonnées du pied de page : discrètes, mais cliquables au doigt. */
.pied-contact { margin-top: 18px; }
.pied-contact a { color: var(--texte-doux); }
.pied-contact a:hover { color: var(--fond); }
.pied-adresse { display: inline-block; margin-top: 8px; font-size: .88rem; }

/* ---------- Le détail des pièces d'un ensemble ----------
   Une liste, pas une grille : les descriptions font cent à deux cents
   mots, trois colonnes les rendraient illisibles. L'image à gauche, le
   texte à droite, et la question du nombre de colonnes ne se pose pas. */
.pieces-detail {
  margin-top: clamp(36px, 5vw, 64px);
  display: flex; flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}

.piece {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}
.piece + .piece { padding-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--filet); }

.piece-visuel { display: block; overflow: hidden; }
.piece-visuel img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  background: var(--attente);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.piece-visuel:hover img { transform: scale(1.03); }

.piece-texte h3 { margin: 6px 0 16px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.piece-texte h3 a { color: inherit; text-decoration: none; }
.piece-texte h3 a:hover { color: var(--olive); }
.piece-texte p { margin: 0 0 14px; line-height: 1.75; color: var(--texte-doux); }

/* La fiche technique : deux colonnes sur un écran large, le libellé en
   petites capitales pour qu'on puisse la parcourir sans la lire. */
.piece-fiche {
  margin: 22px 0 20px; padding-top: 18px;
  border-top: 1px solid var(--filet);
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px 22px; font-size: .9rem;
}
.piece-fiche dt {
  font-size: .7rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-doux);
  padding-top: 3px; white-space: nowrap;
}
.piece-fiche dd { margin: 0; color: var(--texte-doux); line-height: 1.65; }

@media (max-width: 900px) {
  .piece { grid-template-columns: 1fr; gap: 20px; }
  .piece-visuel img { aspect-ratio: 16/10; }
  .piece-fiche { grid-template-columns: 1fr; gap: 4px 0; }
  .piece-fiche dt { margin-top: 12px; }
}

/* ---------- Bientôt disponible ----------
   Ce bloc remplace la ligne d'achat, il ne s'y ajoute pas : on ne doit
   jamais voir « Ajouter au panier » à côté d'une pièce qu'on ne peut
   pas acheter. */
.a-venir {
  margin-top: 26px; padding: 22px 24px;
  background: var(--creme); border: 1px solid var(--filet);
}

.a-venir-titre {
  margin: 0 0 8px; font-family: var(--display);
  font-size: 1.15rem; color: var(--texte);
}
.a-venir-mot {
  margin: 0 0 16px; font-size: .92rem; line-height: 1.7; color: var(--texte-doux);
}

.a-venir-champs { display: flex; gap: 10px; flex-wrap: wrap; }
.a-venir-champs input {
  flex: 1 1 200px; min-width: 0;
  padding: 13px 16px; border: 1px solid var(--filet); background: var(--fond);
  font: inherit; font-size: .94rem; color: var(--texte);
}
.a-venir-champs input:focus { outline: 2px solid var(--olive); outline-offset: -2px; }
.a-venir-champs input:disabled { opacity: .55; }
.a-venir-champs .btn { flex: 0 0 auto; }

.a-venir-lettre { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px;
  padding: 10px 12px; border: 1px solid rgba(58,44,33,.18); background: rgba(255,255,255,.55);
  font-size: .88rem; line-height: 1.45; color: var(--anthracite, #3A2C21); cursor: pointer; }
.a-venir-lettre strong { font-weight: 600; }
.a-venir-lettre input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px;
  accent-color: var(--anthracite, #3A2C21); }
.a-venir-retour { margin: 12px 0 0; font-size: .9rem; min-height: 1.2em; }
.a-venir-retour.ok { color: #3F6B45; }
.a-venir-retour.ko { color: #9B4A4A; }

/* Le nombre de personnes en attente : une preuve sociale, donc discrète.
   Trop mise en avant, elle sonne comme un argument de vente. */
.a-venir-compte {
  margin: 10px 0 0; font-size: .82rem; color: var(--texte-doux);
}

@media (max-width: 480px) {
  .a-venir-champs { flex-direction: column; }
  .a-venir-champs .btn { width: 100%; }
}

/* Un libellé lu par les lecteurs d'écran, invisible à l'œil : le champ
   a une invite, mais une invite n'est pas un libellé. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Le guide des tailles ----------
   « Est-ce que ça ira à mon chien ? » est l'objection qui décide de
   l'achat. Elle mérite d'être traitée comme un outil, pas comme un
   paragraphe : un formulaire visible, une réponse immédiate. */

.guide {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--creme); border: 1px solid var(--filet);
}

.guide-champs { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.guide-champs label { display: flex; flex-direction: column; gap: 8px; }
.guide-champs label > span:first-child {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-doux);
}
.guide-unite {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--texte-doux); font-size: .9rem;
}
.guide-unite input {
  width: 6.5rem; padding: 13px 14px;
  border: 1px solid var(--filet); background: var(--fond);
  font: inherit; font-size: 1.05rem; color: var(--texte);
}
.guide-unite input:focus { outline: 2px solid var(--olive); outline-offset: -2px; }

.guide-resultat:empty { display: none; }
.guide-resultat { margin-top: 28px; }
.guide-attente { color: var(--texte-doux); }

.guide-titre-resultat {
  margin: 0 0 18px; font-size: .9rem; color: var(--texte-doux);
}

.guide-coupes { display: grid; gap: 12px; }

.guide-coupe {
  display: grid; grid-template-columns: 84px 1fr; gap: 18px;
  align-items: center; padding: 14px;
  background: var(--fond); border: 1px solid var(--filet);
  text-decoration: none; color: inherit;
  transition: border-color .25s ease;
}
.guide-coupe:hover { border-color: var(--olive); }
.guide-coupe.recommandee { border-color: var(--olive); border-width: 2px; }
.guide-coupe img { width: 84px; height: 84px; object-fit: cover; display: block; }

.guide-coupe-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-coupe-texte strong { font-size: 1.05rem; }

.guide-etiquette {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px;
  background: var(--olive); color: var(--ivoire);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}

.guide-plage { font-size: .84rem; color: var(--texte-doux); }
.guide-serrage { font-size: .82rem; }
.guide-large  { color: var(--texte-doux); }
.guide-ajuste { color: #3F6B45; }
.guide-juste  { color: #9B6A3C; }
.guide-prix { font-size: .95rem; margin-top: 2px; }

.guide-bientot {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; background: var(--ecru); color: var(--texte-doux);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
}

/* Ne rien proposer est une réponse : elle doit se lire comme telle, pas
   comme une erreur. */
.guide-rien { line-height: 1.8; color: var(--texte-doux); }
.guide-rien strong { color: var(--texte); }

.guide-mesurer { margin-top: clamp(48px, 6vw, 80px); }
.guide-mesurer-grille {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 40px); margin-top: 26px;
}
.guide-mesurer h3 { margin: 0 0 8px; font-size: 1.05rem; }
.guide-mesurer p { margin: 0; color: var(--texte-doux); line-height: 1.75; }

.guide-tableau { margin-top: clamp(48px, 6vw, 80px); }
.tableau-defilant { overflow-x: auto; margin-top: 24px; }

.table-tailles { width: 100%; border-collapse: collapse; min-width: 540px; }
.table-tailles th {
  text-align: left; padding: 0 14px 12px; border-bottom: 1px solid var(--filet);
  font-size: .7rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-doux);
}
.table-tailles td { padding: 14px; border-bottom: 1px solid var(--filet); }
.table-tailles .num { text-align: right; }
.table-tailles a { color: inherit; }

.guide-note { margin-top: 14px; font-size: .84rem; color: var(--texte-doux); }

@media (max-width: 700px) {
  .guide-mesurer-grille { grid-template-columns: 1fr; }
  .guide-champs { flex-direction: column; align-items: stretch; }
  .guide-champs .btn { width: 100%; }
  .guide-unite input { width: 100%; }
}

/* Le guide replié sur la fiche produit : discret tant qu'on n'en a pas
   besoin, complet dès qu'on le déplie. */
.lien-guide {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 0; padding: 0;
  background: none; border: 0; border-bottom: 1px solid var(--filet);
  font: inherit; font-size: .88rem; color: var(--texte-doux); cursor: pointer;
}
.lien-guide::before { content: '↧'; font-size: .9em; }
.lien-guide.ouvert::before { content: '↥'; }
.lien-guide:hover { color: var(--olive); border-bottom-color: var(--olive); }

.guide-fiche {
  margin-top: 16px; padding: 20px;
  background: var(--creme); border: 1px solid var(--filet);
}
.guide-fiche-mot {
  margin: 0 0 14px; font-size: .86rem; line-height: 1.6; color: var(--texte-doux);
}
.guide-fiche-champs { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.guide-fiche-champs label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: .82rem; color: var(--texte-doux);
}
.guide-fiche-champs label span { min-width: 4.5rem; }
.guide-fiche-champs input {
  width: 5rem; padding: 10px 12px;
  border: 1px solid var(--filet); background: var(--fond);
  font: inherit; color: var(--texte);
}
.guide-fiche-resultat:not(:empty) { margin-top: 18px; }
.guide-fiche-resultat .guide-coupe { grid-template-columns: 64px 1fr; }
.guide-fiche-resultat .guide-coupe img { width: 64px; height: 64px; }

@media (max-width: 560px) {
  .guide-fiche-champs { flex-direction: column; align-items: stretch; }
  .guide-fiche-champs input { width: 100%; }
  .guide-fiche-champs .btn { width: 100%; }
}

/* ---------- Le franco de port ----------
   Une phrase informe, une barre invite. La différence se mesure sur le
   panier moyen. */
.franco { margin: 16px 0 4px; }

.franco-rail {
  height: 4px; background: var(--ecru); overflow: hidden;
}
.franco-rail span {
  display: block; height: 100%; background: var(--olive);
  /* La barre s'anime quand le panier change : on voit le progrès, ce
     qui est tout l'intérêt. */
  transition: width .5s cubic-bezier(.2,.6,.2,1);
}

.franco-mot {
  margin: 9px 0 0; font-size: .84rem; color: var(--texte-doux); line-height: 1.5;
}
.franco-mot strong { color: var(--texte); }

/* Le franco atteint se dit : une cliente qui ne sait pas qu'elle a gagné
   la livraison n'en retire aucun plaisir. */
.franco-atteint .franco-rail span { background: #5B7A4F; }
.franco-atteint .franco-mot { color: #3F6B45; }
.franco-atteint .franco-mot::before { content: '✓ '; }

.franco-compacte { margin: 12px 0 0; }
.franco-compacte .franco-mot { font-size: .78rem; margin-top: 7px; }

/* ---------- Les avis ----------
   On montre la répartition entière, pas seulement la moyenne : un 4,6
   dont on voit les deux avis à trois étoiles est plus crédible qu'un 5,0
   sans détail. La loi impose d'ailleurs d'afficher les mauvais. */

.avis-entete {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 70px); align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--filet);
}

.avis-moyenne { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.avis-note { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.avis-etoiles { color: var(--olive); letter-spacing: .12em; }
.avis-etoiles.petit { font-size: .9rem; }
.avis-nombre { font-size: .82rem; color: var(--texte-doux); }

.avis-barres { display: flex; flex-direction: column; gap: 7px; max-width: 340px; }
.avis-barre { display: grid; grid-template-columns: 2.6rem 1fr 1.6rem; gap: 12px; align-items: center; }
.avis-barre-nom { font-size: .78rem; color: var(--texte-doux); white-space: nowrap; }
.avis-barre-rail { height: 4px; background: var(--ecru); }
.avis-barre-rail span { display: block; height: 100%; background: var(--olive); }
.avis-barre-n { font-size: .78rem; color: var(--texte-doux); text-align: right; }

.avis-liste { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); margin-top: clamp(28px, 4vw, 44px); }

.avis { display: grid; grid-template-columns: 140px 1fr; gap: clamp(18px, 2.5vw, 32px); align-items: start; }
.avis:not(:has(.avis-photo)) { grid-template-columns: 1fr; }
.avis + .avis { padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--filet); }

.avis-photo img { width: 140px; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--attente); }

.avis-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.avis-qui { font-size: .92rem; }
.avis-chien { color: var(--texte-doux); }

/* « Achat vérifié » n'est pas une formule : sans commande, pas d'avis. */
.avis-verifie {
  padding: 1px 9px; border-radius: 999px; background: var(--ecru);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #5C6B4F;
}

.avis-corps h3 { margin: 0 0 8px; font-size: 1.08rem; }
.avis-corps p { margin: 0; line-height: 1.8; color: var(--texte-doux); }

.avis-reponse {
  margin-top: 16px; padding: 14px 18px;
  background: var(--fond); border-left: 2px solid var(--olive);
}
.avis-reponse strong {
  display: block; margin-bottom: 5px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux);
}

.avis-date { display: block; margin-top: 12px; font-size: .78rem; color: var(--texte-doux); }

@media (max-width: 700px) {
  .avis-entete { grid-template-columns: 1fr; gap: 24px; }
  .avis-barres { max-width: none; }
  .avis { grid-template-columns: 1fr; }
  .avis-photo img { width: 100%; aspect-ratio: 16/10; }
}

/* ---------- Déposer un avis ---------- */
.avis-form {
  margin-top: clamp(28px, 4vw, 44px); padding: clamp(22px, 3vw, 34px);
  background: var(--creme); border: 1px solid var(--filet);
}
.avis-form + .avis-form { margin-top: 24px; }

.avis-form-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.avis-form-tete img { width: 64px; height: 64px; object-fit: cover; }
.avis-form-tete h2 { margin: 0; font-size: 1.2rem; }

.champ-avis { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.champ-avis-nom {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-doux);
}
.champ-avis input[type=text], .champ-avis input:not([type]), .champ-avis textarea,
.champ-avis input[type=file] {
  padding: 12px 14px; border: 1px solid var(--filet); background: var(--fond);
  font: inherit; color: var(--texte); width: 100%;
}
.champ-avis textarea { resize: vertical; line-height: 1.7; }

/* Les étoiles : rendues dans l'ordre décroissant pour que « ~ » puisse
   colorer celles de gauche — le sélecteur ne remonte pas le document. */
.notes { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.notes input { position: absolute; opacity: 0; width: 0; }
.notes label {
  font-size: 1.9rem; line-height: 1; color: var(--ecru);
  cursor: pointer; transition: color .15s ease;
}
.notes input:checked ~ label,
.notes label:hover, .notes label:hover ~ label { color: var(--olive); }
.notes input:focus-visible + label { outline: 2px solid var(--olive); outline-offset: 3px; }

.avis-form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.avis-form-note { margin: 4px 0 0; font-size: .8rem; line-height: 1.6; color: var(--texte-doux); }

@media (max-width: 600px) { .avis-form-duo { grid-template-columns: 1fr; } }

/* ---------- Le mur des chiens ----------
   Des photos de clientes, prises au téléphone, au dehors. Elles n'ont ni
   le cadrage ni la lumière du studio — c'est précisément ce qui les rend
   convaincantes. On les laisse telles quelles, en carrés réguliers. */
.mur {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
.mur-carte { margin: 0; }
.mur-carte img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  background: var(--attente);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.mur-carte a { display: block; overflow: hidden; }
.mur-carte a:hover img { transform: scale(1.04); }

.mur-carte figcaption {
  margin-top: 9px; font-size: .8rem; line-height: 1.45;
  display: flex; flex-direction: column;
}
.mur-carte figcaption span { color: var(--texte-doux); }

.mur-note {
  margin-top: clamp(30px, 4vw, 48px); max-width: 58ch;
  font-size: .86rem; line-height: 1.7; color: var(--texte-doux);
}

@media (max-width: 1000px) { .mur { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .mur { grid-template-columns: repeat(2, 1fr); } }

/* La carte cadeau dans le panier : un moyen de paiement, donc présenté
   après le total et non parmi les remises. */
.recap-carte { color: #3F6B45; }
.recap-du { border-top: 1px solid var(--filet); padding-top: 10px; margin-top: 6px; }
.recap-carte-pose { margin-top: 14px; }
.recap-carte-pose summary {
  cursor: pointer; font-size: .86rem; color: var(--texte-doux);
}
.recap-carte-pose summary:hover { color: var(--olive); }
.carte-form { display: flex; gap: 8px; margin-top: 12px; }
.carte-form input {
  flex: 1; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--filet); background: var(--fond);
  font: inherit; text-transform: uppercase; color: var(--texte);
}

/* ---------- Garder son panier ----------
   Sous le récapitulatif et visiblement à part : c'est un service qu'on
   propose, pas une étape de plus avant de payer. */
.panier-garder {
  margin-top: 22px; padding: 16px 18px;
  background: var(--fond); border: 1px solid var(--filet);
}
.panier-garder-titre {
  margin: 0; font-family: var(--titre, Georgia, serif); font-size: 1.02rem;
  color: var(--texte);
}
.panier-garder-texte {
  margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--texte-doux);
}
.panier-garder-ligne { display: flex; gap: 8px; margin-top: 12px; }
.panier-garder-ligne input {
  flex: 1; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--filet); background: #fff;
  font: inherit; color: var(--texte);
}
.panier-garder-mention {
  margin: 10px 0 0; font-size: .76rem; line-height: 1.45; color: var(--texte-doux);
}
.panier-garder-ok {
  margin-top: 22px; padding: 14px 16px; font-size: .86rem; line-height: 1.5;
  background: var(--fond); border: 1px solid var(--filet); color: var(--texte-doux);
}

/* ---------- Ce qu'on sait déjà, à la commande ----------
   Une fiche au lieu d'un formulaire : le nom, l'adresse, et un lien
   pour corriger. Huit champs déjà remplis prennent un écran entier
   pour ne rien dire de plus. */
.fiche-connue {
  padding: 16px 18px; margin-bottom: 8px;
  background: var(--fond); border: 1px solid var(--filet);
}
.fiche-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.fiche-tete h3 { margin: 0; }
.fiche-modifier {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .82rem; letter-spacing: .04em;
  color: var(--texte-doux); text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.fiche-modifier:hover { color: var(--texte); }
.fiche-corps {
  margin: 10px 0 0; font-size: .95rem; line-height: 1.6; color: var(--texte);
}
.fiche-doux { color: var(--texte-doux); font-size: .88rem; }

/* La réponse au code, sous son champ : c'est là qu'on regarde
   après avoir appuyé sur « Appliquer ». */
.code-reponse {
  margin: 8px 0 0; font-size: .82rem; line-height: 1.45; color: #3F6B45;
}
.code-refus { color: #9B4A4A; }

/* ---------- Le bandeau de bienvenue ----------
   La même ligne qu'avant, au même endroit, mais le code s'y échange
   au lieu de s'y lire. Le champ reste petit : c'est un bandeau, pas
   un formulaire. */
.bandeau-bienvenue .conteneur {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: center;
}
.bandeau-form { display: flex; gap: 8px; align-items: center; }
.bandeau-form input {
  width: 15rem; max-width: 46vw; padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 0;
  background: rgba(255,255,255,.08); color: inherit;
  font: inherit; font-size: .82rem;
}
.bandeau-form input::placeholder { color: rgba(255,255,255,.6); }
.bandeau-form button {
  padding: 8px 16px; border: 1px solid currentColor; background: none;
  color: inherit; font: inherit; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.bandeau-form button { white-space: nowrap; }
.bandeau-form button:hover { background: #fff; color: var(--anthracite); }
.bandeau-form button:disabled { opacity: .55; cursor: default; }
.bandeau-reponse {
  flex: 1 1 100%; margin: 0; text-align: center; font-size: .8rem;
}
.bandeau-refus { opacity: .85; }
@media (max-width: 720px) {
  .bandeau-bienvenue .bandeau-titre { flex: 1 1 100%; text-align: center; }
  .bandeau-form { flex: 1 1 100%; justify-content: center; }
}

/* Sur un téléphone, « Recevoir mon code » passait sur deux lignes et le
   bandeau doublait de hauteur. Le champ prend ce qui reste, le bouton
   garde sa ligne — c'est lui qui doit rester lisible. */
@media (max-width: 480px) {
  .bandeau-form { gap: 6px; width: 100%; }
  .bandeau-form input { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
  .bandeau-form button { padding: 8px 11px; font-size: .68rem; letter-spacing: .05em; }
}

/* ---------- Le bandeau de consentement ----------
   Posé en bas, discret, et surtout : « Refuser » a exactement la même
   allure et la même place qu'« Accepter ». Un refus qu'on doit chercher
   n'est pas un refus libre. */
.bandeau-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  align-items: center; justify-content: center;
  padding: 16px clamp(16px, 4vw, 34px);
  background: var(--ivoire); border-top: 1px solid var(--filet);
  box-shadow: 0 -6px 24px rgba(90, 66, 48, .10);
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies-texte {
  flex: 1 1 26rem; max-width: 56ch; margin: 0;
  font-size: .86rem; line-height: 1.55; color: var(--texte-doux);
}
.bandeau-cookies-texte a { text-decoration: underline; text-underline-offset: 3px; }
.bandeau-cookies-boutons { display: flex; gap: 10px; flex: 0 0 auto; }
.bandeau-cookies-boutons .btn-cadre {
  padding: 11px 24px; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
}
@media (max-width: 640px) {
  .bandeau-cookies { justify-content: stretch; }
  .bandeau-cookies-boutons { width: 100%; }
  .bandeau-cookies-boutons .btn-cadre { flex: 1; padding: 13px 10px; }
}

/* ---------- Suivre sa commande ----------
   Ouverte depuis le courriel, sans mot de passe : on y lit où en est
   le colis, et rien qu'on puisse casser. */
.suivi-ref {
  margin: 0 0 6px; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux);
}
.suivi-etapes {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 0;
}
.suivi-etapes li {
  flex: 1; min-width: 120px; padding: 12px 10px 0; text-align: center;
  font-size: .85rem; color: var(--texte-doux);
  border-top: 3px solid var(--filet);
}
.suivi-etapes li.faite { border-top-color: var(--olive); color: var(--texte); }
.suivi-etapes li.ici   { font-weight: 600; }
.suivi-arret {
  margin: 24px 0 0; padding: 16px 18px; font-size: .92rem; line-height: 1.6;
  background: var(--fond); border: 1px solid var(--filet);
}
.suivi-colis {
  margin: 28px 0 0; padding: 18px 20px; text-align: center;
  background: var(--fond); border: 1px solid var(--filet);
}
.suivi-colis p { margin: 0 0 6px; font-size: .95rem; }
.suivi-adresse {
  font-size: .92rem; line-height: 1.6; color: var(--texte-doux);
}
.suivi-rappel {
  margin: 26px 0 0; padding: 16px 18px; text-align: center;
  font-size: .86rem; line-height: 1.7; word-break: break-word;
  background: var(--fond); border: 1px solid var(--filet);
}

/* ---------- Créer son compte après la commande ----------
   Proposé sur la page de remerciement, jamais avant de payer. */
.creer-compte {
  margin: 30px 0 34px; padding: 22px 24px; text-align: center;
  background: var(--fond); border: 1px solid var(--filet);
}
.creer-compte-titre {
  margin: 0; font-family: var(--titre, Georgia, serif); font-size: 1.1rem; color: var(--texte);
}
.creer-compte-texte {
  margin: 8px auto 0; max-width: 42ch; font-size: .9rem; line-height: 1.55;
  color: var(--texte-doux);
}

/* ---------- Le parrainage ---------- */
.parrain-code {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 26px; padding: 18px 20px;
  background: var(--fond); border: 1px solid var(--filet);
}
.parrain-etiquette {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux);
}
.parrain-code code {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
  font-size: .92rem; color: var(--texte);
  /* Un clic sélectionne tout le lien : moins de moitiés d'adresse
     collées dans un message. */
  user-select: all;
}

.parrain-bilan { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 26px; }
.parrain-bilan div { display: flex; flex-direction: column; gap: 3px; }
.parrain-bilan strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.parrain-bilan span { font-size: .82rem; color: var(--texte-doux); }

.tableau-simple { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: .9rem; }
.tableau-simple th {
  text-align: left; padding: 0 12px 10px; border-bottom: 1px solid var(--filet);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux);
}
.tableau-simple td { padding: 12px; border-bottom: 1px solid var(--filet); }
.tableau-simple .num { text-align: right; }

/* Le cadre d'une image qui dérive sous une légende — même raison que
   pour les matières : posé sur la figure, il laisse l'image agrandie
   recouvrir le texte. */
.media-visuel { display: block; overflow: hidden; }
.manifeste-media img { display: block; }

/* ---------- Compléter la promenade ----------
   Sous le panier, jamais dans le récapitulatif : la colonne de droite
   est celle où l'on paie, et l'on n'y met pas de tentation. Ici, on est
   encore en train de choisir. */
.complements {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--filet);
}
.complements-titre { margin: 0 0 6px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.complements-mot { margin: 0 0 24px; font-size: .9rem; color: var(--texte-doux); }

.complements-liste { display: flex; flex-direction: column; gap: 14px; }

.complement {
  display: grid; grid-template-columns: 84px 1fr auto;
  gap: 18px; align-items: center;
  padding: 14px; border: 1px solid var(--filet); background: var(--creme);
}
.complement-visuel { display: block; overflow: hidden; }
.complement-visuel img {
  width: 84px; height: 84px; object-fit: cover; display: block;
  background: var(--attente);
}

.complement-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.complement-nom { font-size: 1rem; color: inherit; text-decoration: none; }
.complement-nom:hover { color: var(--olive); }
.complement-coloris {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux);
}
.complement-mot {
  font-size: .84rem; color: var(--texte-doux); line-height: 1.5;
  /* Deux lignes au plus : un résumé qui s'étale décale le bouton et
     casse l'alignement des trois propositions. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.complement-achat {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  white-space: nowrap;
}
.complement-prix { font-size: 1rem; }

@media (max-width: 560px) {
  .complement { grid-template-columns: 64px 1fr; gap: 14px; }
  .complement-visuel img { width: 64px; height: 64px; }
  .complement-achat {
    grid-column: 1 / -1; flex-direction: row;
    align-items: center; justify-content: space-between;
  }
}

/* ---------- L'œil des champs de mot de passe ----------
   Le bouton est posé DANS le champ, à droite, et le champ se réserve la
   place : sans ce retrait, un long mot de passe passerait sous l'œil. */
.champ-mdp { position: relative; display: block; }
.champ-mdp > input { width: 100%; padding-right: 46px; }
.oeil-mdp {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px;
  background: none; cursor: pointer; color: var(--texte-doux);
  display: grid; place-items: center; -webkit-appearance: none; appearance: none;
}
.oeil-mdp svg { width: 19px; height: 19px; display: block; }
.oeil-mdp:hover { color: var(--texte); }
.oeil-mdp:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }

/* ---------- Pastilles de coloris sous les photos ----------
   Une carte ne montre qu'une teinte : rien n'y dit que l'autre existe.
   Les pastilles le disent, et laissent voir sans quitter la page.

   Elles vivent ENTRE les deux liens de la carte — l'image et le texte —
   parce qu'un bouton ne peut pas vivre dans un lien. */
.produit-carte { display: flex; flex-direction: column; }
.produit-image { display: block; }
.produit-infos { display: block; }

.pastilles { display: flex; gap: 8px; margin-top: 12px; }
.pastille {
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filet); background: var(--teinte, #ccc);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  position: relative; transition: transform .2s ease, box-shadow .2s ease;
}
.pastille:hover { transform: scale(1.12); }
/* La teinte montrée porte un anneau, à distance du disque : un simple
   trait sur le bord se perdrait sur une pastille claire. */
.pastille.est-vue { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--texte); }
.pastille:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; }

/* La photo ne grandit plus au survol du texte seul : le survol porte
   maintenant sur la carte entière, dont les pastilles font partie. */
.produit-carte:hover .visuel img { transform: scale(1.05); }


/* ---------------------------------------------------------------
   Le journal
   --------------------------------------------------------------- */
.journal-tete { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.journal-tete h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.journal-tete h1 { margin: 10px 0 14px; }
.journal-meta { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); }
.journal-resume { color: var(--texte-doux); line-height: 1.6; }
.journal-sans-photo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--creme); }
.journal-sans-photo img { width: 22%; max-width: 110px; opacity: .55; }

.journal-une { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; max-width: 1000px;
  color: inherit; text-decoration: none; margin-bottom: clamp(48px, 7vw, 90px); }
.journal-une-visuel { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--creme); }
.journal-une-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.journal-une:hover .journal-une-visuel img { transform: scale(1.03); }
.journal-une-texte { display: flex; flex-direction: column; gap: 14px; }
.journal-une-titre { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.2; color: var(--anthracite); }

.journal-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); }
.journal-carte { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.journal-carte-visuel { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--creme); margin-bottom: 6px; }
.journal-carte-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.journal-carte:hover .journal-carte-visuel img { transform: scale(1.04); }
.journal-carte-titre { font-family: var(--display); font-size: 1.12rem; line-height: 1.3; color: var(--anthracite); }
@media (max-width: 900px) {
  .journal-une { grid-template-columns: 1fr; }
  .journal-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .journal-grille { grid-template-columns: 1fr; } }

/* L'article : une colonne de lecture étroite, que les photos peuvent
   déborder — la largeur du texte, large, ou pleine page. */
.apercu-article { background: #3A2C21; color: #F3EADC; text-align: center; padding: 10px 16px; font-size: .88rem; }
.apercu-article a { color: #E8C99A; margin-left: 10px; }
.article-tete { max-width: 720px; text-align: center; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(22px, 3vw, 36px); }
.article-tete .fil { justify-content: center; margin-bottom: 26px; }
.article-meta { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); margin: 0 0 16px; }
.article-titre { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 0; }
.article-chapo { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; color: var(--texte-doux); margin: 16px auto 0; max-width: 58ch; }
.article-couverture { max-width: 1100px; margin: 0 auto clamp(40px, 6vw, 72px); padding: 0 var(--marge); }
.article-couverture img { width: 100%; max-height: 58vh; object-fit: cover; }

.article-corps { max-width: 680px; margin: 0 auto; padding: 0 var(--marge) clamp(60px, 8vw, 110px); font-size: 1rem; line-height: 1.75; }
.art-texte p { margin: 0 0 1.2em; }
.art-texte a { color: var(--anthracite); text-decoration: underline; text-underline-offset: 3px; }
.art-intertitre { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; margin: 1.8em 0 .6em; }
.art-photo, .art-duo, .art-galerie, .art-video { margin: 2.4em 0; }
.art-photo img, .art-duo img, .art-photo-texte img { width: 100%; height: auto; display: block; }
figcaption { font-size: .86rem; color: var(--texte-doux); text-align: center; margin-top: 10px; line-height: 1.5; }
/* Déborder la colonne sans casser la page : on se recentre sur l'écran. */
.art-photo.format-large, .art-duo, .art-galerie { width: min(1100px, 100vw - 2 * var(--marge)); margin-left: 50%; transform: translateX(-50%); }
.art-photo.format-pleine { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.art-photo.format-pleine figcaption { padding: 0 var(--marge); }
.art-duo-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 20px); }
.art-duo-grille img { aspect-ratio: 4/5; object-fit: cover; }
.art-photo-texte { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin: 2.4em 0;
  width: min(1000px, 100vw - 2 * var(--marge)); margin-left: 50%; transform: translateX(-50%); }
.art-photo-texte figure { margin: 0; }
.art-photo-texte.cote-droite figure { order: 2; }
.art-galerie-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.art-galerie-item { display: block; aspect-ratio: 1; overflow: hidden; }
.art-galerie-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.art-galerie-item:hover img { transform: scale(1.05); }
.art-citation { margin: 2.4em 0; padding: 0 0 0 clamp(18px, 3vw, 32px); border-left: 2px solid var(--or, #C9A56A); }
.art-citation p { font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; color: var(--anthracite); margin: 0; }
.art-citation cite { display: block; margin-top: 12px; font-style: normal; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux); }
.art-separateur { border: 0; height: 1px; background: var(--filet); width: 90px; margin: 3em auto; }
.article-retour { text-align: center; margin-top: 3.5em; }
.art-bouton { text-align: center; margin: 2.2em 0; }
@media (max-width: 760px) {
  .art-photo-texte { grid-template-columns: 1fr; }
  .art-photo-texte.cote-droite figure { order: 0; }
  .art-galerie-grille { grid-template-columns: repeat(2, 1fr); }
}

.visionneuse { position: fixed; inset: 0; z-index: 200; background: rgba(20,16,12,.92);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.visionneuse[hidden] { display: none !important; }
.visionneuse img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visionneuse-fermer { position: absolute; top: 14px; right: 18px; border: 0; background: none; color: #fff; font-size: 2.4rem; cursor: pointer; }

/* « Découvrir Le Petit Monde d'Happy » : un lien qui se lit comme une invitation. */
.invitation-asso a { color: var(--anthracite); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }

/* L'invitation à défiler : sur téléphone, le bouton du hero occupe déjà le
   bas de l'écran et « DÉCOUVRIR » venait le chevaucher. Le geste de faire
   défiler y est naturel ; l'indication n'apporte rien. */
@media (max-width: 760px), (max-height: 700px) { .defiler { display: none; } }

/* Stock bas, dit sobrement sous le prix. */
.produit-infos .stock-bas { display: block; margin-top: 6px; font-size: .74rem; letter-spacing: .06em; color: #9A5B34; }

/* Le bandeau d'une offre : même place et même hauteur que l'actualité, mais
   foncé, pour qu'on le voie — c'est tout son rôle. */
/* L'offre suit la page.
   Elle disparaissait au premier défilement, c'est-à-dire avant d'avoir
   servi : on lit une fiche produit, on hésite, et la remise n'est plus
   sous les yeux. Elle se colle donc sous l'en-tête, qui est fixe.
   (« overflow-x: clip » sur body, et non « hidden », précisément pour
   que « sticky » continue de fonctionner.) */
.bandeau-nouvelle.bandeau-promo {
  position: sticky; top: var(--haut-entete, 84px);
  background: var(--anthracite); color: #F6EFE3;
}
.bandeau-nouvelle.bandeau-promo:hover { background: #4A3527; }
.bandeau-promo .bandeau-titre { color: #F6EFE3; font-size: clamp(.86rem, 1vw, .98rem); letter-spacing: .01em; }
@media (min-width: 761px) { .bandeau-nouvelle.bandeau-promo .conteneur { padding-block: 4px; } }
.bandeau-promo .bandeau-titre strong { color: #fff; font-weight: 600; }
.bandeau-promo .bandeau-code { font-weight: 600; letter-spacing: .08em; padding: 2px 8px;
  border: 1px dashed rgba(255,255,255,.55); border-radius: 4px; margin: 0 2px; white-space: nowrap; }
.bandeau-promo .bandeau-fin { color: #D9C9B2; }
.bandeau-promo .bandeau-lien { color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 640px) { .bandeau-promo .bandeau-fin { display: none; } }

/* ─────────────────────── Les avis qui défilent ───────────────────────
   Un rail horizontal plutôt qu'un carrousel à diapositives : le doigt
   sait déjà le faire, le clavier aussi, et rien ne casse si le script
   ne se charge pas. Les flèches ne font que pousser le rail. */
.avis-defile { position: relative; margin-top: clamp(28px, 4vw, 44px); }

.avis-defile-piste {
  display: flex; gap: clamp(16px, 2vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 4px 18px;
  /* La barre de défilement laissée visible sur mobile : c'est elle qui
     dit qu'il y a autre chose à droite. */
  scrollbar-width: thin; scrollbar-color: var(--filet) transparent;
}
.avis-defile-piste:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }

.avis-carte {
  flex: 0 0 min(340px, 82vw); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--fond-carte, #FAF6EE);
  border: 1px solid var(--filet); padding: clamp(18px, 2.4vw, 26px);
}
.avis-carte-photo img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  display: block; background: var(--attente);
}
.avis-carte-titre { font-size: 1.05rem; margin: 0; }
.avis-carte-texte {
  margin: 0; font-size: .94rem; line-height: 1.7; color: var(--texte-doux);
  /* Six lignes au plus : les cartes gardent la même hauteur, et l'avis
     entier reste lisible sous la fiche produit. */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.avis-carte-qui { margin: auto 0 0; font-size: .86rem; }
.avis-carte .avis-verifie { align-self: flex-start; }

.avis-defile-fleche {
  position: absolute; top: calc(50% - 22px); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--filet); background: var(--creme, #FAF6EE);
  font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--texte);
}
.avis-defile-fleche.avant { left: -18px; }
.avis-defile-fleche.apres { right: -18px; }
.avis-defile-fleche[hidden] { display: none; }
@media (max-width: 860px) { .avis-defile-fleche { display: none; } }

.avis-maison-note {
  margin-top: 14px; font-size: .95rem; color: var(--texte-doux);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ─────────────────── Livraison offerte : dit à temps ───────────────────
   Sous le bouton d'ajout et en tête de boutique. Le panier garde sa
   barre de progression : ici on annonce, là-bas on mesure. */
.mention-franco {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 16px 0 0; padding: 12px 16px;
  background: var(--creme, #FAF6EE); border: 1px solid var(--filet);
  font-size: .88rem; color: var(--texte-doux); line-height: 1.5;
}
.mention-franco strong { color: var(--texte); }
/* Un point entre les mentions, jamais avant la première. */
.mention-franco span + span::before { content: '·'; margin-right: 22px; color: var(--filet); }
/* Sur un téléphone les deux mentions s'empilent, et le point se
   retrouvait seul en début de ligne. On empile franchement. */
@media (max-width: 560px) {
  .mention-franco { flex-direction: column; gap: 4px; }
  .mention-franco span + span::before { content: none; }
}
/* Sur un ensemble, de quelle pièce vient l'avis. */
.avis-piece { font-size: .82rem; color: var(--texte-doux); }
.avis-piece a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }