/* Câlinou — style commun à toutes les pages.
   Style « Sieste au soleil » (choix de Grégory, 01/11/2026) : chaleureux et doux, une maison plutôt qu'un magasin.
   Couleurs : crème lait #FBF5EC, caramel #D98A4E, terracotta #B5573A, chocolat #3B2A22, sauge #9DB29A.
   Ancienne version (vert et beige) gardée dans chantiers/calinou/site_version_verte_beige/. */
:root{
  --creme:#fbf5ec; --sable:#f3e6d4; --sable-clair:#f7ecdf; --peche:#f6e7d3; --blanc:#ffffff;
  --caramel:#d98a4e; --caramel-clair:#fdf1e4; --terra:#b5573a; --terra-fonce:#97452c;
  --choco:#3b2a22; --encre:#3b2a22; --muted:#6b574b; --line:#ead9c3;
  --sauge:#9db29a; --miel:#f2b84b;
  --f-logo:"Fredoka","Nunito Sans",system-ui,sans-serif;
  --f-titre:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Petite patte caramel, pour les puces des listes */
  --patte:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D98A4E'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.3'/%3E%3Ccircle cx='5.5' cy='10' r='2.3'/%3E%3Ccircle cx='9.8' cy='6' r='2.3'/%3E%3Ccircle cx='14.2' cy='6' r='2.3'/%3E%3Ccircle cx='18.5' cy='10' r='2.3'/%3E%3C/svg%3E");
  /* Le chat qui dort, posé sur le pied de page */
  --dodo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 72' fill='none' stroke='%23D98A4E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 66 C26 66 26 38 52 32 C78 26 110 30 120 50 C124 62 114 66 100 66 Z' fill='%233B2A22'/%3E%3Cpath d='M24 66 C12 66 10 52 20 47 L18 33 L29 41 C33 39 39 39 43 41 L52 33 L50 47 C58 53 54 66 42 66 Z' fill='%233B2A22'/%3E%3Cellipse cx='29' cy='53' rx='2.4' ry='3.3' fill='%23D98A4E' stroke='none'/%3E%3Cellipse cx='41' cy='53' rx='2.4' ry='3.3' fill='%23D98A4E' stroke='none'/%3E%3Cpath d='M100 66 C124 68 132 56 121 52'/%3E%3C/svg%3E");
  /* Les paupières du chat du pied de page : posées par-dessus les yeux ouverts, un court instant (clignement) */
  --dodo-cligne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 72' fill='none' stroke='%23D98A4E' stroke-width='2.4' stroke-linecap='round'%3E%3Cellipse cx='35' cy='53' rx='11' ry='5.5' fill='%233B2A22' stroke='none'/%3E%3Cpath d='M26 53.5 q3 2.5 6 0 M38 53.5 q3 2.5 6 0'/%3E%3C/svg%3E");
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section,h2[id]{scroll-margin-top:130px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--f-body);font-size:16px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
.in{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0;font-family:var(--f-titre);font-weight:700;letter-spacing:-.01em;line-height:1.12}
p{margin:0}
a{color:inherit}

/* Bandeau « brouillon » : à retirer le jour de l'ouverture */
.brouillon{background:var(--miel);color:var(--choco);font-size:13px;font-weight:700;text-align:center;padding:6px 16px}
/* Bandeau d'annonce chocolat */
.annonce{background:var(--choco);color:var(--creme);font-size:13px;font-weight:600;text-align:center;padding:8px 16px}
.annonce b{font-weight:700}

/* En-tête */
header.top{position:sticky;top:0;z-index:20;background:var(--creme);border-bottom:1px solid var(--line)}
header.top .in{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:14px;flex-wrap:wrap}
.logo{font-family:var(--f-logo);font-weight:600;font-size:28px;color:var(--terra);line-height:1;text-decoration:none;display:inline-block;padding-top:6px;letter-spacing:0}
.ear-a{position:relative;display:inline-block}
.ear-a svg{position:absolute;left:50%;top:-.30em;width:.62em;transform:translateX(-50%);overflow:visible}
.ear-a svg path{transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .ear-a svg .l{transform:rotate(-14deg)}
.logo:hover .ear-a svg .r{transform:rotate(14deg)}
nav{display:flex;gap:6px 26px;font-weight:600;font-size:15px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--choco)}
nav a:hover,nav a:focus-visible{color:var(--terra)}
/* Téléphone : le menu tient sur une seule ligne, sous le logo */
@media (max-width:600px){
  header.top .in{padding-block:10px}
  nav{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:8px;font-size:clamp(12px,3.7vw,14px)}
  nav a{white-space:nowrap}
}

/* Boutons : arrondis comme des coussins */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;padding:14px 28px;font:700 16px var(--f-body);cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.btn.main{background:var(--terra);color:#fff}
.btn.main:hover{background:var(--terra-fonce)}
.btn.ghost{background:transparent;color:var(--choco);border:1.5px solid var(--choco)}
.btn.ghost:hover{background:var(--choco);color:var(--creme)}
.btn.small{padding:9px 18px;font-size:14px}
.btn:focus-visible{outline:3px solid var(--miel);outline-offset:2px}

/* Listes avec des pattes à la place des puces */
.inbox ul,.page ul{list-style:none;padding-left:0}
.inbox ul li,.page ul li{position:relative;padding-left:26px}
.inbox ul li::before,.page ul li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:var(--patte) no-repeat center/contain}

/* Pied de page, avec le chat qui dort posé dessus */
footer{background:var(--choco);color:var(--sable);padding-block:56px 110px;margin-top:70px}
footer .in{position:relative;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px}
footer .in::before{content:"";position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:-118px;width:130px;height:67px;background:var(--dodo) no-repeat center/contain}
footer .in::after{content:"";position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:-118px;width:130px;height:67px;background:var(--dodo-cligne) no-repeat center/contain;opacity:0;pointer-events:none;animation:cligne-dodo 3.6s infinite}
@keyframes cligne-dodo{0%,88%,100%{opacity:0}90%,93%{opacity:1}}
footer .logo{color:var(--sable)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .tl{margin-top:12px;color:#d9c6b3;max-width:30ch}
footer .bientot{color:#a8968a}

/* Pages de texte (contact, conditions de vente…) */
.page{padding-block:56px 40px}
.page .in{max-width:780px}
.page h1{font-size:clamp(32px,4.4vw,46px);line-height:1.1}
.page h2{font-size:22px;margin-top:40px}
.page p,.page li{margin-top:10px}
.page .lead{color:var(--muted);font-size:17px;margin-top:12px}
.page ol{padding-left:22px;margin:0}
.carte{background:var(--blanc);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-top:20px}
.verif{background:#fbe7b5;border-radius:3px;padding:0 4px;font-weight:600}

/* Animations douces (01/11/2026) : les blocs glissent un peu vers le haut en apparaissant,
   une petite patte se pose à côté des grands titres. Seulement opacité et position : très léger pour le téléphone.
   Classe js-anim posée dans <head>, retirée au bout de 3 s si anim.js ne se charge pas. */
.block h2::after{content:"";display:inline-block;width:.55em;height:.55em;margin-left:.3em;vertical-align:.02em;background:var(--patte) no-repeat center/contain;transform:rotate(-12deg)}
@media (prefers-reduced-motion:no-preference){
  .js-anim :is(.block h2,.card,.cmp-wrap,.reviews,.faq details,.trust .in > div,.gallery,.p-info,.page .in > *){transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:var(--delai,0ms)}
  .js-anim :is(.block h2,.card,.cmp-wrap,.reviews,.faq details,.trust .in > div,.gallery,.p-info,.page .in > *):not(.vu){opacity:0;transform:translateY(18px)}
  .js-anim .block h2::after{opacity:0;transform:scale(.3) rotate(-35deg);transition:opacity .4s ease-out,transform .55s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--delai,0ms) + 450ms)}
  .js-anim .block h2.vu::after{opacity:1;transform:scale(1) rotate(-12deg)}
}

/* Reflets de lumière sur les cadres (01/11/2026, idée prise sur boutiqueia.pages.dev, refaite en crème et miel) :
   un reflet fixe en haut à gauche comme du verre, une petite lueur miel sur le bord en haut à droite,
   et de temps en temps un éclat qui traverse le cadre (plus vite au survol). Le calque <span class="reflet"> est ajouté par anim.js.
   Seuls l'opacité et le déplacement bougent : très léger pour le téléphone. */
.hero .photo,.cadre-photo{position:relative;border-radius:28px}
.cadre-photo{border-radius:24px}
.card,.offer{position:relative}
.offer{overflow:hidden}
.reflet{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;overflow:hidden;opacity:.85;transition:opacity .3s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  background:radial-gradient(75% 60% at 100% 0%,rgba(242,184,75,.10),transparent 60%),radial-gradient(120% 65% at 0% 0%,rgba(255,252,245,.30),transparent 55%)}
.reflet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(215deg,rgba(242,184,75,.75),rgba(217,138,78,.25) 15%,transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.reflet::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;opacity:0;transform:skewX(-20deg) translateX(0);
  background:linear-gradient(90deg,transparent,rgba(255,240,215,.16) 30%,rgba(255,236,200,.42) 50%,rgba(255,240,215,.16) 70%,transparent)}
:hover > .reflet{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .reflet::after{animation:eclat var(--gd,9s) ease-in-out var(--gw,0s) infinite}
  :hover > .reflet::after{animation-duration:2.4s}
  @keyframes eclat{0%,72%{opacity:0;transform:skewX(-20deg) translateX(0)}74%{opacity:1}96%{opacity:1}100%{opacity:0;transform:skewX(-20deg) translateX(420%)}}
}

/* Menu burger sur téléphone (01/11/2026, demande de Grégory) : 3 traits en haut à droite,
   menu en plein écran qui s'ouvre en douceur, avec le petit chat qui cligne. Sur ordinateur : menu normal.
   Seulement si anim.js est chargé (classe js-anim) ; sinon le menu reste sur une ligne. */
.burger,.menu-chat{display:none}
@media (max-width:700px){
  .js-anim header.top{z-index:30}
  .js-anim header.top .logo{position:relative;z-index:2}
  .js-anim .burger{display:inline-flex;position:relative;z-index:2;width:44px;height:44px;margin-right:-8px;border:0;border-radius:12px;background:transparent;color:var(--choco);cursor:pointer;align-items:center;justify-content:center}
  .js-anim .burger:focus-visible{outline:3px solid var(--miel)}
  .js-anim .burger span{position:absolute;left:11px;right:11px;height:2.4px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .2s}
  .js-anim .burger span:nth-child(1){transform:translateY(-7px)}
  .js-anim .burger span:nth-child(3){transform:translateY(7px)}
  .js-anim .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
  .js-anim .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .js-anim .burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
  .js-anim header.top nav{position:fixed;inset:0;z-index:1;width:auto;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:4px;
    padding:96px 32px 150px;font-family:var(--f-titre);font-size:34px;font-weight:700;letter-spacing:-.01em;
    background:radial-gradient(circle at 88% 8%,rgba(242,184,75,.32),transparent 45%),var(--creme);
    opacity:0;visibility:hidden;transform:translateY(-14px);
    transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.3,1),visibility 0s linear .45s}
  .js-anim header.top nav.ouvert{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.3,1),visibility 0s}
  .js-anim header.top nav a{padding:8px 0;white-space:normal;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1),color .15s}
  .js-anim header.top nav.ouvert a{opacity:1;transform:none}
  .js-anim header.top nav.ouvert a:nth-child(1){transition-delay:.08s}
  .js-anim header.top nav.ouvert a:nth-child(2){transition-delay:.14s}
  .js-anim header.top nav.ouvert a:nth-child(3){transition-delay:.20s}
  .js-anim header.top nav.ouvert a:nth-child(4){transition-delay:.26s}
  .js-anim header.top nav a[aria-current="page"]{color:var(--terra)}
  .js-anim header.top nav a:focus-visible{outline:3px solid var(--miel);outline-offset:4px;border-radius:6px}
  .js-anim .menu-chat{display:block;position:absolute;left:32px;bottom:44px;width:150px;height:77px;background:var(--dodo) no-repeat center/contain;opacity:0;transition:opacity .5s ease .3s}
  .js-anim nav.ouvert .menu-chat{opacity:1}
  .js-anim .menu-chat::after{content:"";position:absolute;inset:0;background:var(--dodo-cligne) no-repeat center/contain;opacity:0;animation:cligne-dodo 3.2s infinite}
  html.menu-ouvert{overflow:hidden}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .js-anim header.top nav,.js-anim header.top nav a,.js-anim .menu-chat,.js-anim .burger span{transition:none!important}
}