/* ==========================================================================
   FAWASS — Couche de refonte UX/UI
   Chargée APRÈS style.css. N'écrase que ce qui doit l'être.
   Direction artistique conservée : orange #ff6029 (FAWA) + bleu #3048ff (SS).
   Principe : les emballages portent la couleur, le chrome du site se tait.
   ========================================================================== */

:root {
  /* --- Marque (inchangé) --- */
  --fw-orange: #ff6029;
  --fw-orange-dark: #e04a17;
  --fw-blue: #3048ff;
  --fw-blue-dark: #1f33cc;

  /* --- Neutres --- */
  --fw-ink: #1b1d21;
  --fw-ink-soft: #5b6068;
  --fw-paper: #ffffff;
  --fw-shelf: #f5f3f0;
  --fw-rule: #e4e0da;

  /* --- Couleurs de gamme, relevées sur les emballages réels --- */
  --fw-cookzen: #f2b705;
  --fw-nice: #17a67b;
  --fw-girl: #e9508c;
  --fw-baby: #4fa8dc;
  --fw-egnowou: #6fc02c;
  --fw-coton: #7a8ca8;
  --fw-pagne: #c8452f;

  /* --- Rythme --- */
  --fw-radius: 10px;
  --fw-shadow: 0 1px 2px rgba(27, 29, 33, .05), 0 8px 24px -12px rgba(27, 29, 33, .18);
  --fw-shadow-lift: 0 2px 4px rgba(27, 29, 33, .06), 0 18px 40px -16px rgba(27, 29, 33, .28);
  --fw-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   1. CORRECTIF BLOQUANT — débordement horizontal
   La cause racine est traitée sur .fw-countries ; ceci est le filet de sécurité
   qui empêche qu'un futur élément large ne casse à nouveau la navigation.
   ========================================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   AUCUNE MARGE HAUTE DANS TOUT LE PROJET
   Tout l'espacement vertical se fait par le bas ou par le padding du bloc
   parent. Cela supprime les marges qui s'effondrent entre elles et rend
   l'espacement prévisible partout.
   ========================================================================== */
* {
  margin-top: 0;
}

/* Le contenu démarre directement sous l'en-tête ou le fil d'Ariane :
   pas d'espace vide en haut de page. */
#main > *:first-child,
#main > .fw-section:first-child,
.fw-fil + .fw-section {
  padding-top: 0;
}

.fw-fil + .fw-section > .container > .section-title {
  padding-top: 28px;
}

/* ==========================================================================
   2. SOCLE
   ========================================================================== */
body {
  color: var(--fw-ink);
  font-family: "Open Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", "Open Sans", sans-serif;
  color: var(--fw-ink);
  letter-spacing: -.015em;
}

/* Accessibilité : focus clavier visible partout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fw-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Lien d'évitement pour les lecteurs d'écran et la navigation clavier. */
.fw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--fw-ink);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.fw-skip:focus {
  left: 8px;
  top: 8px;
  color: #fff;
}

/* ==========================================================================
   3. TITRES DE SECTION — le changement le plus visible
   Avant : orange, majuscules, soulignés, centrés.
   Après : encre, casse normale, alignés à gauche, filet orange court.
   ========================================================================== */
.section-title {
  text-align: left;
  padding-top: 0;
  padding-bottom: 28px;
  max-width: 640px;
}

.section-title h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.3rem);
  font-weight: 700;
  text-transform: none;
  text-decoration: none;
  color: var(--fw-ink);
  margin-bottom: 14px;
  padding-bottom: 14px;
  position: relative;
  line-height: 1.15;
}

.section-title h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--fw-orange);
  border-radius: 2px;
}

.section-title a,
.section-title a h2 {
  text-decoration: none;
  color: var(--fw-ink);
}

.section-title p {
  color: var(--fw-ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* Espacement homogène entre les grandes sections. */
.fw-section {
  padding: clamp(48px, 6vw, 88px) 0;
}

.fw-section--shelf {
  background: var(--fw-shelf);
}

/* ==========================================================================
   4 bis. DIAPORAMA DU HERO
   Le visuel du hero défile. Sans JavaScript, Swiper n'initialise rien et
   .swiper-wrapper reste un bloc : la première image s'affiche seule, ce qui
   est exactement le comportement d'avant.
   ========================================================================== */
.fw-diapo {
  width: 100%;
  height: 100%;
}

.fw-diapo .swiper-slide {
  overflow: hidden;
}

.fw-diapo .swiper-slide img,
.fw-diapo .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Les points de navigation, posés sur l'image plutôt qu'en dessous. */
.fw-diapo__points.swiper-pagination {
  bottom: 14px;
}

.fw-diapo__points .swiper-pagination-bullet {
  width: 22px;
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, .55);
  opacity: 1;
  transition: background .2s var(--fw-ease);
}

.fw-diapo__points .swiper-pagination-bullet-active {
  background: var(--fw-orange);
}

/* ==========================================================================
   4 ter. BANDE DES PAYS
   Le hero annonce « six pays » ; cette bande le prouve immédiatement, en
   discret, juste sous lui. Pas de titre de section : c'est une preuve
   adossée au hero, pas un chapitre à part entière.
   ========================================================================== */
.fw-bande-pays {
  padding: 18px 0 20px;
  background: var(--fw-shelf);
  border-bottom: 1px solid var(--fw-rule);
}

.fw-bande-pays__intro {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fw-ink-soft);
  text-align: center;
  margin: 0 0 14px;
}

/* ==========================================================================
   5. HERO — la proposition, enfin énoncée
   ========================================================================== */
.fw-hero {
  background:
    radial-gradient(60rem 30rem at 88% -10%, rgba(48, 72, 255, .07), transparent 60%),
    radial-gradient(45rem 26rem at 8% 108%, rgba(255, 96, 41, .07), transparent 62%),
    var(--fw-paper);
  padding: clamp(40px, 5vw, 76px) 0 clamp(44px, 5vw, 80px);
  border-bottom: 1px solid var(--fw-rule);
}

.fw-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

.fw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fw-ink-soft);
  margin-bottom: 18px;
}

.fw-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--fw-orange);
}

.fw-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.35rem);
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 20px;
  letter-spacing: -.03em;
}

.fw-hero h1 .fw-hl {
  color: var(--fw-orange);
}

.fw-hero__lead {
  font-size: clamp(1rem, .95rem + .25vw, 1.14rem);
  line-height: 1.65;
  color: var(--fw-ink-soft);
  max-width: 33em;
  margin-bottom: 28px;
}

.fw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.fw-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s var(--fw-ease), background .18s var(--fw-ease), box-shadow .18s var(--fw-ease);
}

.fw-btn--primary {
  background: var(--fw-orange);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(255, 96, 41, .8);
}

.fw-btn--primary:hover {
  background: var(--fw-orange-dark);
  color: #fff;
  transform: translateY(-2px);
}

.fw-btn--ghost {
  border-color: var(--fw-ink);
  color: var(--fw-ink);
  background: transparent;
}

.fw-btn--ghost:hover {
  background: var(--fw-ink);
  color: #fff;
  transform: translateY(-2px);
}

/* Bandeau de preuve : trois faits, pas trois slogans. */
.fw-proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 34px;
  border-top: 1px solid var(--fw-rule);
  padding-top: 20px;
}

@media (max-width: 480px) {
  .fw-proof {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

.fw-proof__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fw-proof__n {
  font-family: "Poppins", sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--fw-ink);
  line-height: 1;
  letter-spacing: -.02em;
}

.fw-proof__l {
  font-size: .82rem;
  color: var(--fw-ink-soft);
  font-weight: 600;
}

/* Visuel du hero : contenu dans une carte, il ne saigne plus en pleine largeur. */
.fw-hero__media {
  border-radius: var(--fw-radius);
  overflow: hidden;
  box-shadow: var(--fw-shadow-lift);
  aspect-ratio: 4 / 3;
  background: var(--fw-shelf);
}

.fw-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .fw-hero__grid {
    grid-template-columns: 1fr;
  }
  .fw-hero__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================================
   6. LES GAMMES — le rayon
   La couleur vient des emballages photographiés, pas du décor. Le support,
   lui, reste neutre : sept fonds teintés côte à côte se neutralisaient et
   rendaient la page confuse. La couleur de gamme ne subsiste qu'en pastille,
   petite et saturée — un repère, pas un aplat.
   ========================================================================== */
.fw-ranges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fw-range {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 4px;
  border-radius: 14px;
  background: var(--fw-paper);
  border: 1px solid var(--fw-rule);
  transition: transform .22s var(--fw-ease), box-shadow .22s var(--fw-ease),
              border-color .22s var(--fw-ease);
}

.fw-range:hover,
.fw-range:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--fw-shadow-lift);
  border-color: transparent;
}

/* Le médaillon : la photo est posée sur la carte, sur un fond de rayon
   discret qui rattrape les emballages photographiés sur fond blanc. */
.fw-range__media {
  aspect-ratio: 5 / 4;
  border-radius: 9px;
  overflow: hidden;
  background: var(--fw-shelf);
  transition: transform .3s var(--fw-ease);
}

.fw-range:hover .fw-range__media {
  transform: translateY(-3px);
}

.fw-range__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--fw-ease);
}

.fw-range:hover .fw-range__media img {
  transform: scale(1.04);
}

.fw-range__body {
  padding: 15px 5px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 7px;
}

/* Le fait qui intéresse un acheteur : combien de références derrière la
   marque. Neutre — c'est une donnée, pas un accent. */
.fw-range__meta {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fw-ink-soft);
  margin: 0;
}

.fw-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fw-ink-soft);
}

.fw-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fw-accent, var(--fw-orange));
}

/* Le nom de marque est l'objet principal du facing : il porte le poids. */
.fw-range__body h3 {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
}

.fw-range__body p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--fw-ink-soft);
  margin: 0;
}

.fw-range__link {
  margin-top: auto;
  padding-top: 12px;
  font-weight: 700;
  font-size: .92rem;
  /* Un seul bleu pour toutes les actions du site : c'est ce qui rend
     l'ensemble lisible. La couleur de gamme reste sur la pastille. */
  color: var(--fw-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fw-range__link i {
  transition: transform .2s var(--fw-ease);
}

.fw-range:hover .fw-range__link i {
  transform: translateX(4px);
}

/* Toute la carte est cliquable, mais un seul lien reste dans l'ordre de
   tabulation — pas de doublon pour les lecteurs d'écran. */
.fw-range__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Couleurs par gamme. */
.fw-range--cookzen { --fw-accent: var(--fw-cookzen); }
.fw-range--nice    { --fw-accent: var(--fw-nice); }
.fw-range--girl    { --fw-accent: var(--fw-girl); }
.fw-range--baby    { --fw-accent: var(--fw-baby); }
.fw-range--egnowou { --fw-accent: var(--fw-egnowou); }
.fw-range--coton   { --fw-accent: var(--fw-coton); }
.fw-range--pagne   { --fw-accent: var(--fw-pagne); }

/* ==========================================================================
   7. REPRÉSENTATIONS — la correction du bug d'affichage
   Avant : d-flex sans wrap, 6 SVG de 200px = 1200px imposés à la page.
   Après : grille responsive qui descend jusqu'à 2 colonnes.
   ========================================================================== */
.fw-countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fw-country {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  background: var(--fw-paper);
  border: 1px solid var(--fw-rule);
  border-radius: var(--fw-radius);
  transition: transform .2s var(--fw-ease), box-shadow .2s var(--fw-ease);
}

.fw-country:hover {
  transform: translateY(-3px);
  box-shadow: var(--fw-shadow);
}

.fw-country img {
  width: 62px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(27, 29, 33, .22);
}

.fw-country span {
  font-size: .9rem;
  font-weight: 600;
  color: var(--fw-ink);
  text-align: center;
}

/* ==========================================================================
   8. SPOTS PUBLICITAIRES
   Un spot annonce une gamme : il en porte la couleur, comme le facing du
   rayon. Le premier est mis en avant, les autres se rangent à côté.
   ========================================================================== */
.fw-spots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}

.fw-spots .fw-spot:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.fw-spot {
  position: relative;
  display: block;
  border-radius: var(--fw-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--fw-ink);
  box-shadow: var(--fw-shadow);
}

/* En vedette, le spot remplit la case que la grille lui donne. */
.fw-spots .fw-spot:first-child {
  aspect-ratio: auto;
}

/* Sur une page d'action, les vidéos sont toutes de même importance : pas de
   vedette, sinon la dernière se retrouve seule sur sa rangée. */
.fw-spots--egal {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: auto;
}

.fw-spots--egal .fw-spot:first-child {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 16 / 10;
}

/* Le nom du spot et la gamme qu'il annonce, lisibles sans survol. */
.fw-spot__texte {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(12, 13, 16, .9), rgba(12, 13, 16, 0));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* La marque est annoncée par une pastille de sa couleur suivie de son nom en
   blanc — même code que la pastille des gammes. La couleur reste un point,
   le texte reste lisible. */
.fw-spot__gamme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.fw-spot__gamme::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fw-accent, var(--fw-orange));
  flex: none;
}

.fw-spot__titre {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.fw-spots .fw-spot:first-child .fw-spot__titre {
  font-size: clamp(1.05rem, .9rem + .6vw, 1.5rem);
}

@media (max-width: 820px) {
  .fw-spots {
    grid-template-columns: 1fr;
  }
  .fw-spots .fw-spot:first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
}

.fw-spot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--fw-ease), opacity .3s var(--fw-ease);
  opacity: .92;
}

.fw-spot:hover img {
  transform: scale(1.05);
  opacity: 1;
}

/* Bouton lecture : indique que c'est une vidéo, pas une photo. */
.fw-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6029'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  transition: transform .22s var(--fw-ease);
}

.fw-spot:hover::after {
  transform: scale(1.1);
}

/* ==========================================================================
   9. APPEL À L'ACTION DISTRIBUTEUR — l'action commerciale qui manquait
   ========================================================================== */
.fw-cta {
  background: var(--fw-ink);
  color: #fff;
  border-radius: var(--fw-radius);
  padding: clamp(32px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 28px;
  align-items: center;
}

/* Exception assumée à la règle « aucune marge haute » posée plus haut.
   Sur l'accueil, l'encart occupe sa propre section : le rembourrage de la
   section suffit. Sur une page de gamme, il suit directement la liste des
   références, dans le même conteneur — sans marge, il s'y colle.
   L'espacement dépend donc de ce qui précède, pas de l'encart lui-même : seul
   le sélecteur de frère adjacent exprime cette condition. On le limite au cas
   où l'encart suit réellement quelque chose. */
* + .fw-cta {
  margin-top: clamp(28px, 4vw, 52px);
}

.fw-cta h2 {
  color: #fff;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2rem);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.2;
}

.fw-cta p {
  color: rgba(255, 255, 255, .74);
  margin: 0;
  line-height: 1.65;
  max-width: 46em;
}

.fw-cta .fw-btn--ghost {
  border-color: #fff;
  color: #fff;
  white-space: nowrap;
}

.fw-cta .fw-btn--ghost:hover {
  background: #fff;
  color: var(--fw-ink);
}

@media (max-width: 800px) {
  .fw-cta {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   10. À PROPOS
   ========================================================================== */
.about .content h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.about .content p {
  text-align: left; /* le justifié créait des rivières illisibles sur mobile */
  color: var(--fw-ink-soft);
  line-height: 1.7;
}

.about .image {
  border-radius: var(--fw-radius);
  min-height: 340px;
}

/* ==========================================================================
   11. CONTACT
   ========================================================================== */
.contact .contact-address,
.contact .contact-phone,
.contact .contact-email {
  background: var(--fw-paper);
  border: 1px solid var(--fw-rule);
  border-radius: var(--fw-radius);
  padding: 26px 22px;
  height: 100%;
  transition: box-shadow .2s var(--fw-ease);
}

.contact .contact-address:hover,
.contact .contact-phone:hover,
.contact .contact-email:hover {
  box-shadow: var(--fw-shadow);
}

.contact i {
  font-size: 26px;
  color: var(--fw-orange);
  margin-bottom: 10px;
  display: block;
}

.contact h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fw-ink-soft);
  margin-bottom: 8px;
}

.contact address,
.contact p {
  font-style: normal;
  color: var(--fw-ink);
  line-height: 1.6;
  margin: 0;
}

.contact a {
  color: var(--fw-ink);
  text-decoration: none;
}

.contact a:hover {
  color: var(--fw-blue);
  text-decoration: underline;
}

/* Les bordures verticales de style.css n'ont plus de sens avec des cartes. */
@media (min-width: 768px) {
  .contact .contact-phone {
    border-left: 1px solid var(--fw-rule);
    border-right: 1px solid var(--fw-rule);
  }
}

/* ==========================================================================
   12. CLIENTS
   ========================================================================== */
.clients {
  background: transparent;
}

/* fw_img enveloppe chaque logo dans un <picture>, qui est donc l'élément
   flex de la colonne. Or style.css impose aux logos « max-width: 45% » : ce
   pourcentage se résout contre la largeur du <picture>, elle-même déduite de
   celle de l'image — la référence est circulaire et les logos s'effondraient
   à une quinzaine de pixels. On donne au <picture> une largeur définie, et le
   pourcentage retrouve un sens. */
.clients picture {
  display: block;
  max-width: 100%;
}

.clients img {
  filter: grayscale(1);
  opacity: .55;
  transition: filter .25s var(--fw-ease), opacity .25s var(--fw-ease);
  max-width: 100%;
  max-height: 56px;
  width: auto;
}

.clients img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ==========================================================================
   13. PIED DE PAGE
   ========================================================================== */
#footer .footer-newsletter form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#footer .footer-newsletter input[type="email"] {
  flex: 1 1 150px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

#footer .footer-newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .5);
}

#footer .footer-newsletter input[type="submit"] {
  padding: 11px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--fw-orange);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s var(--fw-ease);
}

#footer .footer-newsletter input[type="submit"]:hover {
  background: var(--fw-orange-dark);
}

.fw-legal {
  font-size: .78rem;
  color: rgba(255, 255, 255, .45);
  margin-top: 10px;
  line-height: 1.5;
}

/* ==========================================================================
   14. PAGES GAMME ET PRODUIT
   ========================================================================== */

/* Fil d'Ariane : dit où l'on est, et permet de remonter d'un cran. */
.fw-fil {
  border-bottom: 1px solid var(--fw-rule);
  background: var(--fw-shelf);
}

.fw-fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  font-size: .88rem;
}

.fw-fil li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--fw-rule);
}

.fw-fil a {
  color: var(--fw-ink-soft);
  text-decoration: none;
}

.fw-fil a:hover {
  color: var(--fw-blue);
  text-decoration: underline;
}

.fw-fil [aria-current] {
  color: var(--fw-ink);
  font-weight: 600;
}

/* La fiche produit : galerie à gauche, conditionnement à droite. */
.fw-produit {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

@media (max-width: 900px) {
  .fw-produit {
    grid-template-columns: 1fr;
  }
}

.fw-produit__galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.fw-vignette {
  display: block;
  aspect-ratio: 1;
  background: var(--fw-paper);
  border: 1px solid var(--fw-rule);
  border-radius: var(--fw-radius);
  overflow: hidden;
  transition: border-color .2s var(--fw-ease), box-shadow .2s var(--fw-ease);
}

.fw-vignette:hover {
  border-color: var(--fw-accent, var(--fw-orange));
  box-shadow: var(--fw-shadow);
}

.fw-vignette picture {
  display: contents;
}

/* La photo remplit toute la vignette, sans bande vide autour. */
.fw-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--fw-ease);
}

.fw-vignette:hover img {
  transform: scale(1.04);
}

.fw-produit__infos {
  position: sticky;
  top: 100px;
  background: var(--fw-paper);
  border: 1px solid var(--fw-rule);
  border-radius: var(--fw-radius);
  padding: 26px 24px;
}

@media (max-width: 900px) {
  .fw-produit__infos {
    position: static;
  }
}

.fw-produit__infos h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fw-ink-soft);
  margin: 0 0 14px;
}

/* Le conditionnement est une liste de définitions : chaque ligne associe
   un contenant à ce qu'il contient. */
.fw-cond {
  margin: 0 0 22px;
}

.fw-cond > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fw-rule);
}

.fw-cond > div:last-child {
  border-bottom: 0;
}

.fw-cond dt {
  font-weight: 600;
  color: var(--fw-ink);
  margin: 0;
}

.fw-cond dd {
  margin: 0;
  color: var(--fw-ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fw-autres {
  /* Espacement par le bas du bloc precedent et par le padding : jamais
     par une marge haute (voir la regle globale en debut de fichier). */
  padding-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--fw-rule);
}

.fw-autres > h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 22px;
}

/* Sur les pages gamme et produit, la pastille sert de sur-titre. */
.section-title .fw-chip {
  margin-bottom: 12px;
}

/* ==========================================================================
   15. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   13. ACTIONS SUR LE TERRAIN
   Chaque action porte sa propre couleur, comme une gamme : le système est
   le même d'un bout à l'autre du site. La photo et le texte sont côte à
   côte — ce sont des reportages, pas des produits à comparer.
   ========================================================================== */
/* Deux colonnes au maximum : ces tuiles sont horizontales, au-delà le texte
   se retrouve à l'étroit à côté de la photo. */
.fw-actions-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 760px) {
  .fw-actions-liste {
    grid-template-columns: 1fr;
  }
}

/* Une gamme est une marque et possède une couleur ; une action est une
   activité et n'en a pas. Les tuiles restent donc neutres — c'est aussi ce
   qui les distingue des cartes de gamme au premier coup d'œil. */
.fw-action {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fw-paper);
  border: 1px solid var(--fw-rule);
  transition: transform .22s var(--fw-ease), box-shadow .22s var(--fw-ease),
              border-color .22s var(--fw-ease);
}

.fw-action:hover,
.fw-action:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--fw-shadow-lift);
  border-color: transparent;
}

/* La photo est posée en absolu : c'est le texte qui décide de la hauteur de
   la tuile, jamais le format de l'image. Sans cela, une photo en portrait
   étire toute la rangée. */
.fw-action__media {
  position: relative;
  overflow: hidden;
  background: var(--fw-shelf);
  min-height: 130px;
}

.fw-action__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--fw-ease);
}

.fw-action:hover .fw-action__media img {
  transform: scale(1.05);
}

.fw-action__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}

.fw-action__body h2,
.fw-action__body h3 {
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0;
}

.fw-action__body h2 a,
.fw-action__body h3 a {
  color: var(--fw-ink);
  text-decoration: none;
}

/* Toute la tuile est cliquable, sans dupliquer le lien au clavier. */
.fw-action__body h2 a::after,
.fw-action__body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.fw-action__body p {
  font-size: .89rem;
  line-height: 1.55;
  color: var(--fw-ink-soft);
  margin: 0;
}

.fw-action__compte {
  font-size: .76rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fw-ink-soft) !important;
}

.fw-action:focus-within {
  outline: 2px solid var(--fw-blue);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .fw-action {
    grid-template-columns: 110px 1fr;
  }
}

/* ==========================================================================
   14. EN-TÊTE DE PAGE ACTION + GALERIE
   ========================================================================== */
/* En-tête neutre : le titre et le fil d'Ariane suffisent à situer la page.
   Un fond teinté par action donnait quatre ambiances différentes pour un
   même type de contenu. */
.fw-action-tete {
  padding: clamp(32px, 4vw, 56px) 0 clamp(20px, 2.5vw, 30px);
  background: var(--fw-paper);
  border-bottom: 1px solid var(--fw-rule);
}

/* Cet en-tête est toujours le premier enfant de #main, où la règle générale
   « pas de marge haute » supprime le padding. Ici il en faut un : sans lui,
   le fil d'Ariane se colle sous le menu. Le sélecteur est plus précis, il
   l'emporte. */
#main > .fw-action-tete {
  padding-top: clamp(26px, 3.2vw, 44px);
}

.fw-action-tete h1 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.fw-action-tete__lead {
  font-size: clamp(.98rem, .93rem + .2vw, 1.1rem);
  line-height: 1.6;
  color: var(--fw-ink-soft);
  max-width: 62ch;
  margin: 0;
}

/* Le fil d'Ariane est déjà défini en section 14 : un bandeau pleine largeur
   posé avant le contenu. Les pages d'action l'utilisent tel quel, il n'y a
   rien à redéfinir ici.

   Le bandeau vient donc AVANT l'en-tête coloré, qui n'a alors plus besoin
   de padding haut supplémentaire. */

/* La galerie : des photos de terrain, cadrées serré et de taille égale.
   L'uniformité met le sujet en avant, pas la mise en page. */
.fw-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fw-galerie a {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fw-shelf);
  box-shadow: var(--fw-shadow);
}

.fw-galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--fw-ease);
}

.fw-galerie a:hover img,
.fw-galerie a:focus-visible img {
  transform: scale(1.06);
}

/* ==========================================================================
   15. PAGE DES SPOTS
   Les spots sont regroupés par marque : c'est ainsi qu'on les cherche
   (« la pub Cookzen »). À l'intérieur d'un groupe, toutes les vignettes ont
   la même taille — aucune n'est plus importante qu'une autre.
   ========================================================================== */
/* Le renvoi vers la suite d'une section. */
.fw-section__suite {
  margin: 26px 0 0;
}

/* ==========================================================================
   16. CRAYONS D'ÉDITION
   Visibles uniquement quand l'administrateur est connecté. Ils ne doivent
   jamais déplacer le contenu : posés en flottant, discrets au repos, francs
   au survol. Le visiteur ne les voit pas — le HTML ne les contient même pas.
   ========================================================================== */
.fw-crayon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  float: right;
  margin: 0 0 6px 12px;
  padding: 4px 11px;
  border: 1px dashed var(--fw-blue);
  border-radius: 100px;
  background: var(--fw-paper);
  color: var(--fw-blue);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  opacity: .5;
  transition: opacity .15s var(--fw-ease), background .15s var(--fw-ease);
}

.fw-crayon:hover,
.fw-crayon:focus-visible {
  opacity: 1;
  background: var(--fw-blue);
  border-style: solid;
  color: #fff;
}

/* Sur les petits écrans, le libellé long tiendrait mal : on garde le verbe. */
@media (max-width: 600px) {
  .fw-crayon__quoi {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media print {
  .fw-crayon { display: none; }
}

/* Un flottant sort du flux pour le texte, mais pas pour ses frères : tout bloc
   qui établit son propre contexte de formatage — une grille, une rangée flex —
   se rétrécit pour ne pas le chevaucher. Sans confinement, le crayon posé au
   bord d'un `.section-title` (large de 640 px) ne laissait que 528 px à la
   rangée suivante : les trois cartes de « Nous joindre » se retrouvaient
   tassées sur un tiers de la largeur, et le libellé « Téléphone » débordait.
   Le défaut ne se voyait que connecté, puisque le visiteur n'a pas de crayon.

   On confine donc le flottant dans le bloc qui le porte. `flow-root` ne change
   rien d'autre : ces trois blocs restent des blocs ordinaires. */
.section-title,
.fw-hero > .container,
.fw-bande-pays > .container {
  display: flow-root;
}

/* ==========================================================================
   17. PAGE DE CONTACT
   Le formulaire est le seul endroit du site public où le visiteur écrit.
   Il doit donc être plus large et plus calme que le reste : champs hauts,
   libellés lisibles, un seul bouton.
   ========================================================================== */
.fw-contact-grille {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

@media (max-width: 900px) {
  .fw-contact-grille {
    grid-template-columns: 1fr;
  }
}

.fw-formulaire {
  background: var(--fw-paper);
  border: 1px solid var(--fw-rule);
  border-radius: var(--fw-radius);
  padding: clamp(22px, 3vw, 34px);
}

.fw-champ {
  margin-bottom: 20px;
}

.fw-champ--double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 560px) {
  .fw-champ--double {
    grid-template-columns: 1fr;
  }
}

.fw-champ label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--fw-ink);
  margin-bottom: 7px;
}

.fw-champ input,
.fw-champ textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fw-rule);
  border-radius: 8px;
  background: var(--fw-paper);
  color: var(--fw-ink);
  font: inherit;
  line-height: 1.5;
  transition: border-color .15s var(--fw-ease), box-shadow .15s var(--fw-ease);
}

.fw-champ textarea {
  resize: vertical;
  min-height: 160px;
}

.fw-champ input:focus,
.fw-champ textarea:focus {
  outline: none;
  border-color: var(--fw-blue);
  box-shadow: 0 0 0 3px rgba(48, 72, 255, .14);
}

.fw-aide {
  font-size: .86rem;
  color: var(--fw-ink-soft);
  line-height: 1.55;
  margin: 7px 0 0;
}

/* Piège à robots : retiré de l'écran sans display:none, que certains
   automates détectent. Il reste hors du parcours clavier grâce à tabindex. */
.fw-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fw-btn--plein {
  background: var(--fw-orange);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(255, 96, 41, .8);
}

.fw-btn--plein:hover {
  background: var(--fw-orange-dark);
  transform: translateY(-2px);
}

/* --- Réponses de l'envoi ------------------------------------------------- */
.fw-message {
  border-radius: var(--fw-radius);
  padding: 16px 20px;
  margin: 0 0 26px;
  line-height: 1.6;
  border: 1px solid transparent;
}

.fw-message p { margin: 0 0 6px; }
.fw-message ul { margin: 0; padding-left: 20px; }

.fw-message--ok {
  background: #eaf7ef;
  border-color: #b9e3c9;
  color: #1d6b3a;
}

.fw-message--erreur {
  background: #fdeceb;
  border-color: #f3c2be;
  color: #a32116;
}

/* --- WhatsApp ------------------------------------------------------------ */
.fw-wa-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding-top: 28px;
  color: var(--fw-ink-soft);
  font-size: .95rem;
}

/* Dans la section « contact », la règle `.contact i` met toutes les icônes en
   orange et en bloc — c'est voulu pour les pastilles des trois cartes, mais
   l'icône d'un bouton doit suivre la couleur de son texte et rester en ligne. */
.fw-btn i {
  color: inherit;
  font-size: 1em;
  display: inline-block;
  margin: 0;
}

.fw-btn--wa {
  background: #25d366;
  color: #fff;
  border: 0;
}

.fw-btn--wa:hover {
  background: #1da851;
  color: #fff;
  transform: translateY(-2px);
}

/* --- Carte --------------------------------------------------------------- */
.fw-contact-carte {
  border: 1px solid var(--fw-rule);
  border-radius: var(--fw-radius);
  overflow: hidden;
  background: var(--fw-shelf);
}

.fw-contact-carte iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 900px) {
  .fw-contact-carte iframe { height: 300px; }
}

/* ==========================================================================
   18. BOUTON WHATSAPP FLOTTANT
   Posé au-dessus du bouton « haut de page », qui occupe déjà le coin droit.
   Réduit à une pastille sur mobile : le libellé prendrait la place du pouce.
   ========================================================================== */
.fw-wa-flottant {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 996;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 6px 20px -6px rgba(37, 211, 102, .75);
  transition: transform .18s var(--fw-ease), background .18s var(--fw-ease);
}

.fw-wa-flottant:hover,
.fw-wa-flottant:focus-visible {
  background: #1da851;
  color: #fff;
  transform: translateY(-2px);
}

.fw-wa-flottant i {
  font-size: 1.3rem;
  line-height: 1;
}

@media (max-width: 700px) {
  .fw-wa-flottant {
    padding: 14px;
    bottom: 70px;
  }

  .fw-wa-flottant__mot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Une personne qui a demandé moins d'animation ne veut pas d'un bouton qui
   se soulève sous le doigt. */
@media (prefers-reduced-motion: reduce) {
  .fw-wa-flottant { transition: none; }
  .fw-wa-flottant:hover { transform: none; }
}

/* ==========================================================================
   19. FILTRES DE CATÉGORIE
   Des pastilles au-dessus de la grille plutôt qu'un menu déroulant : les
   catégories sont peu nombreuses, et une pastille montre à la fois le choix
   possible et le nombre d'éléments derrière. Sur mobile elles défilent
   horizontalement — c'est ce que font Spotify ou Google Maps — plutôt que de
   se replier sur trois lignes qui repousseraient la grille hors de l'écran.
   ========================================================================== */
.fw-filtres {
  display: flex;
  gap: 9px;
  margin: 0 0 26px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.fw-filtres::-webkit-scrollbar { display: none; }

.fw-filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--fw-rule);
  border-radius: 999px;
  background: var(--fw-paper);
  color: var(--fw-ink-soft);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s var(--fw-ease), color .15s var(--fw-ease),
              background .15s var(--fw-ease);
}

.fw-filtre:hover {
  border-color: var(--fw-ink-soft);
  color: var(--fw-ink);
}

.fw-filtre.est-actif {
  background: var(--fw-ink);
  border-color: var(--fw-ink);
  color: #fff;
}

/* Le compte reste lisible sur les deux fonds. */
.fw-filtre__n {
  font-size: .78rem;
  font-weight: 700;
  opacity: .6;
}

.fw-spot[hidden] { display: none; }

.fw-spots__vide {
  color: var(--fw-ink-soft);
  font-style: italic;
  margin: 0;
}

/* La catégorie, en surimpression sur l'affiche, à côté de la marque. */
.fw-spot__haut {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fw-spot__categorie {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .92);
}

@media (prefers-reduced-motion: reduce) {
  .fw-filtre { transition: none; }
}

/* --- Groupes de spots par catégorie -------------------------------------- */
.fw-groupe-spots {
  padding-bottom: clamp(28px, 4vw, 48px);
}

.fw-groupe-spots:last-child {
  padding-bottom: 0;
}

.fw-groupe-spots[hidden] {
  display: none;
}

.fw-groupe-spots__titre {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  font-weight: 700;
  color: var(--fw-ink);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fw-rule);
}

/* Le compte se lit comme une précision, pas comme une partie du titre. */
.fw-groupe-spots__n {
  font-size: .8rem;
  font-weight: 700;
  color: var(--fw-ink-soft);
  background: var(--fw-shelf);
  border-radius: 999px;
  padding: 2px 9px;
}