/* ==========================================================================
   SACHA FOOD — Composants de page
   Complète style.css : héros, cartes, carte produits, galerie, formulaire
   ========================================================================== */

/* ═══════════════════════════════════════════════════════ HÉROS ACCUEIL ══ */

.heros {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

.heros__grille {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.heros h1 {
  font-size: var(--t-3xl);
  margin-bottom: 1.5rem;
}

.heros h1 em {
  font-style: italic;
  color: var(--rose);
}

.heros__accroche {
  font-size: var(--t-md);
  color: var(--encre-douce);
  max-width: 44ch;
  margin: 0 0 2.4rem;
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 2.8rem;
}

/* preuves chiffrées sous les boutons */
.preuves {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--lin);
}

.preuve__valeur {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.1;
}

.preuve__libelle {
  display: block;
  font-size: var(--t-xs);
  color: var(--pierre);
  letter-spacing: .04em;
  margin-top: .2rem;
}

/* mosaïque du héros */
.mosaique {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gouttiere);
  aspect-ratio: 1 / 1.06;
}

.mosaique figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--sable);
}

.mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}

.mosaique figure:hover img { transform: scale(1.04); }

.mosaique figure:first-child { grid-row: span 2; }
.mosaique figure:nth-child(4) { grid-column: span 2; }

/* ════════════════════════════════════════════════════ BANDEAU DE PAGE ══ */

.banniere {
  background: var(--champagne-profond);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--lin);
}

.banniere h1 {
  font-size: var(--t-2xl);
  margin-bottom: 1rem;
}

.banniere p {
  color: var(--encre-douce);
  font-size: var(--t-md);
  max-width: var(--mesure);
  margin: 0;
}

/* fil d'Ariane */
.ariane {
  font-size: var(--t-xs);
  color: var(--pierre);
  margin-bottom: 1.4rem;
  letter-spacing: .02em;
}

.ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ariane li::after {
  content: "/";
  margin-left: .5rem;
  color: var(--taupe);
}

.ariane li:last-child::after { content: none; }

.ariane a { text-decoration: none; transition: color var(--transition); }
.ariane a:hover { color: var(--rose); }

/* ════════════════════════════════════════════════════════════ CARTES ══ */

.grille {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }

.fiche {
  display: flex;
  flex-direction: column;
  background: var(--ivoire);
  border: 1px solid var(--lin);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.fiche:hover {
  border-color: var(--taupe);
  box-shadow: var(--ombre);
  transform: translateY(-2px);
}

.fiche__image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sable);
}

.fiche__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}

.fiche:hover .fiche__image img { transform: scale(1.04); }

.fiche__corps {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .8rem;
}

.fiche__titre { font-size: var(--t-lg); }

.fiche__texte {
  color: var(--encre-douce);
  font-size: var(--t-sm);
  margin: 0;
  flex: 1;
}

.fiche__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--lin);
  font-size: var(--t-xs);
  color: var(--pierre);
}

.fiche__meta b {
  color: var(--encre);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════ FORMULES ══ */

.formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

.formule {
  position: relative;
  background: var(--ivoire);
  border: 1px solid var(--lin);
  border-radius: var(--rayon);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.formule:hover { box-shadow: var(--ombre); }

.formule--vedette {
  border-color: var(--rose);
  box-shadow: var(--ombre);
}

.formule__fanion {
  position: absolute;
  top: 0;
  right: clamp(1.8rem, 3vw, 2.4rem);
  transform: translateY(-50%);
  background: var(--rose);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .32rem .8rem;
  border-radius: 100px;
}

.formule__nom {
  font-size: var(--t-lg);
  margin-bottom: .5rem;
}

.formule__invites {
  font-size: var(--t-xs);
  color: var(--pierre);
  letter-spacing: .03em;
  margin: 0 0 1.4rem;
}

.formule__prix {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  font-weight: 600;
  color: var(--rose);
  line-height: 1;
  margin: 0;
}

.formule__amplitude {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--pierre);
  display: block;
  margin-top: .45rem;
  letter-spacing: 0;
}

.formule__liste {
  list-style: none;
  margin: 1.8rem 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--lin);
  display: grid;
  gap: .75rem;
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.formule__liste li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
}

.formule__liste svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--or);
  transform: translateY(1px);
}

/* ══════════════════════════════════════════════════════ CARTE PRODUITS ══ */

.carte-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.famille { break-inside: avoid; }

.famille__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .8rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--taupe);
}

.famille__titre { font-size: var(--t-lg); }

.famille__prix-unite {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--rose);
  background: var(--rose-voile);
  padding: .25rem .65rem;
  border-radius: 100px;
  white-space: nowrap;
}

.plats { list-style: none; margin: 0; padding: 0; }

.plat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1.2rem;
  align-items: baseline;
  padding: .8rem 0;
  border-bottom: 1px solid var(--lin);
}

.plat__nom,
.plat__prix { line-height: 1.4; }

.plat:last-child { border-bottom: 0; }

.plat__nom {
  font-weight: 500;
  font-size: var(--t-base);
}

.plat__garniture {
  grid-column: 1 / -1;
  font-size: var(--t-xs);
  color: var(--pierre);
  line-height: 1.45;
  margin: .15rem 0 0;
  max-width: 44ch;
}

.plat__prix {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--rose);
  white-space: nowrap;
  text-align: right;
}

/* la quantité suit le prix sur la même ligne : la rangée reste compacte */
.plat__prix small {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--pierre);
  margin-left: .35rem;
}

/* tableau de tarifs dégressifs */
.tarifs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin-top: 1.2rem;
}

.tarifs caption {
  text-align: left;
  font-size: var(--t-xs);
  color: var(--pierre);
  padding-bottom: .8rem;
  letter-spacing: .03em;
}

.tarifs th,
.tarifs td {
  text-align: left;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--lin);
}

.tarifs th {
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pierre);
  background: var(--champagne-profond);
}

.tarifs td + td,
.tarifs th + th { text-align: right; font-variant-numeric: tabular-nums; }

/* ═════════════════════════════════════════════════════════════ ÉTAPES ══ */

.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.etapes li {
  counter-increment: etape;
  position: relative;
  padding-top: 3.6rem;
}

.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--rose);
  line-height: 1;
}

.etapes li::after {
  content: "";
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 26px;
  height: 1px;
  background: var(--or);
}

.etapes h3 { font-size: var(--t-lg); margin-bottom: .5rem; }

.etapes p {
  color: var(--encre-douce);
  font-size: var(--t-sm);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════ GALERIE ══ */

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
}

.galerie figure {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--sable);
  position: relative;
}

.galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}

.galerie figure:hover img { transform: scale(1.05); }

.galerie figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem .95rem .85rem;
  font-size: var(--t-xs);
  color: #fff;
  background: linear-gradient(to top, rgba(46, 42, 38, .78), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
}

.galerie figure:hover figcaption,
.galerie figure:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* bandeau panoramique */
.panorama {
  margin: 0 0 var(--gouttiere);
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--sable);
}

.panorama img { width: 100%; }

/* ═════════════════════════════════════════════════════════════ CITATION ══ */

.citation {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
}

.citation blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--encre);
}

.citation blockquote p { margin: 0; }

.citation cite {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pierre);
}

/* ═════════════════════════════════════════════════════════════════ FAQ ══ */

.faq { max-width: var(--mesure); }

.faq details { border-bottom: 1px solid var(--lin); }

.faq summary {
  font-family: var(--serif);
  font-size: var(--t-lg);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 1.35rem 0;
  transition: color var(--transition);
}

.faq summary:hover { color: var(--rose); }
.faq summary::-webkit-details-marker { display: none; }

.faq summary span {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.faq summary span::before,
.faq summary span::after {
  content: "";
  position: absolute;
  background: var(--rose);
  transition: transform var(--transition);
}

.faq summary span::before {
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq summary span::after {
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}

.faq details[open] summary span::after { transform: translateX(-50%) scaleY(0); }

.faq details p {
  margin: 0 0 1.4rem;
  color: var(--encre-douce);
  font-size: var(--t-sm);
  max-width: 58ch;
}

/* ══════════════════════════════════════════════════════════════ CONTACT ══ */

.contact-grille {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.coordonnees { margin: 0; }

.coordonnees div + div { margin-top: 1.7rem; }

.coordonnees dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .35rem;
}

.coordonnees dd {
  margin: 0;
  font-size: var(--t-md);
}

.coordonnees a {
  text-decoration: none;
  border-bottom: 1px solid var(--taupe);
  transition: border-color var(--transition), color var(--transition);
}

.coordonnees a:hover { color: var(--rose); border-bottom-color: var(--rose); }

/* formulaire */

.formulaire {
  background: var(--ivoire);
  border: 1px solid var(--lin);
  border-radius: var(--rayon);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: grid;
  gap: 1.2rem;
}

.champ { display: grid; gap: .45rem; }

.champ label {
  font-size: var(--t-sm);
  font-weight: 600;
}

.champ label span { color: var(--rose); }

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: var(--t-sm);
  padding: .78rem .9rem;
  background: var(--champagne);
  border: 1px solid var(--lin);
  color: var(--encre);
  border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--taupe); }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(183, 110, 121, .12);
}

.champ textarea { resize: vertical; min-height: 7.5rem; }

.champ--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.formulaire__note {
  font-size: var(--t-xs);
  color: var(--pierre);
  margin: 0;
  line-height: 1.6;
}

.formulaire__alerte {
  background: var(--rose-voile);
  border-left: 2px solid var(--rose);
  padding: .9rem 1.1rem;
  font-size: var(--t-xs);
  color: var(--encre-douce);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════ RESPONSIVE ══ */

/* Tablette large : les étapes passent sur deux rangées */
@media (max-width: 1024px) {
  .etapes { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

/* Tablette : la formule vedette prend toute la largeur sous les deux autres */
@media (max-width: 900px) {
  .formules { grid-template-columns: repeat(2, 1fr); }
  .formule--vedette { grid-column: 1 / -1; order: -1; }
  .formule__fanion { right: auto; left: clamp(1.8rem, 3vw, 2.4rem); }
}

@media (max-width: 900px) {
  .heros__grille { grid-template-columns: 1fr; gap: 3rem; }
  .mosaique { aspect-ratio: 3 / 2; }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .carte-grille { grid-template-columns: 1fr; }
  .contact-grille { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 620px) {
  .grille--3,
  .grille--2 { grid-template-columns: 1fr; }

  .formules { grid-template-columns: 1fr; }
  .formule--vedette { grid-column: auto; }

  .etapes { grid-template-columns: 1fr; gap: 2rem; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .champ--duo { grid-template-columns: 1fr; }
  .preuves { gap: 1.5rem 2rem; }
  .mosaique { aspect-ratio: 1 / 1.1; }
  .heros__actions .bouton { flex: 1 1 auto; }
}

@media (max-width: 400px) {
  .galerie { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════ BANDEAU COOKIES ══ */

.cookies {
  position: fixed;
  inset: auto 0 0;
  z-index: 200;
  background: var(--ivoire);
  border-top: 1px solid var(--lin);
  box-shadow: 0 -4px 30px rgba(46, 42, 38, .1);
  padding: clamp(1.2rem, 3vw, 1.8rem) 0;
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}

.cookies[data-visible="true"] { transform: translateY(0); }

.cookies__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.cookies__texte {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--encre-douce);
  max-width: 62ch;
}

.cookies__texte a { color: var(--rose); }

.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  flex-shrink: 0;
}

.cookies__actions .bouton { padding: .68rem 1.3rem; }

/* ══════════════════════════════════════════════════════════════ ERREUR ══ */

.erreur {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section);
}

.erreur .erreur__code {
  font-family: var(--serif);
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--rose);
  max-width: none;
  margin: 0 0 1rem;
}

.erreur h1 {
  font-size: var(--t-xl);
  margin-bottom: 1rem;
}

.erreur p {
  color: var(--encre-douce);
  font-size: var(--t-md);
  max-width: 48ch;
  margin: 0 auto 2.2rem;
}

.erreur__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}

/* ═════════════════════════════════════════════ VALIDATION FORMULAIRE ══ */

.champ__erreur {
  font-size: var(--t-xs);
  color: #8c2f39;
  margin: 0;
}

.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: #8c2f39;
  background: #fdf6f6;
}

.champ input[aria-invalid="true"]:focus,
.champ textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(140, 47, 57, .12);
}

/* piège à robots : invisible pour les humains, rempli par les spambots */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__retour {
  padding: .9rem 1.1rem;
  border-radius: var(--rayon);
  font-size: var(--t-sm);
  margin: 0;
}

.formulaire__retour[data-etat="succes"] {
  background: #f0f5ee;
  border-left: 2px solid #6b7f6e;
  color: #3f4d41;
}

.formulaire__retour[data-etat="echec"] {
  background: #fdf6f6;
  border-left: 2px solid #8c2f39;
  color: #6e2029;
}

/* ═══════════════════════════════════════════════════ PAGES LÉGALES ══ */

.legal h2 {
  font-size: var(--t-lg);
  margin: 2.8rem 0 1rem;
}

.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  font-size: var(--t-md);
  margin: 1.8rem 0 .6rem;
}

.legal p,
.legal li {
  color: var(--encre-douce);
  font-size: var(--t-sm);
}

.legal ul { padding-left: 1.2rem; }

.legal li { margin-bottom: .5rem; }

.legal a { color: var(--rose); }

.legal__maj {
  font-size: var(--t-xs);
  color: var(--pierre);
  padding-top: 2rem;
  margin-top: 3rem;
  border-top: 1px solid var(--lin);
}

@media (max-width: 720px) {
  .cookies__interieur { flex-direction: column; align-items: stretch; }
  .cookies__actions .bouton { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════ PAGE TARIFS ══ */

.prix-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.prix-carte {
  background: var(--ivoire);
  border: 1px solid var(--lin);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.prix-carte:hover { border-color: var(--taupe); box-shadow: var(--ombre); }

.prix-carte__valeur {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--rose);
  margin: 0;
}

.prix-carte__nom {
  font-size: var(--t-md);
  margin: 0;
}

.prix-carte__detail {
  font-size: var(--t-sm);
  color: var(--encre-douce);
  margin: 0;
  flex: 1;
}

.prix-carte--note {
  background: var(--rose-voile);
  border-color: transparent;
  justify-content: center;
}

/* ce qui est compris / à prévoir */

.inclus {
  background: var(--ivoire);
  border: 1px solid var(--lin);
  border-radius: var(--rayon);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}

.inclus h3 {
  font-size: var(--t-lg);
  margin-bottom: 1.3rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--lin);
}

.inclus ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.inclus li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}

.inclus svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--or);
  transform: translateY(1px);
}

.inclus--non li { padding-left: 1.4rem; position: relative; }

.inclus--non li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 1px;
  background: var(--taupe);
}

/* ═══════════════════════════════════════════════════════════ ARTICLES ══ */

/* carte d'article entièrement cliquable */
.fiche__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.fiche__date {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: var(--t-xs);
  color: var(--pierre);
  letter-spacing: .03em;
  margin: 0;
}

.fiche__lien .lien-suite { margin-top: auto; }

/* corps d'article */

.article__entete {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pierre);
  margin: 0 0 1.2rem;
}

.article__entete .ariane ol { justify-content: center; }

.article__titre {
  font-size: var(--t-2xl);
  margin-bottom: 1.2rem;
}

.article__chapeau {
  font-size: var(--t-md);
  color: var(--encre-douce);
  margin: 0;
}

.article__image {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--sable);
  aspect-ratio: 16 / 8;
}

.article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__corps {
  max-width: 40rem;
  margin-inline: auto;
  font-size: 1.06rem;
  line-height: 1.8;
}

.article__corps > p:first-of-type {
  font-size: 1.16rem;
  color: var(--encre);
}

.article__corps h2 {
  font-size: var(--t-xl);
  margin: 2.8rem 0 1.1rem;
}

.article__corps h3 {
  font-size: var(--t-lg);
  margin: 2rem 0 .7rem;
}

.article__corps p {
  color: var(--encre-douce);
  margin: 0 0 1.3rem;
}

.article__corps strong { color: var(--encre); font-weight: 600; }

.article__corps ul {
  margin: 0 0 1.5rem;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: .8rem;
}

.article__corps li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--encre-douce);
}

.article__corps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 6px;
  height: 6px;
  background: var(--or);
  border-radius: 50%;
}

.article__corps a { color: var(--rose); }

.article__pied {
  max-width: 40rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--lin);
}

/* ══════════════════════════════════════════════════ LOGO DANS L'EN-TÊTE ══ */

.marque__logo {
  width: 2.9rem;
  height: 2.9rem;
  flex-shrink: 0;
}

.pied .marque__logo { width: 2.6rem; height: 2.6rem; }

/* ══════════════════════════════════════════════════════════ RESPONSIVE ══ */

@media (max-width: 900px) {
  .prix-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .prix-grille { grid-template-columns: 1fr; }
  .article__image { aspect-ratio: 4 / 3; }
}

/* ════════════════════════════════════════════════ VIDÉO PRÉSENTATION ══ */

.presentation-grille {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.video-cadre {
  position: relative;
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--sable);
  box-shadow: var(--ombre);
  max-width: 340px;
}

.video-cadre video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--encre);
}

/* ═══════════════════════════════════════════════════════ TÉMOIGNAGES ══ */

.temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

.temoignage {
  position: relative;
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--encre);
  border: 1px solid var(--lin);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.temoignage:hover {
  border-color: var(--taupe);
  box-shadow: var(--ombre);
  transform: translateY(-2px);
}

.temoignage video {
  display: block;
  width: 100%;
  height: auto;
  /* Format natif des vidéos : aucun rognage, l'image reste entière. */
  aspect-ratio: 9 / 16;
  background: var(--encre);
}

.temoignage figcaption {
  padding: .9rem 1rem 1rem;
  background: var(--ivoire);
  font-size: var(--t-sm);
  color: var(--encre-douce);
  border-top: 1px solid var(--lin);
}

.temoignage figcaption strong {
  display: block;
  color: var(--encre);
  font-weight: 600;
  margin-bottom: .1rem;
}

/* mention discrète sous la grille */
.videos-note {
  margin-top: clamp(1.8rem, 3vw, 2.5rem);
  font-size: var(--t-xs);
  color: var(--pierre);
  text-align: center;
}

/* Tablette : deux colonnes, largeur contenue */
@media (max-width: 900px) {
  .presentation-grille {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .presentation-grille .section__entete { margin-inline: auto; }

  .temoignages { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile : carrousel horizontal — une vidéo à la fois, on fait défiler
   du doigt. Six vidéos verticales empilées feraient cinq écrans de haut. */
@media (max-width: 620px) {
  .temoignages {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: .9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--marge);
    /* déborde jusqu'aux bords de l'écran, pour un glissement naturel */
    margin-inline: calc(var(--marge) * -1);
    padding-inline: var(--marge);
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .temoignages::-webkit-scrollbar { display: none; }

  .temoignage {
    scroll-snap-align: start;
    transform: none;
  }

  /* pas d'effet de survol au doigt */
  .temoignage:hover { transform: none; }

  /* La vidéo garde son format d'origine : rien n'est rogné.
     C'est la largeur de la carte qui contient la hauteur. */
  .video-cadre { max-width: 235px; }
}

/* Indication de glissement, seulement sur mobile */
.temoignages-aide { display: none; }

@media (max-width: 620px) {
  .temoignages-aide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: var(--t-xs);
    color: var(--pierre);
  }

  .temoignages-aide svg { width: 14px; height: 14px; }
}

/* ═══════════════════════════════════════════ RÉSEAUX — PAGE CONTACT ══ */

.reseaux-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .3rem;
}

.reseau {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border: 1px solid var(--lin);
  border-radius: 100px;
  background: var(--ivoire);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition),
              background var(--transition), transform var(--transition);
}

.reseau svg { width: 17px; height: 17px; flex-shrink: 0; }

.reseau:hover { transform: translateY(-1px); }

/* Chaque réseau prend sa couleur officielle au survol */
.reseau--instagram:hover {
  border-color: #c13584;
  color: #c13584;
  background: #fdf4fa;
}

.reseau--tiktok:hover {
  border-color: #010101;
  color: #010101;
  background: #f6f6f6;
}

.reseau--whatsapp:hover {
  border-color: #25d366;
  color: #1da851;
  background: #f2fbf5;
}

@media (max-width: 420px) {
  .reseaux-contact { flex-direction: column; align-items: flex-start; }
  .reseau { width: 100%; }
}