/* =============================================================================
   LE FOURNIL — L'HABILLAGE DES PRISES DU KIT.

   Les prises sortent du HTML sémantique aux classes `s-*` et AUCUN style :
   c'est ici, et nulle part ailleurs, qu'on les habille. On ne recopie une
   prise dans partials/ que si le MARKUP doit changer, jamais pour du style.
   Le catalogue des classes disponibles : PRISES.md, à la racine du kit.

   Rempli au fur et à mesure des sections, prise par prise.
   ============================================================================= */

/* ── Horaires (modules/settings/views/horaires.php) ── */
.s-hours { width: 100%; border-collapse: collapse; font-size: var(--fo-t-s); }
.s-hours-caption { text-align: left; margin-bottom: var(--fo-e-2); color: var(--fo-txt-3); }
.s-hours-day > * { padding: .3rem 0; vertical-align: top; }
.s-hours-day[data-today="1"] { font-weight: 700; color: var(--fo-txt); }
.s-hours-jour { padding-right: var(--fo-e-3); }
.s-hours-closed { color: var(--fo-txt-3); }
.s-hours-now {
  display: inline-block;
  margin-top: var(--fo-e-3);
  font-weight: 600;
}
.s-hours-now[data-open="1"] { color: var(--fo-olive); }
.s-hours-now[data-open="0"] { color: var(--fo-braise); }
.s-hours-exceptions { margin-top: var(--fo-e-3); padding-left: 1.1em; }

/* ── Réseaux sociaux (modules/settings/views/reseaux.php) ──
   Le libellé reste dans le DOM pour les lecteurs d'écran ; à l'œil, seule
   la pastille se voit. */
.s-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-2);
  list-style: none;
  margin: var(--fo-e-4) 0 0;
  padding: 0;
}
.s-socials-link {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--fo-trait-fort);
  border-radius: 999px;
  color: var(--fo-txt-2);
  text-decoration: none;
  font-size: var(--fo-t-xs);
  transition: background var(--fo-transition), color var(--fo-transition), border-color var(--fo-transition);
}
.s-socials-link:hover {
  background: var(--fo-croute);
  border-color: var(--fo-croute);
  color: var(--fo-encre);
}
.s-socials-label {
  overflow: hidden;
  width: 1.1em;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Newsletter (modules/newsletter/views/inscription.php) ── */
.s-newsletter { display: flex; flex-wrap: wrap; gap: var(--fo-e-2); }
.s-newsletter-field { flex: 1 1 12rem; margin: 0; }
.s-newsletter-input {
  width: 100%;
  padding: .55em .8em;
  font: inherit;
  color: var(--fo-txt);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon);
}
.s-newsletter-submit {
  padding: .7em 1.2em;
  font: inherit;
  font-weight: 600;
  color: var(--fo-encre);
  background: var(--fo-croute);
  border: 1px solid var(--fo-croute);
  border-radius: var(--fo-rayon);
  cursor: pointer;
}
.s-newsletter-submit:hover { background: var(--fo-croute-fonce); color: var(--fo-txt-clair); }
.s-newsletter-success { color: var(--fo-olive); }
.s-newsletter-error { color: var(--fo-braise); }

/* ── Gestion des cookies (modules/cookies/views/gestion.php) ── */
.s-cookies-btn--custom { margin-top: var(--fo-e-3); font-size: var(--fo-t-xs); }

/* ── Formulaire composé (modules/formulaire/views/formulaire.php) ──
   La prise porte le jeton anti-rejeu, le piège à robots et le contrat avec
   l'endpoint : on l'habille, on ne la recopie pas.

   ⚠️ C'EST LE CLIENT QUI COMPOSE SES CHAMPS, dans Admin → Formulaires (bascule
   du 2026-09-04, l'ancienne prise `leads` a été retirée). Le thème n'impose
   plus la liste : il habille des TYPES. Chaque champ arrive avec sa largeur
   naturelle (`--demi` / `--plein`) et c'est elle qui décide de la mise en
   page — un formulaire à qui on impose ses paires se casse dès que le client
   ajoute un champ. */
.s-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fo-e-2) var(--fo-e-4);
}
.s-form-champ { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s-form-champ--plein,
.s-form-actions,
.s-form-erreur,
.s-form-succes { grid-column: 1 / -1; }

.s-form-label {
  font-size: var(--fo-t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fo-txt-2);
}
.s-form-obligatoire { color: var(--fo-braise); margin-left: 2px; }
.s-form-aide {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  line-height: 1.5;
}

.s-form-input, .s-form-textarea {
  width: 100%;
  padding: .55em .8em;
  font: inherit;
  color: var(--fo-txt);
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon);
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition),
              background var(--fo-transition);
}
.s-form-input:focus, .s-form-textarea:focus {
  outline: 0;
  background: var(--fo-carte);
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}
/* COMPRESSÉ (Jonas, 2026-08-04) : le formulaire dépassait de l'écran et le
   bouton se retrouvait collé sous le pli. */
.s-form-textarea { min-height: 6rem; resize: vertical; }

/* ── LES CHOIX EN PASTILLES ──
   Un choix court se montre, il ne se déplie pas (règle Jonas). La radio reste
   dans le document, invisible mais focalisable : elle porte l'état, le clavier
   et la validation. Le dessin vit sur le libellé qui la suit. */
.s-form-groupe {
  border: 0; margin: 0; padding: 0; min-width: 0;
  display: flex; flex-wrap: wrap; gap: var(--fo-e-2);
}
.s-form-groupe > .s-form-label { flex: 1 0 100%; }
.s-form-groupe > .s-form-aide  { flex: 1 0 100%; }
.s-form-option { display: inline-flex; cursor: pointer; }
.s-form-option .s-form-coche { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.s-form-option-texte {
  display: inline-block;
  padding: .45em .9em;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-2);
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon-2);
  transition: border-color var(--fo-transition), background var(--fo-transition), color var(--fo-transition);
}
.s-form-option:hover .s-form-option-texte { border-color: var(--fo-braise); color: var(--fo-txt); }
.s-form-coche:checked + .s-form-option-texte {
  background: var(--fo-braise);
  border-color: var(--fo-braise);
  color: #fff;
}
.s-form-coche:focus-visible + .s-form-option-texte {
  outline: 2px solid var(--fo-braise);
  outline-offset: 2px;
}

/* ── LE CONSENTEMENT ──
   Une VRAIE case : ce n'est pas un choix parmi d'autres, c'est un accord qu'on
   donne. Une pastille laisserait croire à une option. */
.s-form-champ--consentement .s-form-consentement {
  display: flex; align-items: flex-start; gap: var(--fo-e-2); cursor: pointer;
}
.s-form-champ--consentement .s-form-coche {
  position: static; opacity: 1; pointer-events: auto;
  width: 1.1em; height: 1.1em; margin-top: .15em; flex: none;
  accent-color: var(--fo-braise);
}
.s-form-champ--consentement .s-form-option-texte {
  padding: 0; border: 0; background: none;
  font-size: var(--fo-t-s); color: var(--fo-txt-2); line-height: 1.55;
}
.s-form-consentement-lien { text-decoration: underline; text-underline-offset: 2px; }

/* Le piège à robots ne doit JAMAIS redevenir visible : le partial le pose en
   [hidden], on verrouille ici au cas où une règle de mise en page le
   ramènerait dans le flux. */
.s-form-hp { display: none !important; }

.s-form-actions { margin-top: var(--fo-e-1); }
.s-form-submit {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .7em 1.5em;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), transform var(--fo-transition),
              box-shadow var(--fo-transition);
}
.s-form-submit:hover {
  background: var(--fo-braise-fonce);
  border-color: var(--fo-braise-fonce);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(181, 55, 43, .28);
}
.s-form-submit:active { transform: translateY(0); }

/* Les retours, en pleine largeur au-dessus du formulaire. */
.s-form-succes, .s-form-erreur {
  margin: 0;
  padding: var(--fo-e-3) var(--fo-e-4);
  border-radius: var(--fo-rayon-2);
  font-size: var(--fo-t-s);
}
.s-form-succes {
  background: color-mix(in srgb, var(--fo-olive) 12%, transparent);
  color: var(--fo-olive);
  border: 1px solid color-mix(in srgb, var(--fo-olive) 35%, transparent);
}
.s-form-erreur {
  background: var(--fo-braise-voile);
  color: var(--fo-braise-fonce);
  border: 1px solid color-mix(in srgb, var(--fo-braise) 35%, transparent);
}

@media (max-width: 560px) {
  .s-form { grid-template-columns: minmax(0, 1fr); }
}

/* ── Sections de contenu libre (core/Sections.php) ──
   Le moteur du kit rend intro, texte, média, citation, onglets, appel à
   l'action. Il ne pose AUCUN style : toute la typographie de lecture est ici.
   Le pack n'écrit pas ce HTML, il l'habille. */
.s-article-body > section { margin-bottom: var(--fo-e-5); }
.s-article-body > section:last-child { margin-bottom: 0; }

.s-intro p {
  margin: 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  line-height: 1.5;
  color: var(--fo-txt);
}
.s-sep {
  height: 20px;
  margin: var(--fo-e-5) 0 0;
  border: 0;
  background: var(--fo-grigne-marque) left center / 92px 20px no-repeat;
}

.s-titre {
  font-size: var(--fo-t-l);
  line-height: 1.2;
  color: var(--fo-txt);
  margin: 0 0 var(--fo-e-3);
}
.s-richtext > *:first-child { margin-top: 0; }
.s-richtext > *:last-child { margin-bottom: 0; }
.s-richtext p { margin: 0 0 var(--fo-e-3); }
.s-richtext h3 { font-size: 1.25rem; color: var(--fo-txt); margin: var(--fo-e-4) 0 var(--fo-e-2); }
.s-richtext ul, .s-richtext ol { margin: 0 0 var(--fo-e-3); padding-left: 1.3em; }
.s-richtext li { margin-bottom: var(--fo-e-2); }
.s-richtext li::marker { color: var(--fo-croute); }
.s-richtext a { color: var(--fo-braise); }
.s-richtext strong { color: var(--fo-txt); }

/* Le média déborde de la colonne de lecture : une image à la largeur du texte
   fait timbre-poste. */
.s-media { margin-inline: calc(var(--fo-e-6) * -1); }
.s-media figure { margin: 0; }
.s-media img {
  width: 100%; height: auto;
  display: block;
  border-radius: var(--fo-rayon-img);
}
.s-media figcaption, .s-galerie figcaption {
  margin-top: var(--fo-e-2);
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  text-align: center;
}

.s-media-texte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fo-e-4);
  align-items: center;
}
.s-media-texte.s-media-right .s-media-col { order: 2; }
.s-media-texte figure { margin: 0; }
.s-media-texte img { width: 100%; height: auto; display: block; border-radius: var(--fo-rayon-img); }

.s-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fo-e-3);
}
.s-galerie figure { margin: 0; }
.s-galerie img { width: 100%; height: auto; display: block; border-radius: var(--fo-rayon); }

.s-citation blockquote {
  margin: 0;
  padding-left: var(--fo-e-4);
  border-left: 3px solid var(--fo-braise);
}
.s-citation p {
  margin: 0;
  font-family: var(--fo-titre);
  font-style: italic;
  font-size: var(--fo-t-l);
  line-height: 1.4;
  color: var(--fo-txt);
}
.s-citation cite {
  display: block;
  margin-top: var(--fo-e-2);
  font-style: normal;
  font-size: var(--fo-t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}

.s-cta {
  padding: var(--fo-e-5);
  background: var(--fo-fond-4);
  border-radius: var(--fo-rayon-img);
  text-align: center;
}
.s-cta p { margin: 0 0 var(--fo-e-3); font-family: var(--fo-titre); font-size: var(--fo-t-l); color: var(--fo-txt); }
.s-cta-btn {
  display: inline-block;
  padding: .8em 1.6em;
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--fo-transition), transform var(--fo-transition);
}
.s-cta-btn:hover { background: var(--fo-braise-fonce); transform: translateY(-2px); }

/* Les onglets du moteur : le comportement est un petit script du kit, tout le
   style est ici. SANS script, tous les panneaux restent visibles et empilés,
   donc on ne masque QUE ce que le script sait rouvrir. */
.s-onglets-barre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-4);
  margin-bottom: var(--fo-e-4);
  border-bottom: 1px solid var(--fo-trait);
}
.s-onglet-titre {
  position: relative;
  padding: 0 2px var(--fo-e-3);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fo-t-s);
  font-weight: 600;
  color: var(--fo-txt-3);
  cursor: pointer;
}
.s-onglet-titre.is-actif { color: var(--fo-txt); }
.s-onglet-titre.is-actif::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--fo-braise);
}
.s-onglet-panneau:not(.is-actif) { display: none; }

/* ── Commentaires d'article (modules/articles-commentaires/views) ──
   Deux blocs : la liste de ce qui a été dit, puis le formulaire. Le piège à
   robots reste masqué en dur, comme sur le formulaire de contact. */
.s-comments-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0 0 var(--fo-e-5);
}

.s-comments-liste { margin: 0 0 var(--fo-e-6); padding: 0; list-style: none; }
.s-comments-item {
  padding: var(--fo-e-4) 0;
  border-bottom: 1px solid var(--fo-trait);
}
.s-comments-item:last-child { border-bottom: 0; }
.s-comments-auteur { font-weight: 700; color: var(--fo-txt); }
.s-comments-date { margin-left: var(--fo-e-2); font-size: var(--fo-t-xs); color: var(--fo-txt-3); }
.s-comments-corps { margin: var(--fo-e-2) 0 0; line-height: var(--fo-lh-texte); }

/* La réponse de la maison : décalée et sur fond de mie, pour qu'on voie tout
   de suite que ce n'est plus le lecteur qui parle. */
.s-comments-reponse {
  margin: var(--fo-e-3) 0 0 var(--fo-e-4);
  padding: var(--fo-e-3) var(--fo-e-4);
  background: var(--fo-fond-4);
  border-radius: var(--fo-rayon-2);
  font-size: var(--fo-t-s);
}

.s-comments-formulaire {
  display: grid;
  gap: var(--fo-e-3);
  padding: var(--fo-e-5);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
}
.s-comments-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.s-comments-champ > label, .s-comments-formulaire label {
  font-size: var(--fo-t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fo-txt-2);
}
.s-comments-formulaire input[type="text"],
.s-comments-formulaire input[type="email"],
.s-comments-formulaire textarea {
  width: 100%;
  padding: .55em .8em;
  font: inherit;
  color: var(--fo-txt);
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon);
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
}
.s-comments-formulaire input:focus, .s-comments-formulaire textarea:focus {
  outline: 0;
  background: var(--fo-carte);
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}
.s-comments-formulaire textarea { min-height: 6rem; resize: vertical; }

.s-comments-hp, .s-comments-website { display: none !important; }

.s-comments-envoi {
  justify-self: start;
  padding: .7em 1.5em;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), transform var(--fo-transition);
}
.s-comments-envoi:hover { background: var(--fo-braise-fonce); transform: translateY(-2px); }

.s-comments-aide { font-size: var(--fo-t-xs); color: var(--fo-txt-3); margin: 0; }
.s-comments-ferme { color: var(--fo-txt-3); font-style: italic; }
.s-comments-message-ok, .s-comments-message-erreur {
  margin: 0;
  padding: var(--fo-e-3) var(--fo-e-4);
  border-radius: var(--fo-rayon-2);
  font-size: var(--fo-t-s);
}
.s-comments-message-ok {
  background: color-mix(in srgb, var(--fo-olive) 12%, transparent);
  color: var(--fo-olive);
  border: 1px solid color-mix(in srgb, var(--fo-olive) 35%, transparent);
}
.s-comments-message-erreur {
  background: var(--fo-braise-voile);
  color: var(--fo-braise-fonce);
  border: 1px solid color-mix(in srgb, var(--fo-braise) 35%, transparent);
}

/* =============================================================================
   LE TUNNEL — checkout, commande, connexion

   Ces trois prises sont incluses TELLES QUELLES : elles portent des sessions
   serveur, des jetons anti-rejeu, des pièges à robots et des règles de mot
   de passe. On les habille, on ne les recopie pas — la règle du kit dit
   qu'on ne copie une prise que pour changer son markup, jamais pour du
   style, et un contrat de sécurité recopié se périme en silence.
   ============================================================================= */

/* ── Les champs, communs aux trois ── */
.s-shop-checkout-input, .s-shop-checkout-textarea,
.s-shop-connexion-input {
  width: 100%;
  padding: .65em .85em;
  font: inherit;
  color: var(--fo-txt);
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon);
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition),
              background var(--fo-transition);
}
.s-shop-checkout-input:focus, .s-shop-checkout-textarea:focus,
.s-shop-connexion-input:focus {
  outline: 0;
  background: var(--fo-carte);
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}
.s-shop-checkout-textarea { min-height: 5.5rem; resize: vertical; }

.s-shop-checkout-champ, .s-shop-connexion-champ {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 var(--fo-e-3);
}
.s-shop-checkout-champ > label, .s-shop-connexion-champ > label {
  font-size: var(--fo-t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fo-txt-2);
}
/* La mention entre parenthèses est une PRÉCISION, pas un libellé : à la même
   taille que lui, « (12 caractères minimum) » faisait passer l'étiquette sur
   deux lignes et désalignait le champ d'à côté. */
.s-shop-checkout-optionnel, .s-shop-connexion-optionnel {
  font-size: .625rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fo-txt-3);
}

/* Les pièges à robots ne redeviennent JAMAIS visibles. */
.s-shop-checkout-hp, .s-shop-checkout-website,
.s-shop-connexion-hp, .s-shop-inscription-website, .s-shop-oubli-website {
  display: none !important;
}

/* ── Le checkout ── */
.s-shop-checkout { display: block; }

.s-shop-checkout-etape1, .s-shop-checkout-etape2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--fo-e-4);
}
/* Les champs pleine largeur : e-mail, adresses, note, actions. */
.s-shop-checkout-email,
.s-shop-checkout-livraison-adresse, .s-shop-checkout-facturation-adresse,
.s-shop-checkout-facturation-toggle, .s-shop-checkout-note,
.s-shop-checkout-conditions, .s-shop-checkout-actions,
.s-shop-checkout-adresses-enregistrees, .s-shop-checkout-livraison-methodes,
.s-shop-checkout-paiement, .s-shop-checkout-recap-lignes,
.s-shop-checkout-error, .s-shop-checkout-vide,
.s-shop-checkout-connexion-requise, .s-shop-checkout-livraison-indisponible,
.s-shop-checkout-produits-non-livrables { grid-column: 1 / -1; }

.s-shop-checkout-livraison-adresse, .s-shop-checkout-facturation-adresse {
  margin: 0 0 var(--fo-e-4);
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
}
.s-shop-checkout-livraison-adresse legend,
.s-shop-checkout-facturation-adresse legend {
  padding: 0 var(--fo-e-2);
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt);
}
/* DANS UN ENCADRÉ D'ADRESSE, la grille va sur le CONTENEUR DES CHAMPS, pas
   sur le fieldset : AddressForm enveloppe tout son rendu dans un div, donc
   une grille posée sur le fieldset n'aurait eu qu'un seul enfant à répartir
   et tous les champs seraient restés sur une colonne. */
.s-shop-checkout-livraison-adresse > div,
.s-shop-checkout-facturation-adresse > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--fo-e-4);
}

/* LE BLOC DES CHAMPS DÉPENDANTS DU PAYS s'efface de la grille. AddressForm
   regroupe adresse, complément, code postal et ville dans un div SANS CLASSE
   — c'est celui que son script réécrit quand on change de pays. Ce div
   n'occupait qu'UNE cellule, et ses quatre champs s'empilaient dedans, d'où
   les trous à droite. `display: contents` le retire de la mise en page sans
   toucher au DOM : ses enfants deviennent des items de la grille parente. */
.s-shop-checkout-livraison-adresse > div > div:not([class]),
.s-shop-checkout-facturation-adresse > div > div:not([class]) {
  display: contents;
}

/* TOUS LES CHAMPS EN DEUX COLONNES, sans exception. J'ai essayé de passer
   l'adresse en pleine largeur : comme AddressForm donne la même classe à
   tous ses champs et que leur ordre dépend du PAYS, l'exception laissait des
   trous à droite selon le pays choisi. Deux colonnes régulières se
   remplissent toujours. */

/* Les choix de livraison et de paiement : de vraies cases à cliquer, pas des
   lignes de texte avec un bouton radio perdu devant. */
.s-shop-checkout-livraison-option, .s-shop-checkout-paiement-option {
  display: flex;
  align-items: flex-start;
  gap: var(--fo-e-3);
  margin: 0 0 var(--fo-e-2);
  padding: var(--fo-e-3) var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-2);
  cursor: pointer;
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
}
.s-shop-checkout-livraison-option:hover, .s-shop-checkout-paiement-option:hover {
  border-color: var(--fo-trait-fort);
  box-shadow: var(--fo-ombre);
}
.s-shop-checkout-livraison-option:has(input:checked),
.s-shop-checkout-paiement-option:has(input:checked) {
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}
.s-shop-checkout-livraison-desc, .s-shop-checkout-paiement-instructions {
  display: block;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
}
.s-shop-checkout-paiement-picto { width: 26px; height: 26px; }

.s-shop-checkout-conditions { margin: var(--fo-e-4) 0; }
.s-shop-checkout-condition {
  display: flex;
  align-items: flex-start;
  gap: var(--fo-e-3);
  margin-bottom: var(--fo-e-2);
  font-size: var(--fo-t-s);
}
.s-shop-checkout-condition-desc { font-size: var(--fo-t-xs); color: var(--fo-txt-3); }

.s-shop-checkout-recap-lignes { margin: 0 0 var(--fo-e-4); padding: 0; list-style: none; }
.s-shop-checkout-recap-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-e-3);
  padding: var(--fo-e-2) 0;
  border-bottom: 1px solid var(--fo-trait);
  font-size: var(--fo-t-s);
}
.s-shop-checkout-recap-qty { color: var(--fo-txt-3); }
.s-shop-checkout-recap-sous-total { font-family: var(--fo-titre); font-size: 1.3rem; color: var(--fo-braise); }

.s-shop-checkout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fo-e-3);
  margin-top: var(--fo-e-4);
}
.s-shop-checkout-continuer, .s-shop-checkout-confirmer {
  padding: .9em 1.8em;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), transform var(--fo-transition),
              box-shadow var(--fo-transition);
}
.s-shop-checkout-continuer:hover, .s-shop-checkout-confirmer:hover {
  background: var(--fo-braise-fonce);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(181, 55, 43, .28);
}
.s-shop-checkout-continuer[disabled], .s-shop-checkout-confirmer[disabled] {
  background: var(--fo-trait-fort);
  border-color: var(--fo-trait-fort);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.s-shop-checkout-modifier { font-size: var(--fo-t-s); color: var(--fo-braise); }

.s-shop-checkout-error, .s-shop-checkout-livraison-indisponible,
.s-shop-checkout-produits-non-livrables, .s-shop-connexion-error {
  margin: 0 0 var(--fo-e-4);
  padding: var(--fo-e-3) var(--fo-e-4);
  background: var(--fo-braise-voile);
  border: 1px solid color-mix(in srgb, var(--fo-braise) 35%, transparent);
  border-radius: var(--fo-rayon-2);
  color: var(--fo-braise-fonce);
  font-size: var(--fo-t-s);
}
.s-shop-connexion-success {
  margin: 0 0 var(--fo-e-4);
  padding: var(--fo-e-3) var(--fo-e-4);
  background: color-mix(in srgb, var(--fo-olive) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fo-olive) 35%, transparent);
  border-radius: var(--fo-rayon-2);
  color: var(--fo-olive);
  font-size: var(--fo-t-s);
}
.s-shop-checkout-vide, .s-shop-checkout-connexion-requise,
.s-shop-commande-introuvable {
  padding: var(--fo-e-6) var(--fo-e-4);
  text-align: center;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt-2);
}

/* ── La commande ── */
.s-shop-commande-numero {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0 0 var(--fo-e-3);
}
.s-shop-commande-statut {
  display: inline-block;
  padding: 6px 14px;
  background: var(--fo-fond-4);
  border-radius: 999px;
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fo-txt-2);
}
.s-shop-commande-paiement-flash {
  margin: var(--fo-e-4) 0;
  padding: var(--fo-e-3) var(--fo-e-4);
  border-radius: var(--fo-rayon-2);
  font-size: var(--fo-t-s);
}
.s-shop-commande-paiement-flash[data-statut="ok"] {
  background: color-mix(in srgb, var(--fo-olive) 12%, transparent);
  color: var(--fo-olive);
}
.s-shop-commande-paiement-flash[data-statut="annule"] {
  background: var(--fo-braise-voile);
  color: var(--fo-braise-fonce);
}

.s-shop-commande-lignes { margin: var(--fo-e-5) 0; padding: 0; list-style: none; }
.s-shop-commande-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-e-3);
  padding: var(--fo-e-3) 0;
  border-bottom: 1px solid var(--fo-trait);
}
.s-shop-commande-ligne-qty { color: var(--fo-txt-3); font-size: var(--fo-t-s); }
.s-shop-commande-ligne-prix { font-family: var(--fo-titre); font-size: 1.15rem; }
.s-shop-commande-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-e-3);
  padding-top: var(--fo-e-3);
  border-top: 1px solid var(--fo-trait-fort);
  font-family: var(--fo-titre);
  font-size: 1.6rem;
  color: var(--fo-braise);
}
.s-shop-commande-tva, .s-shop-commande-remise { font-size: var(--fo-t-s); color: var(--fo-txt-3); }

.s-shop-commande-livraison, .s-shop-commande-echeancier,
.s-shop-commande-message-vendeur, .s-shop-commande-paiement-consignes {
  margin: var(--fo-e-5) 0 0;
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
}
.s-shop-commande-adresse-titre, .s-shop-commande-message-vendeur-titre {
  margin: 0 0 var(--fo-e-2);
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.s-shop-commande-echeance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-e-3);
  padding: var(--fo-e-3) 0;
  border-bottom: 1px solid var(--fo-trait);
}
.s-shop-commande-echeance:last-child { border-bottom: 0; }
.s-shop-commande-echeance-montant { font-family: var(--fo-titre); font-size: 1.2rem; }
.s-shop-commande-echeance-statut { font-size: var(--fo-t-xs); color: var(--fo-txt-3); }
.s-shop-commande-payer-submit {
  padding: .7em 1.4em;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
}
.s-shop-commande-payer-submit:hover { background: var(--fo-braise-fonce); }

@media (max-width: 700px) {
  .s-shop-checkout-etape1, .s-shop-checkout-etape2,
  .s-shop-checkout-livraison-adresse > div,
  .s-shop-checkout-facturation-adresse > div,
  .s-shop-connexion-inscription { grid-template-columns: 1fr; }
  .s-shop-password-regles { columns: 1; }
}

/* ── FAQ (modules/faq/views/faq.php) ──
   Des <details> natifs : ils s'ouvrent sans script et un moteur lit les
   réponses même fermées. Même grammaire que les accordéons de la fiche
   produit, pour que le pack n'ait qu'un seul objet « replié ». */
.s-faq-item { border-bottom: 1px solid var(--fo-trait); }
.s-faq-item:first-child { border-top: 1px solid var(--fo-trait); }
.s-faq-question {
  position: relative;
  padding: var(--fo-e-4) 42px var(--fo-e-4) 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt);
  cursor: pointer;
  list-style: none;
  transition: color var(--fo-transition);
}
.s-faq-question::-webkit-details-marker { display: none; }
.s-faq-question:hover { color: var(--fo-braise); }
.s-faq-question::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--fo-croute);
  border-bottom: 2px solid var(--fo-croute);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--fo-transition);
}
.s-faq-item[open] > .s-faq-question::after { transform: translateY(-20%) rotate(-135deg); }
.s-faq-answer {
  padding: 0 0 var(--fo-e-5);
  line-height: 1.75;
  color: var(--fo-txt-2);
}
.s-faq-answer p { margin: 0 0 var(--fo-e-3); }
.s-faq-answer p:last-child { margin-bottom: 0; }

/* ── Recherche (modules/search/views/*) ── */
.s-search { display: flex; gap: var(--fo-e-2); margin-bottom: var(--fo-e-6); }
.s-search-input {
  flex: 1 1 auto;
  padding: .8em 1.1em;
  font: inherit;
  color: var(--fo-txt);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait-fort);
  border-radius: 999px;
}
.s-search-input:focus {
  outline: 0;
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}
.s-search-submit {
  padding: .8em 1.6em;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition);
}
.s-search-submit:hover { background: var(--fo-braise-fonce); }

.s-search-result {
  padding: var(--fo-e-4) 0;
  border-bottom: 1px solid var(--fo-trait);
}
.s-search-result-type {
  margin: 0 0 4px;
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-croute-fonce);
}
.s-search-result-title { font-size: var(--fo-t-l); margin: 0 0 var(--fo-e-2); }
.s-search-result-title a { color: inherit; text-decoration: none; }
.s-search-result-title a:hover { color: var(--fo-braise); }
.s-search-result-excerpt { margin: 0; color: var(--fo-txt-2); line-height: var(--fo-lh-texte); }
/* Le terme trouvé : surligné à la craie, pas au marqueur fluo. */
.s-search-result-excerpt mark {
  background: var(--fo-croute-voile);
  color: var(--fo-txt);
  padding: 1px 3px;
  border-radius: 3px;
}
.s-search-empty {
  padding: var(--fo-e-6) 0;
  text-align: center;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt-2);
}

/* ── Pages légales (modules/legal/views/*) ── */
.s-legal { line-height: 1.75; color: var(--fo-txt-2); }
.s-legal-section { margin-bottom: var(--fo-e-5); }
.s-legal-heading {
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt);
  margin: 0 0 var(--fo-e-3);
  padding-bottom: var(--fo-e-2);
  border-bottom: 1px solid var(--fo-trait);
}
.s-legal-body p { margin: 0 0 var(--fo-e-3); }
.s-legal-body ul { margin: 0 0 var(--fo-e-3); padding-left: 1.3em; }
.s-legal-body li { margin-bottom: var(--fo-e-2); }
.s-legal-body li::marker { color: var(--fo-croute); }
.s-legal a { color: var(--fo-braise); }

/* ── Forum (modules/support-forum/views/forum.php) ── */
.s-forum-categories { margin: 0; padding: 0; list-style: none; }
.s-forum-categorie {
  padding: var(--fo-e-4);
  margin-bottom: var(--fo-e-3);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}
.s-forum-categorie:hover { transform: translateY(-2px); box-shadow: var(--fo-ombre); }
/* Titre AU-DESSUS, description en dessous : la prise les met à la suite, et
   collés sur une ligne ils formaient une bouillie. */
.s-forum-categorie-nom, .s-forum-cat-titre {
  display: block;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  margin: 0 0 var(--fo-e-1);
}
.s-forum-categorie-desc, .s-forum-cat-desc { display: block; }
.s-forum-categorie-compte { display: block; margin-top: var(--fo-e-2); }
.s-forum-categorie-lien { color: inherit; text-decoration: none; }
.s-forum-categorie-lien:hover { color: var(--fo-braise); }
.s-forum-categorie-desc, .s-forum-cat-desc { margin: 0; font-size: var(--fo-t-s); color: var(--fo-txt-2); }
.s-forum-categorie-compte { font-size: var(--fo-t-xs); color: var(--fo-txt-3); }
.s-forum-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.s-forum-badge-epingle { background: var(--fo-croute); }
.s-forum-badge-verrouille { background: var(--fo-txt-2); }
.s-forum-champ { display: flex; flex-direction: column; gap: 5px; margin: 0 0 var(--fo-e-3); }


/* ── Les prises DANS le pied de page, qui est sombre ──
   La lettre et le lien cookies héritaient de couleurs pensées pour un fond
   clair : illisibles une fois le pied passé au brun de four. */
.fo-pied .s-newsletter-input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
  color: var(--fo-txt-clair);
}
.fo-pied .s-newsletter-input::placeholder { color: rgba(255, 255, 255, .4); }
.fo-pied .s-newsletter-input:focus {
  outline: 0;
  border-color: var(--fo-croute);
  background: rgba(255, 255, 255, .1);
}
.fo-pied .s-newsletter-submit {
  background: var(--fo-croute);
  border-color: var(--fo-croute);
  color: var(--fo-encre);
}
.fo-pied .s-newsletter-submit:hover { background: #fff; border-color: #fff; color: var(--fo-encre); }

.fo-pied .s-socials-link {
  border-color: rgba(255, 255, 255, .22);
  color: color-mix(in srgb, var(--fo-txt-clair) 78%, transparent);
}
.fo-pied .s-socials-link:hover { background: var(--fo-croute); border-color: var(--fo-croute); color: var(--fo-encre); }

/* Le lien de gestion des cookies est un <button> du kit, classe
   `s-cookies-manage`. Sans style il sort en BOUTON SYSTÈME GRIS au milieu
   d'une barre sombre : c'est la chose la plus laide de la page.
   Il ne peut pas être retiré (RGPD art. 7-3 : retirer son consentement doit
   être aussi simple que de le donner), donc il doit se fondre — un lien
   discret, de la même famille que « Propulsé par Sillon » à côté. */
.fo-pied .s-cookies-manage,
.fo-pied .s-cookies-btn--custom button {
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--fo-t-xs);
  line-height: inherit;
  letter-spacing: inherit;
  color: color-mix(in srgb, var(--fo-txt-clair) 55%, transparent);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: color .25s ease;
}
.fo-pied .s-cookies-manage:hover,
.fo-pied .s-cookies-btn--custom button:hover { color: var(--fo-croute); }
.fo-pied .s-cookies-manage:focus-visible {
  outline: 2px solid var(--fo-croute);
  outline-offset: 3px;
}

/* ── Le bandeau COOKIES (modules/cookies/views/banner.php) ──
   Il s'affiche sur TOUTES les pages et il sortait en texte brut avec des
   boutons système : c'est la première chose qu'un visiteur voit, et c'était
   la seule chose du site qui n'était pas habillée. */
.s-cookies {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  padding: var(--fo-e-4);
}
.s-cookies-box {
  width: min(100% - 2 * var(--fo-e-4), 940px);
  margin-inline: auto;
  padding: var(--fo-e-4) var(--fo-e-5);
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: 0 24px 60px rgba(20, 14, 9, .3);
  animation: fo-cookies-monte .5s cubic-bezier(.16, .8, .3, 1) both;
}
@keyframes fo-cookies-monte {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .s-cookies-box { animation: none; } }

.s-cookies-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--fo-e-2);
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt);
}
.s-cookies-image { width: 26px; height: 26px; flex: 0 0 auto; }
.s-cookies-body { margin: 0; font-size: var(--fo-t-s); line-height: 1.6; color: var(--fo-txt-2); }
.s-cookies-links { display: flex; flex-wrap: wrap; gap: var(--fo-e-3); margin: var(--fo-e-2) 0 0; padding: 0; list-style: none; }
.s-cookies-link { font-size: var(--fo-t-xs); color: var(--fo-braise); }

.s-cookies-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-2);
  margin-top: var(--fo-e-4);
}
.s-cookies-btn {
  padding: .7em 1.4em;
  font: inherit;
  font-size: var(--fo-t-s);
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), color var(--fo-transition),
              border-color var(--fo-transition), transform var(--fo-transition);
}
.s-cookies-btn:hover { transform: translateY(-2px); }
/* Accepter et refuser ont le MÊME poids visuel : c'est la règle, un refus
   ne doit pas être plus difficile qu'un accord. */
.s-cookies-btn--accept {
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  color: #fff;
}
.s-cookies-btn--accept:hover { background: var(--fo-braise-fonce); }
.s-cookies-btn--reject {
  background: transparent;
  border: 1px solid var(--fo-txt-2);
  color: var(--fo-txt);
}
.s-cookies-btn--reject:hover { background: var(--fo-txt); color: var(--fo-fond-0); }
.s-cookies-btn--custom {
  background: none;
  border: 0;
  color: var(--fo-txt-3);
  text-decoration: underline;
  padding-inline: .6em;
}
.s-cookies-btn--custom:hover { color: var(--fo-braise); }
.s-cookies-btn--save {
  background: var(--fo-txt);
  border: 1px solid var(--fo-txt);
  color: var(--fo-fond-0);
}

/* Le panneau de réglage fin. */
.s-cookies-panel { margin-top: var(--fo-e-4); padding-top: var(--fo-e-4); border-top: 1px solid var(--fo-trait); }
.s-cookies-list { margin: 0; padding: 0; list-style: none; }
.s-cookies-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fo-t-s);
  font-weight: 600;
  color: var(--fo-txt);
}
.s-cookies-cat-icon { width: 18px; height: 18px; }
.s-cookies-cat-lock { font-size: var(--fo-t-xs); color: var(--fo-txt-3); }
.s-cookies-cat-desc {
  margin: 2px 0 var(--fo-e-3) 28px;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  line-height: 1.5;
}

/* Le bandeau porte une classe de variante et deux conteneurs internes que le
   relevé initial n'avait pas montrés. */
.s-cookies--bandeau { position: fixed; inset: auto 0 0; }
.s-cookies-visual { display: flex; align-items: flex-start; gap: var(--fo-e-3); }
.s-cookies-text { flex: 1 1 auto; min-width: 0; }
.s-cookies-manage { margin: 0; }
.s-cookies-panel-actions { display: flex; flex-wrap: wrap; gap: var(--fo-e-2); margin-top: var(--fo-e-3); }

/* =============================================================================
   L'ÉQUIPE — modules/team/views/equipe.php
   Classes : .s-team, .s-team-member, .s-team-photo, .s-team-name,
             .s-team-role, .s-team-bio, .s-team-links

   Une équipe se lit en VISAGES : la photo prend toute la largeur de la carte
   et reste carrée, quel que soit le fichier déposé par le client. Le nom en
   serif, le rôle en doré, la bio en gris — trois niveaux, pas quatre.
   ============================================================================= */
.s-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fo-e-5);
  margin-top: var(--fo-e-6);
}

.s-team-member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* La photo est le seul élément vraiment adouci du pack, comme les autres
   images : `cover` + ratio carré, pour qu'un portrait vertical déposé par le
   client ne déforme pas la grille. `center 22%` cadre sur le visage plutôt
   que sur le milieu du buste. */
.s-team-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--fo-rayon-img);
  background: var(--fo-fond-2);
  transition: transform var(--fo-transition);
}
.s-team-member:hover .s-team-photo { transform: translateY(-4px); }

.s-team-name {
  margin-top: var(--fo-e-4);
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  line-height: 1.2;
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-txt);
}

.s-team-role {
  margin-top: var(--fo-e-1);
  font-size: var(--fo-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--fo-suivi-sur);
  color: var(--fo-croute-fonce);
}

/* La grigne sous le rôle : la signature du pack, à sa taille la plus discrète. */
.s-team-role::after {
  content: '';
  display: block;
  width: 34px;
  height: 7px;
  margin-top: var(--fo-e-3);
  background: var(--fo-grigne-marque) left center / contain no-repeat;
  opacity: .85;
}

.s-team-bio {
  margin: var(--fo-e-3) 0 0;
  font-size: var(--fo-t-s);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}

.s-team-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-2);
  margin: var(--fo-e-3) 0 0;
  padding: 0;
  list-style: none;
}
.s-team-link {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-2);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: 999px;
  transition: color var(--fo-transition), border-color var(--fo-transition);
}
.s-team-link:hover { color: var(--fo-braise); border-color: var(--fo-braise); }

/* =============================================================================
   LES MISES EN AVANT — modules/highlights/views/mises-en-avant.php
   Classes : .s-highlights, .s-highlight, .s-highlight-image,
             .s-highlight-overline, .s-highlight-title, .s-highlight-subtitle,
             .s-highlight-text, .s-highlight-link

   Ce sont des CAUTIONS (presse, label, fournisseur), pas des produits : la
   carte reste sobre, sur fond blanc, avec l'image en médaillon plutôt qu'en
   bandeau. Un bandeau photo aurait fait « article de blog ».
   ============================================================================= */
.s-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--fo-e-4);
  margin-top: var(--fo-e-6);
}

.s-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: var(--fo-e-5);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-2);
  box-shadow: var(--fo-ombre);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}
.s-highlight:hover {
  transform: translateY(-3px);
  box-shadow: var(--fo-ombre-haute);
}

/* L'image COIFFE la carte au lieu d'être un médaillon.
   Premier essai : un rond de 76 px. À l'écran, la photo déposée par le client
   est cadrée large (un sac de farine posé sur un plan), et un rond de 76 px
   n'en montre qu'un fragment illisible. Une image ne sert à rien si on ne
   reconnaît pas ce qu'elle montre. */
.s-highlight-image {
  width: calc(100% + var(--fo-e-5) * 2);
  max-width: none;
  margin: calc(var(--fo-e-5) * -1) calc(var(--fo-e-5) * -1) 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--fo-fond-2);
}

.s-highlight-overline {
  margin-top: var(--fo-e-5);
  font-size: var(--fo-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--fo-suivi-sur);
  color: var(--fo-braise);
}

.s-highlight-title {
  margin-top: var(--fo-e-2);
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  line-height: 1.2;
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-txt);
}

.s-highlight-subtitle {
  margin-top: var(--fo-e-1);
  font-size: var(--fo-t-s);
  color: var(--fo-txt-3);
}

.s-highlight-text {
  margin: var(--fo-e-3) 0 0;
  font-size: var(--fo-t-s);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}

.s-highlight-link {
  margin-top: var(--fo-e-4);
  font-size: var(--fo-t-s);
  font-weight: 600;
  color: var(--fo-braise);
  border-bottom: 1px solid currentColor;
}
.s-highlight-link:hover { color: var(--fo-braise-fonce); }

/* =============================================================================
   L'AGENDA — modules/events/views/agenda.php
   Classes : .s-agenda, .s-event, .s-event-date, .s-event-time,
             .s-event-date-end, .s-event-title, .s-event-link,
             .s-event-location, .s-event-excerpt

   Pas une grille de cartes : une LISTE. Ce qu'on cherche dans un agenda,
   c'est la date, et on la cherche en balayant une colonne — trois cartes
   côte à côte obligent à lire trois fois.
   ============================================================================= */
.s-agenda {
  display: flex;
  flex-direction: column;
  margin-top: var(--fo-e-6);
  border-top: 1px solid var(--fo-trait);
}

.s-event {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  /* GOUTTIÈRE HORIZONTALE SEULEMENT. Un `gap` unique s'applique aussi entre
     les LIGNES : titre, lieu et description occupent chacun la leur, et
     l'événement se retrouve étalé sur trois cents pixels de vide. */
  gap: 0 var(--fo-e-5);
  align-items: start;
  padding: var(--fo-e-5) 0;
  border-bottom: 1px solid var(--fo-trait);
  transition: background var(--fo-transition);
}
.s-event:hover { background: var(--fo-croute-voile); }

/* La date est le point d'entrée : en serif, à la taille d'un sous-titre. */
.s-event-date {
  display: flex;
  flex-direction: column;
  gap: var(--fo-e-1);
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  line-height: 1.1;
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-braise);
}
.s-event-time {
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 600;
  letter-spacing: var(--fo-suivi-sur);
  text-transform: uppercase;
  color: var(--fo-txt-3);
}

/* La date de fin vient sous la date de début, précédée d'un tiret : c'est le
   seul endroit où le pack en écrit un, parce qu'il note un intervalle. */
.s-event-date-end {
  grid-column: 1;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-m);
  color: var(--fo-txt-3);
}
.s-event-date-end::before { content: '→ '; }

.s-event-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  line-height: 1.25;
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-txt);
}
.s-event-link { color: inherit; }
.s-event-link:hover { color: var(--fo-braise); }

.s-event-location {
  grid-column: 2;
  display: block;
  margin-top: var(--fo-e-2);
  font-size: var(--fo-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--fo-suivi-sur);
  color: var(--fo-croute-fonce);
}

.s-event-excerpt {
  grid-column: 2;
  max-width: var(--fo-lecture);
  margin: var(--fo-e-3) 0 0;
  font-size: var(--fo-t-s);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}

/* Un événement passé reste lisible mais cesse d'appeler : la prise le marque,
   le pack l'estompe. Ne jamais le cacher — il prouve que la maison vit. */
.s-event[data-past="1"] { opacity: .5; }
.s-event[data-past="1"] .s-event-date { color: var(--fo-txt-3); }

/* =============================================================================
   LES TÉMOIGNAGES — modules/testimonials/views/temoignages.php

   FILET, pas la mise en page principale : l'accueil dessine son propre mur
   défilant à partir des mêmes données (cf. pages/accueil.php). Ces règles
   servent le jour où quelqu'un inclut la prise telle quelle sur une autre
   page — sans elles, il obtiendrait des citations en HTML nu.
   ============================================================================= */
.s-temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fo-e-4);
  margin-top: var(--fo-e-5);
}

.s-temoignage {
  display: flex;
  flex-direction: column;
  gap: var(--fo-e-3);
  margin: 0;
  padding: var(--fo-e-5);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-2);
  box-shadow: var(--fo-ombre);
}
.s-temoignage[data-featured="1"] { border-color: var(--fo-croute); }

.s-temoignage-quote {
  margin: 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-m);
  line-height: 1.55;
  color: var(--fo-txt);
}
.s-temoignage-quote::before { content: '\201C'; }
.s-temoignage-quote::after  { content: '\201D'; }

.s-temoignage-rating {
  align-self: flex-start;
  padding: 2px 10px;
  font-size: var(--fo-t-xs);
  font-weight: 700;
  color: var(--fo-encre);
  background: var(--fo-croute);
  border-radius: 999px;
}

.s-temoignage-author {
  display: flex;
  align-items: center;
  gap: var(--fo-e-3);
  margin-top: auto;
}
.s-temoignage-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}
.s-temoignage-name { font-weight: 700; color: var(--fo-txt); }
.s-temoignage-context {
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
}
/* Nom et contexte se suivent dans le même flex : on les empile pour qu'ils se
   lisent comme une signature, pas comme deux mots posés côte à côte. */
.s-temoignage-author .s-temoignage-name,
.s-temoignage-author .s-temoignage-context { display: block; }
.s-temoignage-author > span:not(.s-temoignage-name):not(.s-temoignage-context) { display: block; }

/* =============================================================================
   LES ANNONCES — modules/popup/views/popup.php
   Classes : .s-popup, .s-popup-bandeau, .s-popup-modale, .s-popup-box,
             .s-popup-image, .s-popup-title, .s-popup-text, .s-popup-cta,
             .s-popup-close

   ATTENTION AU PIÈGE : la prise sort `hidden`, et c'est son script qui la
   révèle selon la fréquence choisie (toujours / par session / par visiteur).
   Un `display:` posé sur `.s-popup` écraserait `hidden` et l'annonce
   s'afficherait pour tout le monde, tout le temps, y compris après fermeture.
   D'où le `:not([hidden])` sur TOUTES les règles qui donnent un display.

   Étagement : le bandeau de consentement est à 80 et doit rester devant (on
   ne recouvre pas une obligation légale par une promotion). L'annonce se
   place donc en dessous — 70 pour le bandeau, 88 pour la modale, qui elle
   est un dialogue et prend la main sur la page.
   ============================================================================= */
.s-popup[hidden] { display: none !important; }

/* LE CONSENTEMENT D'ABORD.
   Le squelette pose l'annonce puis le bandeau de consentement : les deux
   atterrissent en bas de l'écran et se recouvrent. Une annonce commerciale
   n'a pas à disputer la place à une demande de consentement, et un visiteur
   n'a pas à trancher entre deux bandes empilées.
   L'annonce s'efface donc tant que le consentement n'a pas été donné, et
   revient d'elle-même : `hidden` est posé sur .s-cookies par son propre
   script au moment du choix, et `:has()` réévalue en direct. Aucun JS de
   notre côté. */
.s-popup:has(~ .s-cookies:not([hidden])) { display: none !important; }

/* ── LE BANDEAU : une bande fine, ancrée en bas ──
   En bas et pas en haut : la capsule du menu occupe déjà le haut, et un
   bandeau qui pousse le contenu au chargement fait sauter la page. */
.s-popup-bandeau:not([hidden]) {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fo-e-3) var(--fo-e-5);
  padding: var(--fo-e-3) calc(var(--fo-e-5) + 2.5rem) var(--fo-e-3) var(--fo-e-5);
  background: var(--fo-fond-3);
  color: var(--fo-txt-clair);
  box-shadow: 0 -6px 24px rgba(42, 31, 23, .22);
  animation: fo-popup-monte .45s cubic-bezier(.16, .8, .3, 1) both;
}
@keyframes fo-popup-monte {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-popup-bandeau:not([hidden]) { animation: none; }
}

.s-popup-bandeau .s-popup-text {
  margin: 0;
  font-size: var(--fo-t-s);
  line-height: 1.5;
  color: color-mix(in srgb, var(--fo-txt-clair) 88%, transparent);
}

/* ── LA MODALE : un dialogue centré, avec son voile ── */
.s-popup-modale:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: grid;
  place-items: center;
  padding: var(--fo-e-4);
  background: rgba(33, 24, 15, .58);
  animation: fo-popup-voile .3s ease both;
}
@keyframes fo-popup-voile { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .s-popup-modale:not([hidden]) { animation: none; }
}

.s-popup-box {
  position: relative;
  width: min(460px, 100%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  padding: var(--fo-e-5);
  text-align: center;
  background: var(--fo-fond-0);
  border-radius: var(--fo-rayon-2);
  box-shadow: var(--fo-ombre-haute);
  animation: fo-popup-pose .45s cubic-bezier(.16, .8, .3, 1) both;
}
@keyframes fo-popup-pose {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-popup-box { animation: none; }
}

/* L'image DÉBORDE du rembourrage pour coiffer la boîte : une image sagement
   rentrée dans la marge fait pièce jointe, pas illustration. */
.s-popup-image {
  display: block;
  width: calc(100% + var(--fo-e-5) * 2);
  margin: calc(var(--fo-e-5) * -1) calc(var(--fo-e-5) * -1) var(--fo-e-4);
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--fo-rayon-2) var(--fo-rayon-2) 0 0;
}

.s-popup-title {
  margin: 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-txt);
}
/* La grigne sous le titre, centrée : la même signature que partout ailleurs. */
.s-popup-title::after {
  content: '';
  display: block;
  width: 62px;
  height: 13px;
  margin: var(--fo-e-3) auto 0;
  background: var(--fo-grigne-marque) center / contain no-repeat;
}

.s-popup-modale .s-popup-text {
  margin: var(--fo-e-3) 0 0;
  font-size: var(--fo-t-m);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}
.s-popup-modale .s-popup-text > :first-child { margin-top: 0; }
.s-popup-modale .s-popup-text > :last-child  { margin-bottom: 0; }

/* ── L'appel à l'action, commun aux deux modèles ── */
.s-popup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: .7em 1.5em;
  font-weight: 600;
  font-size: var(--fo-t-s);
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--fo-transition), transform var(--fo-transition),
              box-shadow var(--fo-transition);
}
.s-popup-cta:hover {
  background: var(--fo-braise-fonce);
  border-color: var(--fo-braise-fonce);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(181, 55, 43, .32);
}
.s-popup-cta:active { transform: translateY(0); }
.s-popup-modale .s-popup-cta { margin-top: var(--fo-e-5); }

/* ── La croix ──
   44 px de cible : c'est le minimum tapable au doigt. Sur le bandeau elle est
   posée dans le rembourrage réservé à droite, sur la modale dans son angle. */
.s-popup-close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), color var(--fo-transition);
}
.s-popup-bandeau .s-popup-close {
  top: 50%;
  right: var(--fo-e-3);
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--fo-txt-clair) 70%, transparent);
}
.s-popup-bandeau .s-popup-close:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--fo-txt-clair);
}
.s-popup-modale .s-popup-close {
  top: var(--fo-e-2);
  right: var(--fo-e-2);
  color: var(--fo-txt-2);
  background: rgba(254, 249, 241, .82);
}
.s-popup-modale .s-popup-close:hover { background: var(--fo-fond-2); color: var(--fo-txt); }
.s-popup-close:focus-visible { outline: 2px solid var(--fo-braise); outline-offset: 2px; }

/* ── Téléphone ── */
@media (max-width: 640px) {
  .s-popup-bandeau:not([hidden]) {
    justify-content: flex-start;
    padding: var(--fo-e-4) calc(var(--fo-e-4) + 2.75rem) var(--fo-e-4) var(--fo-e-4);
    text-align: left;
  }
  .s-popup-bandeau .s-popup-close { top: var(--fo-e-2); right: var(--fo-e-1); transform: none; }
  .s-popup-image { aspect-ratio: 3 / 2; }
  .s-popup-box { padding: var(--fo-e-4); }
  .s-popup-image {
    width: calc(100% + var(--fo-e-4) * 2);
    margin: calc(var(--fo-e-4) * -1) calc(var(--fo-e-4) * -1) var(--fo-e-4);
  }
}

/* ══ LA SECTION « CODE » ═══════════════════════════════════════════════════
   Prise `core/Sections.php` (kit 1.5.44) :
   <section class="s-code" data-langage="php"><pre><code class="language-php">

   ⚠️ SANS STYLE, LE BLOC SORT BRUT. Il reste lisible — c'est un `<pre>` — mais
   à la police du navigateur, sans fond, et il DÉBORDE : une ligne longue
   pousse toute la page vers la droite sur téléphone. Trois choses à poser, et
   pas une de plus : une police à chasse fixe, un fond qui le détache du texte,
   et un débordement qui reste DANS le bloc.

   ⚠️ ON NE REFORMATE PAS. Le socle échappe le contenu et ne le retouche pas :
   ce qui est tapé est ce qui se copie. Pas de `white-space: normal`, pas de
   coloration syntaxique inventée ici — `data-langage` est là pour qui veut en
   brancher une, plus tard, sans toucher au thème.
   ══════════════════════════════════════════════════════════════════════════ */
.s-code {
  margin: var(--fo-e-4) 0;
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon);
}
.s-code pre {
  margin: 0;
  padding: var(--fo-e-4);
  overflow-x: auto;
}
.s-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  line-height: 1.65;
  color: var(--fo-txt);
  white-space: pre;
}