@import url("../fonts/fonts.css");

/* =========================================================
   Fleuriste · Nuancier — feuille de style
   Famille photo L (aplat de couleur). Typo Gloock + Schibsted Grotesk.

   PRINCIPE : la page est en papier clair, la COULEUR vit dans des blocs.
   Les quatre gammes ne sont pas un thème décoratif, elles sont la structure
   de données du site. Changer de gamme change --teinte, --teinte-clair,
   --sur (l’encre lisible PAR-DESSUS la teinte) et les images.
   ========================================================= */

:root{
  color-scheme: light;

  --papier:#FBFAF7;
  --papier-2:#F3F1EB;
  --encre:#17161A;
  --gris:#5E5B57;
  --trait:#E2DED6;
  --blanc:#FFFFFF;

  /* gamme par défaut : fuchsia. Redéfinie par [data-gamme] plus bas. */
  --teinte:#D6246E;
  --teinte-clair:#FCE7F0;
  --sur:#FFFFFF;          /* encre posée SUR --teinte, contraste vérifié */

  --serif:"Gloock", "Times New Roman", Georgia, serif;
  --sans:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --marge:clamp(1.1rem, 4.5vw, 4.5rem);
  --max:1240px;
  --rythme:clamp(4rem, 9vw, 7.5rem);
  --rayon:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --duree:.5s;
}

/* --- Les quatre gammes ---------------------------------------------------
   Contraste vérifié pour du texte normal (WCAG AA, 4.5:1) :
   fuchsia  #D6246E + blanc  = 4,93:1
   safran   #F2A007 + encre  = 8,34:1
   corail   #F26B4E + encre  = 5,95:1
   acide    #8FBF3F + encre  = 7,48:1
   D’où une encre BLANCHE sur le fuchsia, et SOMBRE sur les trois autres. */
[data-gamme="fuchsia"]{ --teinte:#D6246E; --teinte-clair:#FCE7F0; --sur:#FFFFFF; }
[data-gamme="safran"] { --teinte:#F2A007; --teinte-clair:#FDF1DC; --sur:#17161A; }
[data-gamme="corail"] { --teinte:#F26B4E; --teinte-clair:#FDEAE4; --sur:#17161A; }
[data-gamme="acide"]  { --teinte:#8FBF3F; --teinte-clair:#F0F7E2; --sur:#17161A; }

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Le halo bleu de Safari au toucher est mis la volontairement (transparent),
     sinon il apparait par defaut sur chaque pastille et chaque carte. */
  -webkit-tap-highlight-color:transparent;
  /* L'entete est collante et haute de 65 px : sans cette reserve, un element
     atteint au clavier (Tab) ou par une ancre se retrouve DERRIERE elle. */
  scroll-padding-top:5.5rem;
}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* la teinte se déplace doucement d’une gamme à l’autre, jamais « all » */
  transition:background-color var(--duree) var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;cursor:pointer}
button,summary,label,[role="button"],select,input[type="submit"]{cursor:pointer}
::selection{background:var(--teinte);color:var(--sur)}

/* --- Focus : une seule règle, aucun outline supprimé sans remplaçant --- */
:focus-visible{
  outline:3px solid var(--encre);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:min(100% - var(--marge)*2, var(--max));margin-inline:auto}
.saut{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--encre);color:var(--papier);padding:.9rem 1.3rem;font-weight:500;
}
.saut:focus{left:.75rem;top:.75rem}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;margin:0;letter-spacing:-.015em;text-wrap:balance}
.display{font-size:clamp(2.6rem, 7.2vw, 5.4rem)}
.h2{font-size:clamp(1.9rem, 4.4vw, 3.2rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.chapeau{font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.55;max-width:52ch}
.gris{color:var(--gris)}

.etiq{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 1rem;display:flex;align-items:center;gap:.6rem;
}
.etiq::before{content:"";width:1.6rem;height:3px;background:var(--teinte);
  transition:background-color var(--duree) var(--ease)}

.tete{max-width:60ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
/* Gloock a une hauteur de ligne tres serree (1.04) : sans ce rappel, le
   chapeau se colle sous le titre et les deux se lisent comme un seul bloc. */
.tete h2 + .chapeau,.tete h1 + .chapeau{margin-top:1.1rem}
.sect{padding-block:var(--rythme)}
.sect--papier{background:var(--papier-2)}
.sect--teinte{background:var(--teinte-clair);transition:background-color var(--duree) var(--ease)}
section[id]{scroll-margin-top:5.5rem}

/* ---------- en-tête ---------- */
.entete{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trait);
  padding-top:env(safe-area-inset-top);
}
.entete .wrap{display:flex;align-items:center;gap:1rem;min-height:64px;flex-wrap:wrap}
.marque{font-family:var(--serif);font-size:1.35rem;letter-spacing:-.02em;margin-right:auto}
.marque b{font-weight:400;color:var(--teinte);transition:color var(--duree) var(--ease)}
/* Navigation mobile : PAS de menu burger. fleuriste-de-saison en a deja un, et
   deux modeles du meme metier qui ouvrent le meme tiroir se ressemblent. Ici le
   menu passe en seconde ligne et defile horizontalement dans SON conteneur. */
.menu{
  display:flex;order:3;width:100%;gap:1.1rem;font-size:.9rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:.6rem;
}
.menu::-webkit-scrollbar{display:none}
.menu a{
  padding:.35rem 0;white-space:nowrap;
  border-bottom:2px solid transparent;transition:border-color .2s var(--ease);
}
.menu a:hover{border-bottom-color:var(--teinte)}
@media (min-width:860px){
  .menu{order:0;width:auto;overflow:visible;padding-bottom:0;gap:1.6rem;font-size:.94rem}
}

/* ---------- LE NUANCIER : le geste du modèle ---------- */
.nuancier{display:flex;gap:.45rem;align-items:center}
.pastille{
  appearance:none;border:0;background:none;padding:0;
  /* La CIBLE fait 44 px (le minimum tactile), la PASTILLE visible en fait 30.
     Une pastille de 30 px de cote se rate au pouce une fois sur trois. */
  width:44px;height:44px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  touch-action:manipulation;
}
.pastille::after{
  content:"";width:30px;height:30px;border-radius:50%;
  background:var(--pastille);
  border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12);
  transition:transform .22s var(--ease),border-color .22s var(--ease),
             box-shadow .22s var(--ease);
}
.pastille:hover::after{transform:scale(1.14)}
.pastille[aria-checked="true"]::after{box-shadow:0 0 0 2px var(--encre);transform:scale(1.14)}

/* les grandes cartes de la section nuancier */
.gammes{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1.1rem}
.gamme{
  appearance:none;text-align:left;font:inherit;color:inherit;
  background:var(--papier);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:1.4rem;display:flex;flex-direction:column;gap:.85rem;
  touch-action:manipulation;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.gamme:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgb(23 22 26 / .09)}
.gamme[aria-checked="true"]{border-color:var(--encre);box-shadow:0 0 0 2px var(--encre)}
.gamme .teintes{display:flex;gap:.4rem}
.gamme .teintes i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1)}
.gamme h3{font-size:1.45rem}
.gamme .mois{
  font-size:.78rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);font-variant-numeric:tabular-nums;
}
.gamme p{font-size:.94rem;color:var(--gris);margin:0}

/* ---------- bandeau ---------- */
.bandeau{display:grid;grid-template-columns:1fr;align-items:stretch}
@media (min-width:900px){ .bandeau{grid-template-columns:1fr 1fr} }
.bandeau .texte{
  background:var(--teinte);color:var(--sur);
  padding:clamp(2.4rem,6vw,5rem) var(--marge);
  padding-left:max(var(--marge), env(safe-area-inset-left));
  padding-right:max(var(--marge), env(safe-area-inset-right));
  display:flex;flex-direction:column;justify-content:center;gap:1.3rem;
  transition:background-color var(--duree) var(--ease),color var(--duree) var(--ease);
}
.bandeau .texte .etiq::before{background:currentColor}
.bandeau figure{margin:0}
.bandeau img{width:100%;height:100%;object-fit:cover;min-height:clamp(260px,46vw,520px);
  /* la couleur du panneau met --duree a changer ; sans ce fondu l'image, elle,
     bascule d'un coup et on voit un panneau fuchsia a cote d'une photo verte. */
  transition:opacity var(--duree) var(--ease)}

.bouton{
  display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  background:var(--encre);color:var(--papier);
  padding:.95rem 1.6rem;border-radius:999px;border:2px solid var(--encre);
  font:inherit;font-weight:500;touch-action:manipulation;
  transition:background-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);
}
.bouton:hover{background:transparent;color:var(--encre);transform:translateY(-2px)}
.bandeau .bouton:hover{color:var(--sur);border-color:currentColor}

/* ---------- phrase de qualification ---------- */
.phrase{padding-block:clamp(3rem,7vw,5.5rem);text-align:center}
.phrase p{
  font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.22;
  max-width:24ch;margin-inline:auto;text-wrap:balance;
}
.phrase em{font-style:normal;color:var(--teinte);transition:color var(--duree) var(--ease)}

/* ---------- le même bouquet, quatre fois ---------- */
.quatre{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media (min-width:760px){ .quatre{grid-template-columns:repeat(4,1fr)} }
.quatre figure{margin:0;position:relative;border-radius:var(--rayon);overflow:hidden;
  transition:box-shadow .3s var(--ease)}
.quatre img{width:100%;aspect-ratio:3/4;object-fit:cover}
.quatre figcaption{
  position:absolute;left:.7rem;bottom:.7rem;
  background:var(--papier);color:var(--encre);
  padding:.35rem .75rem;border-radius:999px;
  font-size:.76rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.quatre .actif{box-shadow:0 0 0 3px var(--encre)}

/* ---------- ce que la couleur coûte ---------- */
.cout{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:820px){ .cout{grid-template-columns:repeat(3,1fr)} }
.cout article{display:flex;flex-direction:column;gap:.85rem}
.cout img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rayon)}
.cout .barre{display:flex;gap:.28rem}
.cout .barre i{height:6px;flex:1;border-radius:3px;background:var(--trait)}
.cout .barre i.on{background:var(--teinte);transition:background-color var(--duree) var(--ease)}
.cout h3{font-size:1.35rem}
.cout p{font-size:.96rem;color:var(--gris);margin:0}

/* ---------- postes ---------- */
.postes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--trait);
  border:1px solid var(--trait);border-radius:var(--rayon);overflow:hidden}
@media (min-width:700px){ .postes{grid-template-columns:repeat(2,1fr)} }
.poste{background:var(--papier);padding:1.6rem;display:flex;gap:1.1rem;align-items:flex-start}
.poste .num{
  font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--teinte);
  min-width:2ch;font-variant-numeric:tabular-nums;
  transition:color var(--duree) var(--ease);
}
.poste h3{font-size:1.12rem;margin-bottom:.35rem;font-family:var(--sans);font-weight:700;letter-spacing:0}
.poste p{font-size:.94rem;color:var(--gris);margin:0}
.poste .txt{min-width:0}

/* ---------- déroulé ---------- */
.deroule{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:900px){ .deroule{grid-template-columns:1.1fr 1fr} }
.deroule img{width:100%;border-radius:var(--rayon)}
.etapes{list-style:none;margin:0;padding:0;counter-reset:e}
.etapes li{
  counter-increment:e;padding:1.1rem 0 1.1rem 3.4rem;position:relative;
  border-bottom:1px solid var(--trait);
}
.etapes li:last-child{border-bottom:0}
.etapes li::before{
  content:counter(e);position:absolute;left:0;top:1.05rem;
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--teinte);color:var(--sur);
  display:grid;place-items:center;font-size:.9rem;font-weight:700;
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  transition:background-color var(--duree) var(--ease),color var(--duree) var(--ease);
}
.etapes b{display:block;font-weight:700;margin-bottom:.15rem}
.etapes span{color:var(--gris);font-size:.95rem}

/* ---------- l’emplacement des vraies photos ---------- */
.emplacement{
  border:2px dashed var(--trait);border-radius:var(--rayon);
  padding:clamp(1.8rem,4vw,3rem);text-align:center;
}
.emplacement p{max-width:58ch;margin-inline:auto;color:var(--gris)}

/* ---------- questions ---------- */
.faq{max-width:78ch}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{
  padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-weight:500;font-size:1.05rem;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;
  width:11px;height:11px;margin-top:-8px;
  border-right:2px solid var(--teinte);border-bottom:2px solid var(--teinte);
  transform:rotate(45deg);
  transition:transform .25s var(--ease),border-color var(--duree) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .rep{padding:0 0 1.35rem;color:var(--gris);max-width:66ch}

/* ---------- formulaire ---------- */
.form{display:grid;grid-template-columns:1fr;gap:1.1rem;max-width:660px}
@media (min-width:620px){ .form{grid-template-columns:1fr 1fr} }
.ch{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.ch--large{grid-column:1/-1}
.ch label{font-size:.85rem;font-weight:500;letter-spacing:.04em}
.ch input,.ch select,.ch textarea{
  font:inherit;color:var(--encre);background-color:var(--papier);
  border:1px solid var(--trait);border-radius:8px;padding:.8rem .9rem;
  width:100%;min-width:0;
  transition:border-color .2s var(--ease);
}
.ch input:hover,.ch select:hover,.ch textarea:hover{border-color:var(--gris)}
.ch .err{font-size:.85rem;color:#A5170F;min-height:1.2em}
.ch [aria-invalid="true"]{border-color:#A5170F}
.form .bouton{grid-column:1/-1}
.ok{
  grid-column:1/-1;background:var(--teinte);color:var(--sur);
  padding:1.1rem 1.3rem;border-radius:var(--rayon);font-weight:500;
  transition:background-color var(--duree) var(--ease),color var(--duree) var(--ease);
}

/* ---------- pied ---------- */
.pied{background:var(--encre);color:var(--papier);padding-block:clamp(2.6rem,6vw,4rem)}
.pied .wrap{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:760px){ .pied .wrap{grid-template-columns:1.4fr 1fr 1fr} }
.pied h2{font-size:1.3rem;margin-bottom:.5rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.95rem}
.pied a:hover{text-decoration:underline}
.pied .fin{grid-column:1/-1;border-top:1px solid rgb(251 250 247 / .18);
  padding-top:1.2rem;font-size:.85rem;opacity:.74}

/* ---------- apparition au défilement ----------
   opacity + transform UNIQUEMENT (propriétés de compositeur).
   ⚠️ Jamais de clip-path ici : un reveal en clip-path qui ne se déclenche pas
   laisse l’élément invisible pour toujours. Ici, au pire, il reste visible. */
[data-r]{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
[data-r].vu{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-r]{opacity:1;transform:none}
  .pastille:hover,.gamme:hover,.bouton:hover{transform:none}
}