/* =========================================================================
   Vitalipets — feuille de style unique (mobile-first)
   Palette naturelle premium · polices auto-hébergées · aucune dépendance externe
   ========================================================================= */

/* ------------------------------------------------------------ polices de marque
   Nourd sur l'ensemble du site : Regular pour le texte courant, Bold pour les
   gras (titres, boutons, navigation, <strong>...). Charger la graisse Bold
   evite un faux gras de synthese, nettement moins propre.
   Fichiers sous-ensembles au latin, font-display:swap pour un affichage
   immediat du texte. */
@font-face{
  font-family:"Nourd";
  src:url("/assets/fonts/nourd-400.woff2?v=4083aecf48") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nourd";
  src:url("/assets/fonts/nourd-700.woff2?v=bc11698f25") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Testimonia";
  src:url("/assets/fonts/testimonia.woff2?v=b983c46b9a") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --------------------------------------------------------------
     Palette de marque — anthracite chaud + accent prune + ambre.

     Le turquoise precedent etait froid et desature : il lisait « medical »
     et entrait en conflit avec les photos produit, toutes chaudes.
     Trois pastels portent la structure, le prune porte les actions.
     -------------------------------------------------------------- */

  /* Les surfaces. Chaque pastel a UN role, sinon quatre couleurs virent a
     l'arc-en-ciel : sauge = produits, rose = bande alternee, miel = chiffres
     et recit. Le texte fonce passe partout au-dessus de 9:1. */
  /* --brand-600 reste la couleur de STRUCTURE : titres, liens, boutons.
     Elle etait l'anthracite ; elle devient un prune-charbon, qui garde la
     profondeur du brun sans sa grisaille. Les bandes pastel ont leurs
     propres jetons, plus bas — les confondre rendait titres et liens
     illisibles. */
  --brand:#5c4a54;       /* traits fins, details                        */
  --brand-600:#3a2833;   /* titres, liens, boutons — sur creme  12,9:1  */
  --brand-700:#2b1d26;   /* pied de page, survol                        */
  --brand-300:#8fa588;   /* decor des illustrations                     */
  --brand-100:#f0dbe1;   /* rose poudre — pastilles et bande alternee   */

  /* Les trois bandes pastel. Un role chacune. */
  --sauge:#cbd8c6;       /* bande produits — texte --ink dessus   9,3:1 */
  --sauge-dk:#bccdb6;    /* fond du heros photo, sous le voile          */
  --rose:#f0dbe1;        /* bande franche, une par page          10,4:1 */
  --rose-pale:#f8eef1;   /* alternances repetees : une fiche produit en
                            compte cinq, le rose franc y saturerait      */

  /* miel — le « peps ». JAMAIS du texte : sur pastel il plafonne a 2,0:1,
     et le foncer assez pour passer le ramenerait au brun. Il est donc
     toujours un FOND, avec du texte fonce dessus. */
  --honey:#d99b2e;       /* pastille pleine, texte --ink dessus   5,7:1 */
  --honey-dk:#c9891f;    /* survol de la pastille                 4,6:1 */
  --honey-pale:#f9e8c4;  /* bande entiere, texte --ink dessus    11,3:1 */

  /* ambre — le bouton Amazon reprend le miel, pour se distinguer des
     boutons prune du reste du site. */
  --amber:#d99b2e;
  --amber-dk:#c9891f;

  /* prune — toutes les actions : boutons, liens, surtitres, accents.
     Fonce depuis #8f4363, qui tombait pile a 4,5:1 sur le sauge. */
  --accent:#7d3a55;      /* sur sauge 5,4:1 · sur rose 6,1:1            */
  --accent-lt:#c98ca6;   /* bordures larges, chevrons                   */

  /* neutres */
  --cream:#faf8f6;
  --sand:#eef1ea;
  --sand-dk:#dde4d8;
  --bark:#6b4f34;        /* matieres naturelles des illustrations       */
  --ink:#3a2833;         /* prune-charbon : la profondeur du brun, sans
                            sa grisaille                                */
  --ink-soft:#6a5860;
  --white:#fff;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(43,39,35,.06),0 2px 8px rgba(43,39,35,.05);
  --shadow:0 4px 12px rgba(43,39,35,.08),0 12px 32px rgba(43,39,35,.07);
  --wrap:1180px;
  --sp:clamp(2.75rem,7vw,5.5rem);
  /* Typographie de la marque.
     --font-display : textes en gras (titres, boutons, navigation, <strong>)
     --font-body    : tout le reste
     Les deux pointent aujourd'hui sur Nourd. */
  --font-body:"Nourd",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Meme famille que le texte : la distinction se fait par la graisse.
     Variable conservee pour pouvoir reintroduire une police de titrage. */
  --font-display:var(--font-body);
  /* Ecriture manuscrite, reservee au slogan de marque.
     Testimonia. Licence livree dans /assets/fonts/ */
  --font-script:"Testimonia","Segoe Script","Bradley Hand",cursive;
  /* Alias conserves pour compatibilite */
  --font:var(--font-body);
  --font-title:var(--font-display);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand-600);text-underline-offset:3px}
a:hover{color:var(--accent)}

h1,h2,h3{font-family:var(--font-display);line-height:1.18;letter-spacing:-.01em;color:var(--brand-600);margin:0 0 .5em}
h1{font-size:clamp(2rem,7.2vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.55rem,5vw,2.4rem);font-weight:700}
h3{font-size:clamp(1.15rem,3.4vw,1.35rem);font-weight:700}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.15rem}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,5vw,2rem)}
.wrap.narrow{max-width:780px}
.section{padding-block:var(--sp)}
.section-alt{background:var(--sand);}
.section-head{max-width:660px;margin:0 auto clamp(1.8rem,5vw,3rem);text-align:center}
.section-head .lead{margin-bottom:0}
.lead{font-size:clamp(1.05rem,3.2vw,1.2rem);color:var(--ink-soft);line-height:1.6}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .6rem;
}
.micro{font-size:.85rem;color:var(--ink-soft)}
.note{font-size:.9rem;color:var(--ink-soft);text-align:center;margin-top:1.2rem}
.center-cta{text-align:center;margin-top:2rem}

.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}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand-600);color:#fff;padding:.75rem 1.1rem;z-index:200;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.ic{width:24px;height:24px;flex:none}
.ic-sm{width:18px;height:18px}
.ic-lg{width:32px;height:32px}

/* ------------------------------------------------------------ typographie des gras
   Tout element affiche en gras utilise --font-display. */
h1,h2,h3,h4,h5,h6,
strong,b,
.btn,
.eyebrow,
.card-tag,
.chips li,.chips a,
.nav-list a,
.lang-switch summary,.lang-list b,
.ctable thead th,.ctable tbody th,
.faq-item summary,
.nl-card-title,
.nl-msg,
.steps h3,.steps li::before,
.site-footer h2,
.contact-form label,
.toc a,
.breadcrumb span,
.hero-trust li,
.marquee li,
.nl-consent input+span{
  font-family:var(--font-display);
}

/* ------------------------------------------------------------ boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.4rem;
  /* pas de raccourci `font:` ici : il ecraserait --font-display */
  font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.2;
  text-decoration:none;text-align:center;
  border:2px solid transparent;border-radius:100px;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-lg{min-height:58px;padding:1rem 1.8rem;font-size:1.05rem}
/* Nourd Bold est plus large que la police condensee d'origine : sur les petits
   ecrans on resserre les grands boutons pour garder le libelle sur une ligne. */
@media (max-width:420px){
  .btn-lg{padding:1rem 1.05rem;font-size:.98rem;gap:.4rem}
  .btn-lg .ic-sm{width:16px;height:16px}
}
.btn-sm{min-height:44px;padding:.6rem 1.05rem;font-size:.92rem}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-700);color:#fff}
.btn-amazon{background:var(--amber);color:#1a1a1a;box-shadow:0 2px 10px rgba(240,181,68,.4)}
.btn-amazon:hover{background:var(--amber-dk);color:#1a1a1a}
.btn-outline{background:transparent;color:var(--brand-600);border-color:var(--brand-600)}
.btn-outline:hover{background:var(--brand-600);color:#fff}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--brand-600)}

/* ------------------------------------------------------------ en-tête */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,249,248,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--sand-dk);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;flex:none;text-decoration:none}
.logo img{width:132px;height:auto}

/* Slogan de marque. Manuscrit, sous le mot-symbole, dans les cinq langues.
   C'est du texte et non une image : il se traduit, reste net a toute taille
   et se laisse lire par les moteurs comme par les assistants IA. */
.logo .slogan{
  font-family:var(--font-script);
  font-weight:400;
  /* Testimonia a un trait fin : sous 26 px elle devient un fil illisible.
     Le clamp suit la largeur d'ecran car la contrainte est l'allemand,
     « Aus Liebe zu den Tieren », le plus long des cinq slogans. */
  font-size:clamp(1.5rem,7.2vw,2.5rem);
  line-height:1;
  color:var(--accent);
  letter-spacing:0;
  white-space:nowrap;
}

.burger{
  width:46px;height:46px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px;
}
.burger span{display:block;height:2px;background:var(--brand-600);border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mainnav{
  position:fixed;inset:64px 0 auto 0;
  background:var(--cream);border-bottom:1px solid var(--sand-dk);
  padding:1rem clamp(1.1rem,5vw,2rem) 1.8rem;
  transform:translateY(-115%);transition:transform .28s ease;
  max-height:calc(100dvh - 64px);overflow-y:auto;
  box-shadow:var(--shadow);
}
.mainnav.open{transform:translateY(0)}
.nav-list{list-style:none;margin:0 0 1.1rem;padding:0}
.nav-list a{
  display:block;padding:.95rem .25rem;font-size:1.12rem;font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--sand-dk);
}
.nav-list a[aria-current="page"]{color:var(--accent)}
.nav-extra{display:flex;flex-direction:column;gap:.9rem}
.nav-extra .btn{width:100%}

.lang-switch{position:relative}
.lang-switch summary{
  list-style:none;display:flex;align-items:center;gap:.5rem;cursor:pointer;
  min-height:48px;padding:.5rem .9rem;border:2px solid var(--sand-dk);border-radius:100px;
  font-weight:700;font-size:.95rem;background:#fff;
}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);transform:rotate(45deg) translateY(-2px);margin-left:auto}
.lang-list{list-style:none;margin:.5rem 0 0;padding:.35rem;background:#fff;border:1px solid var(--sand-dk);border-radius:var(--radius);box-shadow:var(--shadow)}
.lang-list a{display:flex;gap:.6rem;align-items:center;padding:.7rem .8rem;text-decoration:none;border-radius:10px;font-size:.98rem}
.lang-list a:hover,.lang-list a[aria-current="true"]{background:var(--brand-100)}
.lang-list b{font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);min-width:22px}

.nav-backdrop{position:fixed;inset:0;background:rgba(34,30,26,.35);z-index:99}

@media (min-width:1000px){
  .burger{display:none}
  .mainnav{position:static;transform:none;background:none;border:0;box-shadow:none;padding:0;display:flex;align-items:center;gap:1.4rem;max-height:none;overflow:visible}
  .nav-list{display:flex;gap:.35rem;margin:0}
  .nav-list a{border:0;padding:.5rem .7rem;font-size:1rem;border-radius:8px}
  .nav-list a:hover{background:var(--brand-100)}
  .nav-extra{flex-direction:row;align-items:center;gap:.7rem}
  .nav-extra .btn{width:auto}
  .lang-list{position:absolute;right:0;top:calc(100% + .4rem);min-width:190px;z-index:20}
  .logo img{width:158px}
  .nav-backdrop{display:none}
}

/* ------------------------------------------------------------ hero */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 0%,var(--brand-100) 0%,transparent 60%),
    linear-gradient(180deg,var(--cream) 0%,var(--sand) 100%);
  padding-block:clamp(2rem,7vw,4.5rem) 0;
}
.hero-inner{display:grid;gap:clamp(1.5rem,5vw,3rem)}
.hero-copy{max-width:620px}
.hero h1{margin-bottom:.4em}
.hero .lead{margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.8rem}
.hero-actions .btn{flex:1 1 100%}
.hero-trust{list-style:none;margin:0;padding:0 0 clamp(2rem,6vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem}
.hero-trust li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--brand-600)}
.hero-media{margin-inline:calc(-1*clamp(1.1rem,5vw,2rem));align-self:end}
.hero-media img{width:100%;max-width:560px;margin-inline:auto}

@media (min-width:760px){
  .hero-actions .btn{flex:0 0 auto}
  .hero-trust{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  .hero-inner{grid-template-columns:1.05fr .95fr;align-items:center;padding-bottom:2rem}
  .hero-media{margin-inline:0}
  .hero-trust{grid-template-columns:1fr 1fr;padding-bottom:0}
}

/* ------------------------------------------------------------ bandeau défilant */
.marquee{background:var(--brand-600);color:#fff;padding:.85rem 0;font-size:.86rem}
.marquee ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.marquee ul::-webkit-scrollbar{display:none}
.marquee li{white-space:nowrap;display:flex;align-items:center;gap:.5rem;font-weight:600;opacity:.95}
.marquee li::before{content:"✦";color:var(--amber)}
/* "safe center" evite de rogner le premier element quand la liste deborde */
@media (min-width:1000px){.marquee ul{justify-content:safe center;gap:2.6rem}}

/* ------------------------------------------------------------ grilles */
.grid{display:grid;gap:1.1rem}
@media (min-width:640px){.grid-2,.grid-3{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr);gap:1.6rem}}

.feature{background:#fff;border:1px solid var(--sand-dk);border-radius:var(--radius-lg);padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm)}
.feature h3{margin-bottom:.45rem}
.feature p{margin:0;color:var(--ink-soft);font-size:.98rem}
.feature-ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-600);margin-bottom:1rem;
}
.section-alt .feature{background:var(--cream)}

/* ------------------------------------------------------------ cartes produit */
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--sand-dk);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-media{display:block;background:linear-gradient(160deg,var(--brand-100),var(--sand));aspect-ratio:4/3}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.25rem 1.25rem 1.4rem;display:flex;flex-direction:column;flex:1}
/* selecteur enfant necessaire : `.card-body>p` (0,1,1) l'emportait sur `.card-tag` (0,1,0) */
.card-body>.card-tag{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .35rem}
.card h3{margin-bottom:.4rem;font-size:1.25rem}
.card h3 a{text-decoration:none}
.card-body>p{color:var(--ink-soft);font-size:.96rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1.1rem;padding:0}
.chips li,.chips a{
  font-size:.78rem;font-weight:600;padding:.3rem .65rem;border-radius:100px;
  background:var(--brand-100);color:var(--brand-600);text-decoration:none;
}
.card-actions{display:flex;gap:.55rem;margin-top:auto;flex-wrap:wrap}
.card-actions .btn{flex:1 1 auto}

/* ------------------------------------------------------------ tableaux */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--sand-dk);border-radius:var(--radius);background:#fff}
.ctable{width:100%;border-collapse:collapse;min-width:620px;font-size:.94rem}
.ctable th,.ctable td{padding:.85rem .95rem;text-align:left;border-bottom:1px solid var(--sand-dk);vertical-align:top}
.ctable thead th{background:var(--brand-600);color:#fff;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ctable tbody th{font-weight:700;color:var(--brand-600);white-space:nowrap}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable tbody tr:nth-child(even){background:var(--cream)}
.ctable.specs{min-width:0}
.ctable.tailles{min-width:0}
.ctable.tailles td,.ctable.tailles th{white-space:nowrap}
.ctable.specs th{width:42%}

/* ------------------------------------------------------------ listes à puces */
.ticks{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.9rem;font-size:.99rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.28em;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2723' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/.75rem no-repeat;
}
.ticks.big li{font-size:1.05rem;font-weight:500}
.warns{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.warns li{position:relative;padding-left:1.8rem;font-size:.95rem;color:var(--ink-soft)}
.warns li::before{content:"!";font-family:var(--font-display);position:absolute;left:0;top:.1em;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:.8rem;display:grid;place-items:center}

.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:1rem}
.steps li{counter-increment:s;position:relative;padding:1.3rem 1.3rem 1.3rem 4rem;background:#fff;border:1px solid var(--sand-dk);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.steps li::before{content:counter(s);position:absolute;left:1.2rem;top:1.3rem;width:2rem;height:2rem;border-radius:50%;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-weight:700}
.steps h3{margin-bottom:.3rem;font-size:1.1rem}
.steps p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* ------------------------------------------------------------ storytelling */
.section-story{background:var(--brand-600);color:#f0ebe6}
.section-story h2,.section-story h3{color:var(--brand-600)}
.section-story .eyebrow{color:var(--amber)}
.section-story .ticks li::before{background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/.75rem no-repeat}
.section-story .btn-outline{color:var(--brand-600);border-color:rgba(58,40,51,.45)}
.section-story .btn-outline:hover{background:var(--brand-600);color:#fff}
.story-inner{display:grid;gap:2rem}
.story-media img{border-radius:var(--radius-lg);width:100%}
@media (min-width:900px){.story-inner{grid-template-columns:.9fr 1.1fr;align-items:center;gap:3.5rem}}

.split{display:grid;gap:2rem}
@media (min-width:900px){.split{grid-template-columns:1.35fr .65fr;gap:3rem;align-items:start}}
.panel{background:#fff;border:1px solid var(--sand-dk);border-left:4px solid var(--accent-lt);border-radius:var(--radius);padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm)}
.panel h3{margin-bottom:.9rem}
.section-alt .panel{background:var(--cream)}
.panel-cta{text-align:center;border-left-width:1px;border-top:4px solid var(--accent-lt);margin-top:2.5rem}

.prose h2{margin-top:2.2rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-soft)}
.prose .ticks li{color:var(--ink)}
.legal h2{font-size:1.3rem;margin-top:2.4rem}
.legal p,.legal li{font-size:.97rem}

/* ------------------------------------------------------------ produit */
.product-hero{background:linear-gradient(180deg,var(--sand) 0%,var(--cream) 100%);padding-block:clamp(1.5rem,5vw,3rem) clamp(2rem,6vw,4rem)}
.product-hero-inner{display:grid;gap:1.8rem}
.product-media{background:#fff;border:1px solid var(--sand-dk);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-sm)}
.product-media img{width:100%;border-radius:12px}
.product-copy h1{margin-bottom:.35em}
.product-copy .lead{margin-bottom:1.4rem}
.product-copy .hero-actions{margin-bottom:.9rem}
@media (min-width:900px){
  .product-hero-inner{grid-template-columns:1fr 1fr;align-items:center;gap:3rem}
}

/* ------------------------------------------------------------ fil d'ariane */
.breadcrumb{background:var(--cream);border-bottom:1px solid var(--sand-dk);font-size:.85rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:.7rem 0}
.breadcrumb li+li::before{content:"›";margin-right:.4rem;color:var(--ink-soft)}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb span{color:var(--brand-600);font-weight:600}

/* ------------------------------------------------------------ FAQ */
.faq-list{display:grid;gap:.7rem}
.faq-item{background:#fff;border:1px solid var(--sand-dk);border-radius:var(--radius);overflow:hidden}
.section-alt .faq-item{background:var(--cream)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:.9rem;
  padding:1.1rem 1.2rem;font-weight:700;font-size:1.02rem;color:var(--brand-600);
  min-height:56px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;margin-left:auto;width:10px;height:10px;margin-top:.45em;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-answer{padding:0 1.2rem 1.2rem}
.faq-answer p{margin:0 0 .7rem;color:var(--ink-soft);font-size:.98rem}
.faq-answer p:last-child{margin-bottom:0}
.faq-group{margin-bottom:2.5rem}
.faq-group h2{font-size:1.5rem;margin-bottom:1rem}
.toc{background:var(--brand-100);border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:2.5rem}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.toc a{background:#fff;border-radius:100px;padding:.45rem .95rem;font-size:.88rem;font-weight:600;text-decoration:none;display:inline-block}

/* ------------------------------------------------------------ newsletter */
.nl-section{background:linear-gradient(160deg,var(--brand-100) 0%,var(--sand) 100%)}
.nl-wrap{display:grid;gap:2rem}
.nl-copy h2{margin-bottom:.5rem}
.nl-card{background:#fff;border-radius:var(--radius-lg);padding:1.6rem 1.4rem;box-shadow:var(--shadow);border:1px solid var(--sand-dk)}
.nl-card .ic-lg{color:var(--accent);margin-bottom:.8rem}
.nl-card-title{font-size:1.25rem;font-weight:700;color:var(--brand-600);margin-bottom:1rem}
.nl-row{display:grid;gap:.6rem}
.nl-form input[type=email],.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;min-height:52px;padding:.85rem 1rem;font:inherit;font-size:1rem;
  border:2px solid var(--sand-dk);border-radius:12px;background:#fff;color:var(--ink);
}
.nl-form input[type=email]:focus,.contact-form :focus{outline:none;border-color:var(--brand-600)}
.nl-consent{display:flex;gap:.65rem;align-items:flex-start;margin-top:.9rem;font-size:.82rem;color:var(--ink-soft);cursor:pointer}
.nl-consent input{width:22px;height:22px;flex:none;margin-top:.1rem;accent-color:var(--brand-600)}
.nl-legal{font-size:.78rem;color:var(--ink-soft);margin:.9rem 0 0}
.nl-msg{margin:.8rem 0 0;font-size:.92rem;font-weight:600;min-height:1.2em}
.nl-msg.ok{color:var(--brand-600)}
.nl-msg.err{color:var(--accent)}
@media (min-width:900px){
  .nl-wrap{grid-template-columns:1.05fr .95fr;align-items:center;gap:3.5rem}
  .nl-row{grid-template-columns:1fr auto}
}

.contact-form .field{margin-bottom:1rem}
.contact-form label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form .btn{width:100%;margin-top:.6rem}
@media (min-width:640px){.contact-form .btn{width:auto}}
.contact-cards .contact-card{background:#fff;border:1px solid var(--sand-dk);border-radius:var(--radius-lg);padding:1.5rem 1.4rem;text-align:center;box-shadow:var(--shadow-sm)}
.contact-card .ic-lg{margin:0 auto .9rem;color:var(--accent)}
.contact-card p{color:var(--ink-soft);font-size:.96rem}

/* ------------------------------------------------------------ bandeau CTA */
.cta-band{background:var(--brand-600);color:#fff;padding-block:clamp(2.5rem,7vw,4rem)}
.cta-band h2{color:#fff;margin-bottom:.4rem}
.cta-band p{color:#f0ebe6;margin:0}
.cta-band-inner{display:grid;gap:1.6rem}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.cta-band-actions .btn{flex:1 1 100%}
@media (min-width:760px){
  .cta-band-actions .btn{flex:0 0 auto}
}
@media (min-width:1000px){
  .cta-band-inner{grid-template-columns:1.2fr auto;align-items:center;gap:3rem}
}

/* ------------------------------------------------------------ pied de page */
/* un cran plus profond que le bandeau CTA qui le precede, pour que les deux
   blocs turquoise ne fusionnent pas visuellement */
.site-footer{background:var(--brand-700);color:#f0ebe6;padding-block:clamp(2.5rem,7vw,4rem) 2rem;font-size:.94rem}
.site-footer h2{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:.9rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.site-footer a{color:#f0ebe6;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;gap:2rem}
.footer-brand p{max-width:36ch}
.footer-brand img{margin-bottom:.3rem;width:176px;height:auto}
.footer-brand .slogan{
  display:block;font-family:var(--font-script);font-weight:400;
  font-size:1.85rem;line-height:1;color:var(--accent-lt);margin-bottom:1.1rem;
}
.footer-brand .btn{margin-top:.4rem}
.footer-mail{margin-top:.9rem}
.footer-langs{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.4rem;font-size:.86rem;display:flex;flex-wrap:wrap;gap:.4rem}
.footer-bottom{display:grid;gap:.5rem;padding-top:1rem;font-size:.82rem;color:#a89e94}
.disclosure{max-width:70ch}
@media (min-width:700px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .footer-grid{grid-template-columns:1.6fr repeat(4,1fr);gap:2.5rem}
  .footer-bottom{grid-template-columns:auto 1fr;align-items:baseline;gap:2rem}
}

/* ------------------------------------------------------------ modale email */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:end center;padding:0}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(34,30,26,.5);animation:fade .25s ease}
.modal-box{
  position:relative;background:var(--cream);width:100%;max-width:520px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:1.8rem 1.4rem 1.6rem;
  box-shadow:0 -8px 40px rgba(0,0,0,.25);animation:slideUp .3s ease;
  max-height:92dvh;overflow-y:auto;
}
.modal-box h2{font-size:1.5rem;margin-bottom:.5rem}
.modal-box>p{color:var(--ink-soft);font-size:.98rem}
.modal-close{
  position:absolute;top:.5rem;right:.6rem;width:44px;height:44px;border:0;background:none;
  font-size:1.9rem;line-height:1;color:var(--ink-soft);cursor:pointer;border-radius:50%;
}
.modal-close:hover{background:var(--sand)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (min-width:640px){
  .modal{place-items:center}
  .modal-box{border-radius:var(--radius-lg);animation:fade .25s ease}
}

/* ------------------------------------------------------------ impression */
@media print{
  .site-header,.site-footer,.modal,.cta-band,.nl-section,.marquee,.breadcrumb{display:none!important}
  body{background:#fff;font-size:11pt}
}

/* ------------------------------------------------------------ signature de marque
   Le visuel de marque, recompose en HTML : mot-symbole, photo, slogan.
   Le slogan reste du texte — il se traduit et se laisse indexer, ce qu'une
   image aplatie ne permet pas. */
.signature{background:var(--sand);text-align:center;overflow:hidden}
.signature .wrap{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.signature-mark{width:min(280px,66vw);height:auto}
.signature-dog{
  width:min(620px,92vw);height:auto;
  /* la photo est detouree sur fond clair : une ombre portee tres douce la
     pose sur le sable sans dessiner de contour net */
  filter:drop-shadow(0 14px 22px rgba(43,39,35,.10));
  margin-block:-.2rem -.6rem;
}
.signature-slogan{
  font-family:var(--font-script);font-weight:400;
  font-size:clamp(2.2rem,8.4vw,3.9rem);line-height:1.05;
  color:var(--accent);margin:0;
}
@media (min-width:800px){
  .signature-mark{width:340px}
  .signature .wrap{gap:.6rem}
}

/* ------------------------------------------------------------ motif de brosse
   Un coup de brosse fourni par la marque, reduit a son canal alpha et servi
   comme MASQUE : la couleur vient de `background-color`, donc un seul fichier
   sert toutes les teintes et changer la palette ne demande pas de regenerer
   l'image.

   Le fichier d'origine existait en turquoise et en saumon. Ni l'un ni l'autre
   n'est repris : le turquoise etait la palette abandonnee, et le saumon jure
   avec la prune. Seule la matiere du trace nous interessait.

   Tout est enferme dans un @supports : sans prise en charge du masquage, les
   elements resteraient des rectangles de couleur pleine. Mieux vaut rien. */
@supports (mask-image:url(#m)) or (-webkit-mask-image:url(#m)){

  /* --- petit fleuron au-dessus des surtitres de section.
     Purement ornemental, donc en ::before plutot que dans le balisage. */
  .section-head::before{
    content:"";
    display:block;
    width:74px;
    aspect-ratio:1.423;          /* rapport exact du trace */
    margin:0 auto .85rem;
    background-color:var(--accent-lt);
    -webkit-mask:url("/assets/img/motif-brosse.webp?v=90c04e89f1") no-repeat center/contain;
    mask:url("/assets/img/motif-brosse.webp?v=90c04e89f1") no-repeat center/contain;
  }

  /* --- lavis large derriere le bloc de signature.
     Tres bas en opacite : il donne de la matiere au fond sans se lire
     comme un objet pose sur la page. */
  .signature{position:relative}
  .signature::before{
    content:"";
    position:absolute;
    top:-4%;right:-6%;
    width:min(560px,72vw);
    aspect-ratio:1.423;
    background-color:var(--accent);
    opacity:.085;
    transform:rotate(-6deg);
    pointer-events:none;
    -webkit-mask:url("/assets/img/motif-brosse.webp?v=90c04e89f1") no-repeat center/contain;
    mask:url("/assets/img/motif-brosse.webp?v=90c04e89f1") no-repeat center/contain;
  }
  .signature .wrap{position:relative}

  /* --- accent dans l'angle de la carte d'inscription, rogne par l'angle. */
  .nl-card{position:relative;overflow:hidden}
  .nl-card::after{
    content:"";
    position:absolute;
    right:-34px;bottom:-30px;
    width:190px;
    aspect-ratio:1.423;
    background-color:var(--accent-lt);
    opacity:.13;
    transform:rotate(8deg);
    pointer-events:none;
    -webkit-mask:url("/assets/img/motif-brosse.webp?v=90c04e89f1") no-repeat center/contain;
    mask:url("/assets/img/motif-brosse.webp?v=90c04e89f1") no-repeat center/contain;
  }
  .nl-card>*{position:relative}

  @media (min-width:900px){
    .section-head::before{width:88px}
  }
}

/* ------------------------------------------------------------ bandeau large
   Photo pleine largeur en tete de page. Le rapport 3:1 est impose en CSS :
   sans lui, une image legerement hors format ferait bouger la mise en page
   pendant le chargement. */
.bandeau-large{margin:0 0 clamp(2rem,5vw,3.2rem)}
.bandeau-large img{
  width:100%;aspect-ratio:3/1;object-fit:cover;
  border-radius:var(--radius-lg);
  display:block;
}
@media (max-width:640px){
  /* En 3:1 sur un telephone, la bande fait 120 px de haut et ne montre plus
     rien. On resserre le cadrage plutot que de reduire encore la hauteur. */
  .bandeau-large img{aspect-ratio:2/1}
}

/* ------------------------------------------------------------ portrait de la
   section d'inscription. Purement illustratif : masque sous 900 px, ou la
   colonne de texte occupe deja toute la largeur et ou une image de plus
   allongerait le defilement sans rien apporter. */
.nl-portrait{display:none}
@media (min-width:900px){
  .nl-portrait{
    display:block;
    width:260px;height:260px;
    margin-top:1.8rem;
    border-radius:var(--radius-lg);
    object-fit:cover;
    box-shadow:var(--shadow-sm);
  }
}

/* ------------------------------------------------------------ texture du
   bandeau d'appel a l'action. Posee sous du texte blanc, donc tres basse en
   opacite : au-dela, le contraste du texte se degrade. */
.cta-band{position:relative;overflow:hidden;isolation:isolate}
.cta-band::before{
  content:"";
  position:absolute;inset:0;
  background:url("/assets/img/visuel-texture.webp?v=c6caaad7c3") center/cover no-repeat;
  opacity:.28;
  mix-blend-mode:luminosity;
  z-index:-1;
  pointer-events:none;
}

/* ------------------------------------------------------------ page guide */
.guide-tete{padding-bottom:0}
.guide-couverture{margin:clamp(1.6rem,4vw,2.6rem) 0 0}
.guide-couverture img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius-lg);display:block;
}
@media (max-width:640px){.guide-couverture img{aspect-ratio:4/3}}

.guide-bloc{margin-bottom:clamp(2.4rem,6vw,3.6rem)}
.guide-bloc:last-child{margin-bottom:0}
.guide-bloc h2{margin-bottom:.7em}
.guide-bloc p{max-width:68ch}
/* Le gras porte le sens dans ce texte : il annonce le critere ou la consigne.
   On l'appuie a l'accent plutot que de le laisser se fondre dans le corps. */
.guide-bloc strong{color:var(--brand-600)}

.guide-figure{
  margin:clamp(1.4rem,4vw,2.2rem) 0 0;
  /* Les schemas font 1240 px de large : on les laisse deborder de la colonne
     de lecture, qui est volontairement etroite pour le confort du texte. */
  margin-inline:calc(-1*clamp(0rem,4vw,3.2rem));
}
.guide-figure img{
  width:100%;border-radius:var(--radius);display:block;
  border:1px solid var(--sand-dk);
}
.nl-apercu{margin:.2rem 0 0}
.nl-apercu a{color:var(--accent);font-weight:700;font-family:var(--font-display)}

/* ------------------------------------------------------------ le miel à l'œuvre
   Règle d'emploi : l'ambre est réservé au bouton Amazon, c'est le seul appel à
   l'action. Le miel prend tout le reste du registre jaune — durée, conseil,
   mise en garde — sans jamais entrer en concurrence avec lui. */

/* La dernière puce d'une fiche produit porte la durée : elle passe au miel,
   les autres restent prune. Le lecteur distingue « ce que c'est » de
   « combien de temps ça dure » sans avoir à lire. */
.chips li:last-child{background:var(--honey-pale);color:var(--honey-dk)}

/* Encadré de conseil, pendant jaune du fond prune pâle. */
.encadre{
  background:var(--honey-pale);
  border-left:4px solid var(--honey);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  margin:1.6rem 0;
}
.encadre p:last-child{margin-bottom:0}
.encadre .encadre-titre{
  font-family:var(--font-display);font-weight:700;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--honey-dk);margin:0 0 .4rem;
}

/* Bouton secondaire miel — surface, donc texte anthracite. */
.btn-miel{background:var(--honey);color:var(--ink)}
.btn-miel:hover{background:var(--honey-dk);color:var(--ink)}

/* Le surtitre de la section histoire passait à l'ambre, qui appartient
   désormais au seul bouton Amazon. */
.section-story .eyebrow{color:var(--honey-dk)}

/* ------------------------------------------------------------ animations
   Trois règles que je me suis fixées, parce qu'une animation mal posée coûte
   plus qu'elle ne rapporte :

   1. Rien qui décale la mise en page. On n'anime que `opacity` et `transform`,
      les deux seules propriétés que le navigateur compose sans recalculer le
      document. Pas de `height`, pas de `margin`.
   2. Rien qui retarde la lecture. Les apparitions durent 500 ms au plus et le
      contenu est visible AVANT l'animation si le JavaScript ne s'exécute pas —
      voir `.js` plus bas : sans lui, tout reste affiché.
   3. Rien qui s'impose. `prefers-reduced-motion` coupe tout, sans exception.  */

/* Le contenu n'est masqué QUE si le JavaScript a pris la main. Sans script,
   ou s'il échoue, la page reste entièrement lisible — jamais de page blanche
   à cause d'une animation. */
.js .anim{opacity:0;transform:translateY(14px)}
.js .anim.vu{
  opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),
             transform .5s cubic-bezier(.22,.61,.36,1);
}
/* Décalage en cascade dans une grille : l'œil suit, au lieu de tout recevoir
   d'un bloc. Quatre paliers suffisent, au-delà l'attente devient sensible. */
.js .anim:nth-child(2){transition-delay:.07s}
.js .anim:nth-child(3){transition-delay:.14s}
.js .anim:nth-child(4){transition-delay:.21s}
.js .anim:nth-child(n+5){transition-delay:.28s}

/* --- survols. Le mouvement reste sous 4 px : au-delà, ça fait gadget. */
.card{transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-media img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-media img{transform:scale(1.04)}

.btn{will-change:transform}
.btn-amazon:hover,.btn-miel:hover{transform:translateY(-2px)}

.feature{transition:transform .25s ease}
.feature:hover{transform:translateY(-3px)}

/* Le chevron du dépliant FAQ tourne au lieu de sauter. */
.faq-item summary::after{transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(180deg)}

/* Le motif de brosse des surtitres arrive avec un léger retard sur le titre :
   il ponctue, il n'annonce pas. */
.js .anim.vu .section-head::before,
.js .section-head.anim.vu::before{animation:motif .6s .15s both cubic-bezier(.22,.61,.36,1)}
@keyframes motif{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* --- la règle qui prime sur tout le reste */
@media (prefers-reduced-motion:reduce){
  .js .anim,.js .anim.vu{opacity:1;transform:none;transition:none;animation:none}
  .card:hover,.feature:hover,.btn-amazon:hover,.btn-miel:hover{transform:none}
  .card:hover .card-media img{transform:none}
  .js .anim.vu .section-head::before{animation:none}
}

/* ------------------------------------------------------------ photos produit
   Origine, usage, galerie — le même triptyque sur les cinq fiches. */

.produit-origine{display:grid;gap:1.8rem;align-items:center}
@media (min-width:900px){
  .produit-origine{grid-template-columns:1.1fr .9fr;gap:3rem}
}
.produit-origine-media{margin:0}
.produit-origine-media img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius-lg);display:block;
}

.produit-usage{margin:1.2rem 0 0}
.produit-usage img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-lg);display:block;
}
@media (min-width:820px){.produit-usage img{aspect-ratio:16/10}}

/* Les packshots sont sur fond blanc. Posés sur le crème du site ils
   flotteraient : on leur donne un fond blanc franc et un coin arrondi, ce qui
   les pose au lieu de les laisser en suspension. */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.4rem}
@media (min-width:700px){.packs{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.pack{
  margin:0;background:#fff;border:1px solid var(--sand-dk);
  border-radius:var(--radius);overflow:hidden;
}
.pack img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}

/* Agrandissement discret au survol — seulement sur les packshots, où le fond
   uni absorbe le mouvement. Sur une photo de chien, ce serait du gadget. */
.pack img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.pack:hover img{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .pack:hover img{transform:none}
}

/* ------------------------------------------------------------ photos clients
   Le mur « ils l'adoptent ». Volontairement plus dense que la galerie
   packshot : ce sont des scènes, pas des objets à examiner. */
.clients{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:1.4rem}
@media (min-width:700px){.clients{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
@media (min-width:1000px){.clients{grid-template-columns:repeat(5,1fr)}}
.client{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.client img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.client:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.client:hover img{transform:none}}

/* Maillage des guides par matiere */
.grille-guides{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.carte-guide{display:block;height:100%;padding:1.05rem 1.15rem;background:#fff;
  border:1px solid var(--sand-dk);border-radius:var(--radius);text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.carte-guide:hover,.carte-guide:focus-visible{border-color:var(--brand-600);
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(43,39,35,.09)}
.cg-t{display:block;font-weight:700;color:var(--brand-600);line-height:1.32}
.cg-d{display:block;margin-top:.3rem;font-size:.86rem;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.carte-guide{transition:none}
  .carte-guide:hover,.carte-guide:focus-visible{transform:none}}


/* ============ Accueil, bandes pastel et heros photo ============
   Les bandes ne sont plus sombres : sauge, rose et miel portent le rythme,
   avec du texte fonce. Seul le heros reste un ilot sombre — un titre blanc
   sur photo assombrie, qui fonctionne parce qu'il est unique dans la page. */

/* --- heros photo : ilot sombre --- */
.hero-plein{position:relative;min-height:min(78vh,640px);display:flex;align-items:flex-end;
  background:var(--sauge-dk);overflow:hidden}
.hero-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0}
.hero-plein::after,.tete-photo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(28,25,22,0) 0%,rgba(28,25,22,.34) 42%,rgba(28,25,22,.68) 100%)}
.hero-plein-inner,.tete-photo-inner{position:relative;z-index:2}
.hero-plein-inner{padding-top:clamp(5rem,14vh,9rem);padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.hero-plein .eyebrow{color:#f3d99b}
.hero-plein h1{color:#fff;max-width:17ch}
.hero-plein .lead{color:#eee8e4;max-width:54ch}
.hero-pastilles{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0;padding:0}
.hero-pastilles li{background:rgba(28,25,22,.6);border:1px solid rgba(251,249,248,.42);
  color:#fff;padding:.45rem 1rem;border-radius:999px;font-size:.84rem;font-weight:700;
  backdrop-filter:blur(3px)}
.hero-plein .hero-actions{margin-top:1.8rem}
.btn-ligne{border:1.5px solid rgba(251,249,248,.55);color:#fff;background:transparent}
.btn-ligne:hover,.btn-ligne:focus-visible{background:#fff;color:var(--brand-600);border-color:#fff}

/* --- bandeau d'accueil sans photo ---------------------------------------
   Tout ce qui suit annule le regime « texte blanc sur voile sombre ». Les
   six selecteurs sont solidaires : en oublier un seul laisse un element en
   blanc sur fond clair, et c'est exactement le defaut qui a deja echappe
   trois fois a un balayage de la feuille de style. */
.hero-clair{background:linear-gradient(165deg,var(--sauge) 0%,var(--rose-pale) 62%,var(--cream) 100%);
  align-items:center;min-height:min(64vh,540px)}
.hero-clair::after{display:none}                 /* le voile sombre n'a plus d'objet */
.hero-clair .eyebrow{color:var(--accent)}
.hero-clair h1{color:var(--brand-700)}
.hero-clair .lead{color:#4d3a44}
.hero-clair .hero-pastilles li{background:rgba(255,255,255,.72);border-color:rgba(58,40,51,.22);
  color:var(--brand-600)}
.hero-clair .btn-ligne{border-color:var(--brand-600);color:var(--brand-600)}
.hero-clair .btn-ligne:hover,.hero-clair .btn-ligne:focus-visible{background:var(--brand-600);
  color:var(--cream);border-color:var(--brand-600)}

/* --- en-tete editorial : meme ilot, plus bas --- */
.tete-photo{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--sauge-dk);min-height:min(58vh,460px)}
.tete-photo .hero-fond{opacity:.44}
.tete-photo-inner{padding-top:clamp(4rem,12vh,7rem);padding-bottom:clamp(2rem,5vh,3.2rem)}
.tete-photo .eyebrow{color:#f3d99b}
.tete-photo h1{color:#fff}
.tete-photo .lead{color:#eee8e4}
.tete-photo + .section{padding-top:clamp(2.5rem,6vw,4rem)}

/* --- bande sauge : produits --- */
.section-sombre{background:var(--sauge);color:var(--ink)}
.section-sombre h1,.section-sombre h2,.section-sombre h3,.section-sombre h4{color:var(--brand-600)}
.section-sombre .lead,.section-sombre p{color:#4d3a44}
.section-sombre .eyebrow{color:var(--accent)}
.cartes-flottantes .card{background:rgba(255,255,255,.66);border:1px solid rgba(58,40,51,.14)}
.cartes-flottantes .card:hover{border-color:var(--accent)}
.cartes-flottantes .card-media{background:transparent}
.cartes-flottantes .card-media img{filter:drop-shadow(0 14px 22px rgba(58,40,51,.22))}
.cartes-flottantes .card-body h3 a{color:var(--brand-600)}
.cartes-flottantes .card-tag{color:var(--accent)}
.cartes-flottantes .chips li{background:#fff;border:1px solid rgba(58,40,51,.16);color:var(--ink)}
.cartes-flottantes .chips li:last-child{background:var(--honey);border-color:transparent;color:var(--ink)}
.section-sombre .btn-outline,.cartes-flottantes .btn-outline,.tete-photo .btn-outline{
  color:var(--brand-600);border-color:rgba(58,40,51,.45);background:transparent}
.section-sombre .btn-outline:hover,.cartes-flottantes .btn-outline:hover{
  background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.tete-photo .btn-outline,.tete-photo .btn-ligne{color:#fff;border-color:rgba(251,249,248,.55)}
.btn-creme{background:var(--accent);color:#fff}
.btn-creme:hover,.btn-creme:focus-visible{background:#6b3049;color:#fff}

/* --- bande miel : les chiffres, le bloc le plus vivant --- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:rgba(58,40,51,.14);border-radius:var(--radius);overflow:hidden;margin:2.6rem 0 0}
.chiffre{background:var(--honey-pale);padding:1.6rem 1.2rem;text-align:center}
.chiffre b{display:block;font-size:2.3rem;line-height:1;color:var(--accent);font-weight:700}
.chiffre span{display:block;margin-top:.5rem;font-size:.88rem;color:#4d3a44}

/* --- fiches produit : bande sauge --- */
.product-hero{background:var(--sauge);color:var(--ink);
  padding-block:clamp(2.5rem,6vw,4rem) clamp(2.5rem,7vw,4.5rem)}
.product-hero h1{color:var(--brand-600)}
.product-hero .lead{color:#4d3a44}
.product-hero .eyebrow{color:var(--accent)}
.product-hero .micro{color:#5f4c56}
.product-media{background:transparent;border:0;box-shadow:none;padding:0}
.product-media img{border-radius:0;filter:drop-shadow(0 18px 28px rgba(58,40,51,.26))}
.product-hero .ticks.big li{color:var(--ink)}
.product-hero .ticks li::before{color:var(--accent)}
.product-hero + .section{padding-top:clamp(2.5rem,6vw,4rem)}

/* --- recit : bande miel pale --- */
.section-story{background:var(--honey-pale);color:var(--ink)}
.section-story .eyebrow{color:var(--accent)}
.site-footer .btn-amazon,.site-footer .btn-amazon:hover{color:var(--ink)}

@media (max-width:700px){.hero-plein,.tete-photo{min-height:auto}.hero-plein h1{max-width:none}}
@media (prefers-reduced-motion:reduce){.cartes-flottantes .card{transition:none}}

/* Les sections alternees prennent le rose : sans cela il ne vivrait que dans
   les pastilles, et la troisieme couleur ne servirait a rien. */
.section-alt{background:var(--rose-pale)}
/* La bande d'appel finale prend le prune — c'est la couleur des actions. */
.cta-band{background:var(--accent);color:#fff}
.cta-band p{color:#f6e3ea}
.cta-band .btn-outline{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.cta-band .btn-outline:hover{background:#fff;color:var(--accent);border-color:#fff}

/* Le texte du recit suit sa bande, qui est passee en miel pale. */
.section-story p,.section-story .lead{color:#4d3a44}

/* ---- Diagnostic : quatre questions, une recommandation ---- */
.diag-etape{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin:0 0 .5rem}
.diag-jauge{height:4px;background:var(--sand-dk);border-radius:2px;overflow:hidden;margin:0 0 1.8rem}
.diag-jauge i{display:block;height:100%;background:var(--accent);border-radius:2px;
  transition:width .35s ease}
.diag-titre{margin:0 0 .4rem}
.diag-titre:focus{outline:none}
.diag-titre:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.diag-aide{color:var(--ink-soft);margin:0 0 1.5rem;max-width:58ch}
.diag-options{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.diag-option{display:block;text-align:left;width:100%;padding:1rem 1.15rem;background:#fff;
  border:1px solid var(--sand-dk);border-radius:12px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .18s ease,transform .18s ease}
.diag-option:hover,.diag-option:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.diag-option[aria-pressed="true"]{border-color:var(--accent);background:var(--rose-pale)}
.diag-o-l{display:block;font-weight:700;color:var(--brand-600)}
.diag-o-d{display:block;margin-top:.25rem;font-size:.87rem;color:var(--ink-soft);line-height:1.45}
.diag-retour{margin-top:1.6rem}

.diag-produit{display:grid;grid-template-columns:200px 1fr;gap:1.6rem;align-items:center;
  background:var(--sauge);border-radius:16px;padding:1.5rem;margin:0 0 1.4rem}
.diag-produit.est-principal{background:var(--sauge)}
.diag-produit:not(.est-principal){background:var(--rose-pale)}
.diag-produit img{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(58,40,51,.2))}
.diag-p-corps h3{margin:0 0 .3rem;color:var(--brand-600)}
.diag-taille{margin:0 0 1rem;font-size:1.05rem;color:var(--ink)}
.diag-taille b{color:var(--accent);font-size:1.25rem}
.diag-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:0}
.diag-sous{margin:1.8rem 0 .8rem}
.diag-pourquoi,.diag-avert,.diag-chiot{background:var(--honey-pale);border-radius:12px;
  padding:1.2rem 1.4rem;margin:1.4rem 0}
.diag-avert{background:var(--rose-pale)}
.diag-pourquoi h3,.diag-avert h3{margin:0 0 .6rem;font-size:1.02rem}
.diag-pourquoi ul,.diag-avert ul{margin:0;padding-left:1.1rem}
.diag-pourquoi li,.diag-avert li{margin:.4rem 0}
.diag-note{font-size:.92rem;color:var(--ink-soft);border-left:3px solid var(--accent);
  padding-left:.9rem;margin:0 0 1.4rem;border-radius:0}
.diag-chiot h2{margin-bottom:.6rem}
.diag-chiot p{margin:0 0 .8rem}
@media (max-width:640px){.diag-produit{grid-template-columns:1fr;text-align:center}
  .diag-produit img{max-width:180px;margin:0 auto}.diag-actions{justify-content:center}}
@media (prefers-reduced-motion:reduce){.diag-option,.diag-jauge i{transition:none}
  .diag-option:hover{transform:none}}
.bande-diag{background:var(--sauge)}
.bande-diag h2{color:var(--brand-600)}
.bande-diag .lead{color:#4d3a44;max-width:56ch;margin-left:auto;margin-right:auto}
/* Le questionnaire embarque dans l'accueil : un ilot creme pose sur la bande
   sauge, pour qu'il se lise comme un outil et non comme une section de plus.
   Les cartes de reponse restent blanches — leur bord suffit a les detacher du
   creme, et un blanc sur blanc les aurait effacees. */
/* --- page de liens (bio des reseaux) -------------------------------------
   Pensee pour un pouce sur un ecran de six centimetres : une colonne, des
   cibles hautes, rien d'autre a l'ecran. Le fond reprend le degrade du
   bandeau d'accueil pour que le visiteur venu d'Instagram reconnaisse la
   marque avant d'avoir lu quoi que ce soit. */
.page-liens{min-height:100vh;display:flex;align-items:center;text-align:center;
  background:linear-gradient(165deg,var(--sauge) 0%,var(--rose-pale) 62%,var(--cream) 100%)}
.page-liens img{margin:0 auto 1.8rem}
.liens-maurice{width:150px;height:auto;margin:0 auto .6rem}
/* Maurice sur les pages de comportement : posé, jamais démonstratif. */
.maurice-bloc{margin:2.4rem auto;max-width:620px;text-align:center}
.maurice-bloc img{width:100%;height:auto}
/* --- en-tete : la bande ou la navigation ne tenait pas -------------------
   Entre 1000 px — seuil d'apparition du menu complet — et environ 1400, la
   navigation reclamait 112 px de plus que la place disponible et debordait la
   page de 13 px. Un site qui defile lateralement, meme de 13 px, est un site
   casse : sur mobile ce meme defaut devient une barre horizontale.
   La cause etait `min-width:auto`, la valeur par defaut d'un element flex, qui
   lui interdit de retrecir sous la taille de son contenu. */
@media (min-width:1000px) and (max-width:1400px){
  .header-inner{gap:.5rem}
  .mainnav{gap:.7rem;min-width:0}
  .nav-list{gap:.05rem;font-size:.93rem}
  .nav-extra{gap:.4rem}
}

/* --- avis clients ------------------------------------------------------- */
.avis-liste{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:1rem}
.avis-item{background:var(--cream);border:1px solid rgba(58,40,51,.12);
  border-radius:14px;padding:1.1rem 1.3rem}
.avis-note{margin:0 0 .4rem;color:var(--honey-dk);letter-spacing:.12em}
.avis-texte{margin:0 0 .6rem}
.avis-sig{margin:0;font-weight:700;color:var(--brand-600);font-size:.92rem}
.avis-date{font-weight:400;color:var(--ink-soft)}
.avis-vide{color:var(--ink-soft)}
/* La mention de verification est une obligation legale, pas une note de bas de
   page : elle reste lisible, au-dessus du seuil AA. */
.avis-mention{font-size:.88rem;color:#5c4a54;max-width:70ch;margin:0 0 2rem}
.avis-form-bloc{background:var(--cream);border:1px solid rgba(58,40,51,.12);
  border-radius:18px;padding:clamp(1.2rem,3vw,2rem)}
.avis-form-bloc h3{margin-top:0}
.avis-form label{display:block;font-weight:700;font-size:.92rem;margin:1rem 0 .3rem}
.avis-form input[type=text],.avis-form textarea{width:100%;padding:.7rem .9rem;
  border:1px solid var(--sand-dk);border-radius:10px;font:inherit;background:#fff}
.avis-form textarea{resize:vertical}
.avis-aide{font-size:.84rem;color:var(--ink-soft);margin:.35rem 0 0}
/* Les etoiles : des boutons radio en ordre inverse, pour que le survol et la
   selection colorent l'etoile visee ET toutes celles de gauche. */
.avis-etoiles{border:0;padding:0;margin:0;display:flex;flex-direction:row-reverse;
  justify-content:flex-end;gap:.15rem}
.avis-etoiles legend{font-weight:700;font-size:.92rem;margin-bottom:.3rem;float:left;width:100%}
.avis-etoiles input{position:absolute;opacity:0;width:0;height:0}
.avis-etoiles label{font-size:1.7rem;line-height:1;color:var(--sand-dk);cursor:pointer;
  margin:0;transition:color .12s ease}
.avis-etoiles input:checked ~ label,
.avis-etoiles label:hover,.avis-etoiles label:hover ~ label{color:var(--honey-dk)}
.avis-etoiles input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

/* --- niveau de mastication : la meme echelle partout --- */
.niveau-mastication{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:.2rem 0 .6rem;font-size:.95rem}
.niveau-l{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--accent)}
.niveau-mastication b{color:var(--brand-700)}

/* --- note Amazon sur la fiche produit --- */
.note-amazon{margin:.2rem 0 1rem;font-size:.92rem;color:var(--ink-soft)}
.note-etoile{color:var(--honey-dk);font-size:1.05em}
.note-amazon a{color:var(--accent);text-underline-offset:3px}

/* --- tableau comparatif des matieres ---
   Nos lignes sur fond sauge, les autres matieres sur creme : la lecture se
   fait au premier coup d'oeil, avant meme d'avoir lu une cellule. Le tableau
   est large, il defile dans son propre cadre — la page, elle, ne bouge pas. */
.cmp{min-width:720px}
.cmp thead th{background:var(--brand-600);color:var(--cream);font-size:.86rem;
  letter-spacing:.02em;text-align:left}
.cmp tbody th{text-align:left;font-weight:700;color:var(--brand-700);white-space:nowrap}
.cmp tbody td{font-size:.94rem}
.cmp .cmp-nous{background:var(--sauge)}
.cmp .cmp-nous th{color:var(--brand-700)}
.cmp .cmp-autre{background:var(--cream)}
.cmp .cmp-autre th,.cmp .cmp-autre td{color:#5c4a54}
.cmp-note{max-width:62ch;margin:1.2rem auto 1.6rem;font-size:.92rem;
  color:var(--ink-soft);text-align:center}
@media (max-width:700px){.cmp tbody th{white-space:normal}}

.nl-ok-img{display:block;width:min(230px,100%);height:auto;margin:1rem auto .2rem}
.diag-maurice{width:140px;height:auto;margin:0 auto .4rem;display:block}
.diag-chiot-maurice{width:150px;height:auto;margin:0 auto .6rem;display:block}
.maurice-404{width:min(520px,100%);height:auto;margin:0 auto 1.2rem;display:block}
.liens-mot{font-size:1.05rem;color:var(--brand-700);max-width:34ch;margin:0 auto .4rem;font-style:italic}
.liens-sig{font-size:.86rem;color:var(--accent);font-weight:700;margin:0 0 2.2rem}
.liens-liste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;max-width:26rem;
  margin-inline:auto}
.liens-liste .btn{width:100%;justify-content:center}
.page-liens .btn-outline{border-color:var(--brand-600);color:var(--brand-600);
  background:rgba(255,255,255,.66)}
.page-liens .btn-outline:hover,.page-liens .btn-outline:focus-visible{background:var(--brand-600);
  color:var(--cream)}

.diag-hote{background:var(--cream);border:1px solid rgba(58,40,51,.10);border-radius:18px;
  padding:clamp(1.4rem,4vw,2.6rem);box-shadow:0 10px 30px rgba(58,40,51,.07)}
.bande-diag .diag-hote .diag-titre{color:var(--brand-700)}
.bande-diag .diag-hote .lead{max-width:none;margin-left:0;margin-right:0}

/* Le raccourci des pages conseil : discret, sous le chapo. */
.raccourci{margin:1rem 0 0;font-size:.94rem;color:#eee8e4}
.raccourci a{color:#fff;font-weight:700;text-underline-offset:3px}