/* ==========================================================================
   MiamOS — sections.css
   Briques de bandes réutilisables pour les pages de contenu.
   À charger APRÈS style.css (qui définit les variables et .wrap / .btn).

   Règle de composition : une bande = une idée = un visuel.
   Le fond change à chaque bande, jamais deux fonds identiques qui se suivent.

   Toutes les classes sont préfixées .sx- pour ne jamais entrer en collision
   avec l'existant (.band, .sec, .hero… restent la propriété de style.css).
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Variables complémentaires
   Seul l'accent froid manque à style.css. Il sert aux petits éléments
   (pastilles, cartes, une bande pleine de temps en temps), jamais au corps
   de page : la marque reste crème + or + corail.
   -------------------------------------------------------------------------- */
:root{
  --teal:#006a68;
  --teal-soft:#dcefee;
  --sx-pad:clamp(56px, 8vw, 104px);   /* respiration verticale d'une bande */
  --sx-gap:clamp(32px, 5vw, 64px);    /* écart entre les deux colonnes      */
  --sx-radius:22px;
}


/* --------------------------------------------------------------------------
   1. Socle commun à toutes les bandes
   .sx-sec pose le rythme vertical. Les variantes de fond se posent dessus.
   -------------------------------------------------------------------------- */
.sx-sec{padding:var(--sx-pad) 0;position:relative}
.sx-sec--tight{padding:calc(var(--sx-pad) * .6) 0}

/* Fonds : on alterne toujours, jamais deux identiques à la suite. */
.sx-bg-cream{background:var(--cream)}
.sx-bg-paper{background:var(--paper)}
.sx-bg-sand{background:var(--sand-lite);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sx-bg-dark{background:var(--ink);color:var(--sand-lite)}

/* Titre de bande. Le <em> passe automatiquement en Cormorant italique :
   c'est le seul endroit où l'on quitte Poppins. */
.sx-title{font-size:clamp(1.9rem, 3.6vw, 2.9rem);font-weight:900;line-height:1.12;letter-spacing:-.02em;margin:0 0 18px}
.sx-title em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;letter-spacing:0}
.sx-lead{font-size:clamp(1rem, 1.4vw, 1.15rem);line-height:1.75;color:var(--ink-soft);font-weight:500;max-width:56ch}
.sx-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}

/* Sur fond sombre ou couleur pleine, on éclaircit texte et surtitre. */
.sx-bg-dark .sx-lead,
.sx-band--dark .sx-lead,
.sx-band--corail .sx-lead,
.sx-band--teal .sx-lead{color:rgba(255,255,255,.92)}
.sx-bg-dark .sx-kicker,
.sx-band--dark .sx-kicker{color:var(--gold)}
.sx-band--corail .sx-kicker,
.sx-band--teal .sx-kicker{color:rgba(255,255,255,.86)}

/* En-tête centré, pour les bandes qui n'ont pas de colonne image. */
.sx-head{text-align:center;max-width:680px;margin:0 auto 48px}
.sx-head .sx-lead{margin-inline:auto}


/* --------------------------------------------------------------------------
   .vt — LA TOUCHE DE COULEUR DANS LE TEXTE
   Posée le 15/08 sur remarque répétée de PO : « trop de blanc, rien ne
   ressort ». Le corps de page n'avait que deux valeurs, le titre en corail
   et le texte en gris (ou en blanc atténué sur les fonds pleins) : un
   paragraphe entier se lisait à plat.

   🔑 La touche n'est PAS toujours verte : c'est la couleur qui tranche le
   mieux sur le fond en cours. Sur crème, le teal ; sur corail, un crème
   doré ; sur l'encre, l'or ; sur le teal, un vert menthe. Une seule classe
   à écrire dans le HTML, la feuille choisit la bonne valeur.

   ⚠️ Règle d'usage, sinon l'effet s'annule : on souligne le mot qui PORTE
   l'idée, jamais la phrase entière, et trois ou quatre par section au plus.
   -------------------------------------------------------------------------- */
.vt{color:var(--teal);font-weight:700}

/* 🔴 CORRIGE LE 17/08, signale par PO sur une capture du bandeau final.
   La liste ci-dessous ne couvrait que les fonds nommes .sx-*, ceux de cette
   feuille. Les sections a fond plein qui vivent dans style.css — .final
   (degrade orange), .preuve (corail), .miamali et .band (encre) — n'y
   figuraient pas : le .vt y restait en teal fonce, illisible sur orange.
   🔑 La lecon : une regle qui depend du FOND doit lister TOUS les fonds, pas
   seulement ceux du fichier ou on l'ecrit. Un oubli ne casse rien, il rend
   juste un mot invisible, et personne ne le voit avant un client. */
.sx-band--corail .vt,
.sx-card--corail .vt,
.preuve .vt,
.final .vt{color:#FFE2B0}
.sx-hero-dark .vt,
.sx-bg-dark .vt,
.sx-band--dark .vt,
.sx-card--dark .vt,
.miamali .vt,
.band .vt,
.shout .vt{color:#E8B84B}
.sx-band--teal .vt,
.sx-card--teal .vt{color:#8FE3C4}


/* --------------------------------------------------------------------------
   2. .sx-hero-dark — Bande 1 : le hero sombre
   Titre énorme à gauche, illustration au trait à droite qui déborde du cadre.
   Le débordement est volontaire : l'image sort de sa colonne et se fait
   couper par le bord de la bande, ce qui donne la sensation de mouvement.
   -------------------------------------------------------------------------- */
.sx-hero-dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}

/* Halo doré discret en haut à droite, pour éviter le fond plat. */
.sx-hero-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 84% 6%, rgba(201,162,74,.22), transparent 46%);
}
.sx-hero-dark > .wrap{position:relative;z-index:1}

.sx-hero-dark__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sx-gap);
  align-items:center;padding:clamp(56px, 7vw, 96px) 0;
}
.sx-hero-dark h1{
  font-size:clamp(2.3rem, 5.2vw, 4rem);font-weight:900;line-height:1.08;
  letter-spacing:-.028em;margin:0 0 22px;
}
.sx-hero-dark h1 em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;letter-spacing:0;color:var(--gold)}
.sx-hero-dark p{font-size:clamp(1rem, 1.4vw, 1.18rem);line-height:1.72;color:rgba(255,255,255,.92);font-weight:500;max-width:52ch}
.sx-hero-dark__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* Le surtitre du hero a besoin d'un fond translucide, pas du blanc de .eyebrow. */
.sx-hero-dark .sx-kicker{
  color:var(--gold);background:rgba(255,255,255,.07);
  border:1px solid rgba(201,162,74,.35);padding:7px 15px;border-radius:40px;
}

/* L'illustration : plus large que sa colonne, elle déborde à droite. */
.sx-hero-dark__art{position:relative}
.sx-hero-dark__art img,
.sx-hero-dark__art svg{
  display:block;width:118%;max-width:none;height:auto;
  margin-left:-4%;filter:drop-shadow(0 24px 48px rgba(0,0,0,.32));
}
/* Variante : capture d'écran plutôt qu'illustration (garde un cadre net). */
.sx-hero-dark__art.is-shot img{width:100%;margin-left:0;border-radius:var(--sx-radius);border:1px solid rgba(255,255,255,.12)}


/* --------------------------------------------------------------------------
   3. .sx-promise — Bande 2 : le bandeau de promesse
   UNE phrase, rien d'autre. Pas de bouton, pas de sous-titre, pas de liste.
   C'est une respiration entre deux bandes denses.
   -------------------------------------------------------------------------- */
.sx-promise{background:var(--sand-lite);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(38px, 5vw, 64px) 0;text-align:center}
.sx-promise p{
  font-size:clamp(1.25rem, 2.6vw, 2rem);font-weight:800;line-height:1.32;
  letter-spacing:-.015em;max-width:22ch;margin:0 auto;color:var(--ink);
}
.sx-promise p em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;letter-spacing:0}
.sx-promise--gold{background:#F7ECC9;border-color:#E8D9A8}
.sx-promise--teal{background:var(--teal-soft);border-color:#c2e2e0}
.sx-promise--teal p{color:#04413f}


/* --------------------------------------------------------------------------
   4. .sx-split — Bandes 3 et 7 : visuel d'un côté, texte de l'autre
   Par défaut visuel à gauche. .sx-split.rev inverse (texte à gauche).
   C'est la brique la plus réutilisée : les blocs alternés de la bande 7
   ne sont qu'une suite de .sx-split dont on alterne .rev et le fond.
   -------------------------------------------------------------------------- */
.sx-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sx-gap);align-items:center}
/* 🔴 FILET, pose le 15/08. La page « Le site de votre restaurant » ecrivait
   .sx-split__img la ou tout le site ecrit .sx-split__media : un nom qui
   n'existe dans aucune feuille. L'image sortait donc a sa taille NATIVE,
   1600 px de large dans une fenetre de 1450, et debordait de 319 px.
   🔑 Le nom a ete corrige, mais un nom de classe mal orthographie ne previent
   jamais : il ne casse rien, il laisse le navigateur appliquer ses defauts.
   Cette regle borne TOUTE image d'un .sx-split, quel que soit son conteneur,
   pour qu'une faute de frappe ne puisse plus faire deborder une page. */
.sx-split img{max-width:100%;height:auto}
.sx-split.rev .sx-split__media{order:2}

/* Le média : capture produit ou photo. Toujours cadré, jamais plein bord. */
.sx-split__media{position:relative}
.sx-split__media img{
  display:block;width:100%;height:auto;border-radius:var(--sx-radius);
  border:1px solid var(--line);box-shadow:var(--sh);background:var(--paper);
}
/* Une capture d'écran garde sa respiration blanche ; une photo, non. */
.sx-split__media.is-photo img{border:none;object-fit:cover;height:auto;aspect-ratio:4/3}
.sx-split__media.is-tall img{height:auto;aspect-ratio:3/4;object-fit:cover;border:none}

/* Pastille chiffrée posée sur le coin du visuel (facultative). */
.sx-split__tag{
  position:absolute;top:-14px;left:-14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-sm);
  font-size:.78rem;font-weight:700;color:var(--ink);padding:8px 15px;border-radius:40px;
}

/* Liste à coches, très utilisée dans la colonne texte. */
.sx-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin:24px 0 0;padding:0}
.sx-list li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--ink-soft);font-size:.98rem;line-height:1.6}
.sx-list li::before{
  content:"";flex:0 0 auto;width:21px;height:21px;border-radius:50%;margin-top:3px;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* Un bouton qui suit une liste collait a la derniere ligne : .sx-list n'a pas
   de marge basse, et .btn n'en a pas non plus. Signale par PO le 15/08 sur la
   bande du widget. Corrige ici plutot que page par page : le motif
   « liste puis bouton » revient dans presque toutes les bandes du site. */
.sx-list + .btn{margin-top:30px}

/* Sur fond sombre / couleur pleine, la coche passe en blanc sur transparent. */
.sx-bg-dark .sx-list li,
.sx-band--dark .sx-list li,
.sx-band--corail .sx-list li,
.sx-band--teal .sx-list li{color:rgba(255,255,255,.93)}
.sx-bg-dark .sx-list li::before,
.sx-band--dark .sx-list li::before,
.sx-band--corail .sx-list li::before,
.sx-band--teal .sx-list li::before{background-color:rgba(255,255,255,.22)}


/* --------------------------------------------------------------------------
   5. .sx-band — Bande 4 : le bloc de couleur pleine
   Texte + capture + photo humaine. C'est la bande la plus riche du gabarit,
   donc la seule autorisée à porter deux visuels : une capture produit ET
   une photo de gens. L'idée reste unique.
   -------------------------------------------------------------------------- */
.sx-band{padding:var(--sx-pad) 0;position:relative;overflow:hidden}
.sx-band--corail{background:var(--corail);color:#fff}
.sx-band--teal{background:var(--teal);color:#fff}
.sx-band--dark{background:var(--ink);color:#fff}
.sx-band--sand{background:var(--sand);color:var(--ink)}
.sx-band--sand .sx-lead{color:#5c4c3b}

.sx-band .sx-title{color:inherit}
.sx-band--corail .sx-title em,
.sx-band--teal .sx-title em{color:rgba(255,255,255,.85)}
.sx-band--dark .sx-title em{color:var(--gold)}

/* Deux colonnes : le discours à gauche, la pile de visuels à droite. */
.sx-band__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sx-gap);align-items:center}
.sx-band__grid.rev .sx-band__media{order:2}

/* La pile : capture produit, et photo humaine décalée qui la chevauche. */
.sx-band__media{position:relative;padding-bottom:52px}
.sx-band__media img{display:block;width:100%;height:auto;border-radius:var(--sx-radius);box-shadow:0 20px 50px rgba(0,0,0,.22)}
.sx-band__media .sx-shot{border:1px solid rgba(255,255,255,.16);background:var(--paper)}
/* Capture verticale (écran mobile) : sans bride, elle étire la bande sur
   toute sa hauteur et laisse la colonne texte flotter dans le vide.
   On la ramène à une largeur de téléphone, centrée. */
.sx-band__media.is-portrait{display:flex;flex-direction:column;align-items:center}
.sx-band__media.is-portrait .sx-shot{width:min(290px, 62%)}
.sx-band__media.is-portrait .sx-face{right:2%}
.sx-band__media .sx-face{
  /* Elle chevauche volontairement la carte : c'est ce qui donne la profondeur.
     Mais elle masquait le bouton et la mention « aucun débit ». On la descend
     sous la carte et on la retrecit : le chevauchement reste, le texte revient. */
  position:absolute;right:-10px;bottom:-96px;width:34%;
  aspect-ratio:1;object-fit:cover;border-radius:18px;
  border:5px solid currentColor;
}
@media(max-width:900px){
  .sx-band__media .sx-face{position:static;width:64%;margin:18px auto 0;display:block;bottom:auto}
}
/* currentColor sur une bordure d'image : on force la teinte du fond. */
.sx-band--corail .sx-band__media .sx-face{border-color:var(--corail)}
.sx-band--teal   .sx-band__media .sx-face{border-color:var(--teal)}
.sx-band--dark   .sx-band__media .sx-face{border-color:var(--ink)}
.sx-band--sand   .sx-band__media .sx-face{border-color:var(--sand)}

/* Boutons posés sur une bande de couleur : version claire. */
.sx-btn-light{background:var(--paper);color:var(--ink);border-color:transparent;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.sx-btn-light:hover{transform:translateY(-2px);background:#fff}
.sx-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.sx-btn-outline:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}


/* --------------------------------------------------------------------------
   6. .sx-stat — Bande 5 : le chiffre énorme
   Un chiffre qui occupe la moitié de l'écran, un téléphone, trois coches.
   Le chiffre doit rester un chiffre vérifiable (0 %, 24h/24, 1 jour).
   -------------------------------------------------------------------------- */
.sx-stat{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sx-gap);align-items:center}
.sx-stat__num{
  font-size:clamp(4.2rem, 12vw, 8.5rem);font-weight:900;line-height:.86;
  letter-spacing:-.05em;margin:0 0 6px;
  background:linear-gradient(125deg, var(--gold), var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sx-stat__num small{font-size:.36em;letter-spacing:-.02em;vertical-align:.14em;margin-left:2px}
.sx-stat__label{font-size:clamp(1.1rem, 1.8vw, 1.45rem);font-weight:800;line-height:1.3;margin:0 0 14px;letter-spacing:-.01em}
.sx-stat .sx-lead{max-width:46ch}
.sx-stat--corail .sx-stat__num{background:linear-gradient(125deg, var(--orange), var(--corail));-webkit-background-clip:text;background-clip:text}
.sx-stat--teal .sx-stat__num{background:linear-gradient(125deg, #0aa39f, var(--teal));-webkit-background-clip:text;background-clip:text}

/* Le téléphone : cadre CSS, l'image glisse dedans. Pas d'image de mockup. */
.sx-phone{
  position:relative;width:min(280px, 78%);margin:0 auto;
  background:var(--ink);border-radius:38px;padding:11px;
  box-shadow:0 26px 60px rgba(36,26,18,.26);
}
.sx-phone::before{  /* l'encoche */
  content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:82px;height:5px;border-radius:10px;background:rgba(255,255,255,.28);z-index:2;
}
.sx-phone img{display:block;width:100%;height:auto;border-radius:28px;aspect-ratio:9/19;object-fit:cover;object-position:top;background:var(--cream)}


/* --------------------------------------------------------------------------
   7. .sx-photos3 — Bande 6 : trois visages
   Trois photos de gens, rien d'autre. Sur fond sombre de préférence, pour
   que les photos portent toute la lumière de la bande.
   -------------------------------------------------------------------------- */
.sx-photos3{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px}
.sx-photos3 figure{margin:0;position:relative;border-radius:var(--sx-radius);overflow:hidden;background:var(--ink)}
.sx-photos3 img{display:block;width:100%;height:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sx-photos3 figure:hover img{transform:scale(1.045)}
/* La légende se pose sur la photo, sur un dégradé pour rester lisible. */
.sx-photos3 figcaption{
  position:absolute;inset:auto 0 0 0;padding:44px 20px 20px;color:#fff;
  font-weight:700;font-size:.97rem;line-height:1.35;
  background:linear-gradient(to top, rgba(20,14,9,.88), transparent);
}
.sx-photos3 figcaption span{display:block;font-weight:500;font-size:.83rem;opacity:.82;margin-top:3px}
/* Décalage vertical : la photo du milieu descend un peu, pour casser
   l'alignement au cordeau des trois vignettes. */
.sx-photos3--offset figure:nth-child(2){transform:translateY(30px)}


/* --------------------------------------------------------------------------
   8. .sx-cards4 — Bande 8 : « Allez plus loin »
   Quatre cartes colorées, chacune avec un dessin au trait qui déborde du
   coin bas-droit. Ce bloc est identique sur toutes les pages : on le copie
   tel quel, seuls les liens changent.
   -------------------------------------------------------------------------- */
.sx-cards4{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}
.sx-card{
  position:relative;overflow:hidden;border-radius:var(--sx-radius);
  padding:28px 24px 90px;min-height:260px;display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.sx-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(36,26,18,.16)}
.sx-card h3{font-size:1.12rem;font-weight:800;line-height:1.25;margin:0 0 9px;letter-spacing:-.01em}
.sx-card p{font-size:.92rem;line-height:1.6;font-weight:500;margin:0}
.sx-card__more{margin-top:auto;padding-top:16px;font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:7px}
.sx-card:hover .sx-card__more{gap:11px}
.sx-card__more{transition:gap .18s ease}

/* Le dessin au trait : surdimensionné, ancré au coin, coupé par la carte. */
/* ancienne carte a filigrane : remplacee par la version a dessin debordant, plus bas */
.sx-card__art img,
.sx-card__art svg{display:block;width:100%;height:100%;object-fit:contain}

/* Les quatre teintes. On ne mélange pas : une carte, une couleur. */
.sx-card--corail{background:var(--corail);color:#fff}
.sx-card--corail p{color:rgba(255,255,255,.93)}
.sx-card--teal{background:var(--teal);color:#fff}
.sx-card--teal p{color:rgba(255,255,255,.93)}
.sx-card--gold{background:var(--gold);color:#fff}
.sx-card--gold p{color:rgba(255,255,255,.94)}
.sx-card--sand{background:var(--sand);color:var(--ink)}
.sx-card--sand p{color:#5c4c3b}
.sx-card--dark{background:var(--ink);color:#fff}
.sx-card--dark p{color:rgba(255,255,255,.92)}


/* --------------------------------------------------------------------------
   9. .sx-cta — L'appel final
   Un encart centré, posé sur la bande, avec un liseré doré discret.
   -------------------------------------------------------------------------- */
.sx-cta{
  background:var(--ink);color:#fff;border-radius:28px;position:relative;overflow:hidden;
  padding:clamp(40px, 5.5vw, 72px) clamp(24px, 4vw, 56px);text-align:center;
}
.sx-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% -10%, rgba(201,162,74,.26), transparent 55%);
}
.sx-cta > *{position:relative;z-index:1}
.sx-cta h2{font-size:clamp(1.7rem, 3.4vw, 2.6rem);font-weight:900;line-height:1.14;letter-spacing:-.022em;margin:0 0 14px}
.sx-cta h2 em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:var(--gold);letter-spacing:0}
.sx-cta p{color:rgba(255,255,255,.92);font-weight:500;font-size:1.04rem;max-width:52ch;margin:0 auto}
.sx-cta__btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px}
/* Les réassurances sous les boutons : courtes, factuelles. */
.sx-cta__notes{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:24px;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.62)}
.sx-cta__notes span{display:inline-flex;align-items:center;gap:7px}
.sx-cta--corail{background:var(--corail)}
.sx-cta--corail::before{background:radial-gradient(circle at 50% -10%, rgba(255,255,255,.2), transparent 55%)}
.sx-cta--corail h2 em{color:#ffe2d7}


/* --------------------------------------------------------------------------
   10. .sx-faq — L'accordéon, sans une ligne de JS
   <details>/<summary> natifs. Le navigateur gère l'ouverture, le clavier
   et l'accessibilité tout seul.
   -------------------------------------------------------------------------- */
.sx-faq{max-width:820px;margin:0 auto}
.sx-faq details{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  margin-bottom:12px;box-shadow:var(--sh-sm);overflow:hidden;
}
.sx-faq details[open]{border-color:var(--sand)}
.sx-faq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:20px 22px;font-weight:700;font-size:1.02rem;line-height:1.45;color:var(--ink);
}
.sx-faq summary::-webkit-details-marker{display:none}  /* Safari */
.sx-faq summary:hover{background:var(--cream)}
.sx-faq summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}

/* Le chevron, dessiné en CSS, qui pivote à l'ouverture. */
.sx-faq summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:11px;height:11px;
  border-right:2.5px solid var(--gold-deep);border-bottom:2.5px solid var(--gold-deep);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;
}
.sx-faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.sx-faq details > div{padding:0 22px 22px;color:var(--ink-soft);font-weight:500;line-height:1.72;font-size:.97rem}
.sx-faq details > div p + p{margin-top:12px}

/* Pas d'animation d'ouverture : on l'a essayée via ::details-content et
   interpolate-size, et le panneau restait bloqué à block-size:0 (réponse
   invisible). Un accordéon qui ne s'ouvre pas est pire qu'un accordéon qui
   s'ouvre sec. Le natif s'ouvre d'un coup, partout, sans JS. On garde ça.
   Seul le chevron est animé : lui, c'est une transition sûre. */


/* --------------------------------------------------------------------------
   11. Responsive — une seule colonne sous 900px
   Toutes les grilles s'effondrent au même seuil, pour que le rythme des
   bandes reste identique sur mobile.
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .sx-cards4{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:900px){
  .sx-hero-dark__grid,
  .sx-split,
  .sx-band__grid,
  .sx-stat{grid-template-columns:1fr}

  /* Sur une colonne, le visuel repasse toujours au-dessus du texte :
     .rev n'a plus de sens et pourrait inverser l'ordre de lecture. */
  .sx-split.rev .sx-split__media,
  .sx-band__grid.rev .sx-band__media{order:0}

  /* Le hero perd son débordement : sur mobile, il ferait déborder la page. */
  .sx-hero-dark__art img,
  .sx-hero-dark__art svg{width:100%;margin-left:0}

  .sx-photos3{grid-template-columns:1fr 1fr;gap:16px}
  .sx-photos3--offset figure:nth-child(2){transform:none}
  .sx-photos3 figure:last-child:nth-child(odd){grid-column:1 / -1}
  .sx-photos3 figure:last-child:nth-child(odd) img{aspect-ratio:16/10}

  .sx-band__media{padding-bottom:0}
  .sx-band__media .sx-face{position:static;width:100%;aspect-ratio:16/10;margin-top:16px;border-width:0}

  .sx-stat{gap:36px}
  .sx-phone{margin-inline:0}
}

@media (max-width:640px){
  .sx-cards4{grid-template-columns:1fr}
  .sx-card{min-height:0;padding-bottom:76px}
  .sx-photos3{grid-template-columns:1fr}
  .sx-photos3 figure img{height:auto;aspect-ratio:4/3}
  /* (retiré : il écrasait le max-width:22ch qui donne les deux lignes) */
  .sx-cta{border-radius:20px}
  .sx-faq summary{padding:17px 18px;font-size:.97rem;gap:12px}
  .sx-faq details > div{padding:0 18px 18px}
}


/* --------------------------------------------------------------------------
   12. Confort de lecture
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sx-photos3 img,
  .sx-card,
  .sx-card__more,
  .sx-faq summary::after,
  .sx-faq details::details-content{transition:none}
  .sx-photos3 figure:hover img{transform:none}
  .sx-card:hover{transform:none}
}

/* =========================================================================
   CARTES « Allez plus loin » — version dessin qui deborde
   Reprend exactement les cartes de l'accueil : le dessin au trait sort par
   le haut de la bulle coloree. Remplace la version a filigrane.
   ========================================================================= */
.sx-cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:118px}
.sx-card{background:var(--corail);border-radius:20px;padding:96px 22px 26px;text-align:center;
         position:relative;color:#fff;text-decoration:none;display:block;
         /* overflow VISIBLE : sans ça, la règle plus haut coupe le dessin
            qui doit déborder par le haut de la bulle. C'est tout l'effet. */
         overflow:visible;
         transition:transform .16s ease, box-shadow .16s ease}
.sx-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(36,26,18,.20)}
.sx-card--corail{background:var(--corail)}
.sx-card--dark{background:var(--ink)}
.sx-card--teal{background:#006a68}
.sx-card--gold{background:#8a4a2f}
.sx-card h3{font-size:1.14rem;font-weight:800;letter-spacing:-.5px;line-height:1.2;margin:0 0 10px;color:#fff}
.sx-card p{font-size:.85rem;line-height:1.55;opacity:.93;margin:0 0 18px;color:#fff}
.sx-card__more{font-size:.82rem;font-weight:700;color:#fff;opacity:.95}
/* le dessin, pose au-dessus de la bulle */
.sx-card__art{position:absolute;top:-92px;left:50%;transform:translateX(-50%);
              width:168px;height:168px;display:block}
.sx-card__art svg{width:100%;height:100%;display:block;overflow:visible}
.sx-card__art .tr{fill:none;stroke:#111;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sx-card__art .pl{fill:#111;stroke:none}
.sx-card__art .bl{fill:#fff;stroke:#111;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
@media(max-width:900px){
  .sx-cards4{grid-template-columns:1fr 1fr;row-gap:118px;margin-top:110px}
}
@media(max-width:560px){
  .sx-cards4{grid-template-columns:1fr;row-gap:112px}
}


/* =========================================================================
   BANDE MENTHE PALE — pour les sections ou le blanc sur corail fatigue.
   Le fond est clair, le texte reste l'encre habituelle : on gagne en lisibilite
   et la page respire, comme les alternances d'Overfull.
   ========================================================================= */
.sx-band--menthe{background:#DCF0EA;color:var(--ink)}
.sx-band--menthe .sx-kicker{color:#00706b}
.sx-band--menthe .sx-title{color:var(--ink)}
.sx-band--menthe .sx-title em{color:#00706b}
.sx-band--menthe .sx-lead{color:var(--ink-soft)}
.sx-band--menthe .sx-list li{color:var(--ink)}
.sx-band--menthe .sx-list li::before,
.sx-band--menthe .sx-list li svg{color:#00706b;stroke:#00706b}
.sx-band--menthe .sx-list li span,
.sx-band--menthe .sx-list li b{color:var(--ink)}
.sx-band--menthe .sx-band__media .sx-face{border-color:#DCF0EA}
.sx-band--menthe .sx-btn-light{background:#00706b;color:#fff}
.sx-band--menthe .sx-btn-light:hover{background:#005a56}
.sx-band--menthe .sx-btn-outline{color:var(--ink);border-color:rgba(36,26,18,.28)}
.sx-band--menthe .sx-btn-outline:hover{background:rgba(36,26,18,.06)}
/* la pastille de coche des listes, en teal sur fond clair */
.sx-band--menthe .sx-list li::marker{color:#00706b}

/* place reservee sous la carte pour la photo qui deborde */
.sx-band__media{padding-bottom:96px}



/* Une PHOTO à la place du dessin dans un hero sombre */
.sx-hero-dark__art--photo{position:relative}
.sx-hero-dark__art--photo img{width:100%;border-radius:22px;display:block;
  height:auto;aspect-ratio:4/3;object-fit:cover;box-shadow:0 26px 60px rgba(0,0,0,.34)}
/* =========================================================================
   CRÉDIT PHOTO — sous l'image, en texte simple.
   Une pastille posée sur la photo mange le cliché et attire l'œil au mauvais
   endroit. Une ligne discrète en dessous se lit sans rien gêner.
   ========================================================================= */
.sx-photo-cred,
.sx-split__cred{
  display:block;margin-top:9px;font-size:.72rem;font-weight:600;
  color:var(--ink-soft);letter-spacing:.2px;line-height:1.4;
}
/* sur fond sombre, le gris chaud disparaît : on éclaircit */
.sx-hero-dark .sx-photo-cred,
.sx-bg-dark .sx-photo-cred,
.sx-band--dark .sx-photo-cred,
.sx-bg-dark .sx-split__cred{color:rgba(245,236,224,.62)}
.sx-band--corail .sx-photo-cred,
.sx-band--teal .sx-photo-cred{color:rgba(255,255,255,.85)}

/* conteneur qui porte le crédit d'une photo de partenaire */
.sx-img-wrap{position:relative;display:block}
.sx-img-wrap img{display:block;width:100%}

/* =========================================================================
   ANIMATIONS — toutes se déclenchent quand la section entre à l'écran,
   et toutes se coupent si le visiteur a demandé moins de mouvement.
   ========================================================================= */

/* ── Effet machine à écrire, pour la phrase de promesse ─────────────────── */
.sx-promise p.tape::after{content:"";display:inline-block;width:.06em;height:1em;
  background:currentColor;margin-left:.04em;vertical-align:-.08em;
  animation:tape-curseur .8s step-end infinite}
.sx-promise p.tape.fini::after{display:none}
@keyframes tape-curseur{50%{border-right-color:transparent}}

/* ── Les Miams qui montent ──────────────────────────────────────────────────
   Sur une bande teal, tout en blanc devient monochrome et plat. Le compteur
   passe donc en carte CRÈME avec le chiffre en OR : il tranche, et l'or est
   déjà la couleur des Miams dans MiamAli. Les bulles rejouent en boucle pour
   que la section reste vivante quand on la relit. */
.miams-scene{position:relative;min-height:330px;display:flex;align-items:center;justify-content:center}
.miams-compteur{background:var(--cream);border-radius:24px;padding:30px 40px;text-align:center;
  box-shadow:0 20px 46px rgba(0,0,0,.26);z-index:2;position:relative;
  border:3px solid var(--gold)}
.miams-compteur .mc-num{font-size:3.6rem;font-weight:900;letter-spacing:-2.4px;line-height:1;
  color:var(--gold-deep);font-variant-numeric:tabular-nums}
.miams-compteur .mc-lab{font-size:.7rem;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-soft);margin-top:9px}
/* la petite fourchette dorée, signe des Miams */
.miams-compteur::before{content:"";position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--gold);
  box-shadow:0 4px 12px rgba(0,0,0,.22)}
.miams-compteur::after{content:"★";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-size:1rem;color:#241a12;line-height:32px}

.miam-bulle{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);
  background:var(--gold);color:#241a12;font-weight:900;font-size:.95rem;
  padding:9px 18px;border-radius:999px;white-space:nowrap;opacity:0;
  box-shadow:0 10px 22px rgba(0,0,0,.26);pointer-events:none;z-index:3}
.miams-scene.on .miam-bulle{animation:miam-monte 4.4s ease-out infinite}
.miams-scene.on .miam-bulle:nth-child(2){animation-delay:0s}
.miams-scene.on .miam-bulle:nth-child(3){animation-delay:1.1s;margin-left:-70px}
.miams-scene.on .miam-bulle:nth-child(4){animation-delay:2.2s;margin-left:74px}
.miams-scene.on .miam-bulle:nth-child(5){animation-delay:3.3s;margin-left:-30px}
/* une bulle sur deux en crème, pour ne pas avoir quatre fois le même or */
.miams-scene .miam-bulle:nth-child(3),
.miams-scene .miam-bulle:nth-child(5){background:var(--cream);color:var(--gold-deep)}
@keyframes miam-monte{
   0%{opacity:0;transform:translate(-50%,14px) scale(.82)}
  10%{opacity:1;transform:translate(-50%,-4px) scale(1)}
  62%{opacity:1}
 100%{opacity:0;transform:translate(-50%,-172px) scale(.92)}
}

@media(prefers-reduced-motion:reduce){
  .sx-promise p.tape::after{display:none}
  .miams-scene .miam-bulle{animation:none!important;opacity:1;position:static;
    transform:none;display:inline-block;margin:4px}
  .miams-scene{flex-wrap:wrap;gap:8px}
}


/* La phrase de promesse tient sur DEUX lignes, du premier caractère au dernier.
   min-height réserve la place des deux lignes : sans elle, la bande grandit
   pendant la frappe et tout le contenu en dessous sursaute. */
.sx-promise p.tape{
  /* PAS de display:flex ici : il ferait de chaque morceau (texte, <em>, point)
     un bloc separe, et la phrase partirait sur trois lignes avec le point seul.
     On reste en texte qui coule, borne par la largeur. */
  max-width:26ch;               /* la coupure tombe apres « que vous » */
  min-height:2.64em;            /* la place des 2 lignes, des le premier caractere */
  text-align:center;
}
@media(max-width:640px){
  .sx-promise p.tape{max-width:20ch;min-height:3.96em}   /* 3 lignes sur petit écran */
}

/* =========================================================================
   PARCOURS EN 5 ÉTAPES — « comment une réservation arrive chez vous »
   Repris du deck Vision, remis à la charte MiamOS. L'étape 3 est mise en
   avant : c'est le choix entre valider soi-même et laisser tourner tout seul,
   et c'est la question que pose tout restaurateur.
   ========================================================================= */
.parc5{position:relative;margin-top:54px}
/* la ligne qui relie les pastilles, derrière tout le reste */
.parc5::before{content:"";position:absolute;top:27px;left:10%;right:10%;height:3px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));
  border-radius:3px;opacity:.5}
.parc5-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
/* 🔴 18/08 — « display:flex » repare un chevauchement de 34 px.
   .et-carte portait « height:100% », qui vaut 100 % de la hauteur de la CASE
   ENTIERE, pastille numerotee comprise, et non « ce qui reste sous la
   pastille ». Chaque carte depassait donc sa case de la hauteur de la
   pastille (54 px + 20 de marge = 74), dont 40 absorbes par la marge de la
   signature : il restait 34 px de carte posee PAR-DESSUS le texte
   « Zero appel. Zero table oubliee. », qu'on voyait passer entre les cartes.
   🔑 En colonne flex, « flex:1 » prend exactement la place restante, ce que
   height:100% ne sait pas faire. Et les cartes restent a hauteur egale. */
.et{text-align:center;opacity:0;transform:translateY(16px);
    display:flex;flex-direction:column;
    transition:opacity .5s ease, transform .5s ease}
.parc5.on .et{opacity:1;transform:none}
.parc5.on .et:nth-child(2){transition-delay:.12s}
.parc5.on .et:nth-child(3){transition-delay:.24s}
.parc5.on .et:nth-child(4){transition-delay:.36s}
.parc5.on .et:nth-child(5){transition-delay:.48s}
.et-num{width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--gold);
  font-weight:900;font-size:1.18rem;display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;position:relative;z-index:2;box-shadow:0 6px 16px rgba(36,26,18,.24)}
.et-carte{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:22px 18px 20px;box-shadow:0 6px 20px rgba(36,26,18,.07);flex:1;
  border-top:4px solid var(--sand)}
.et-ic{width:38px;height:38px;margin:0 auto 13px}
.et-ic svg{width:100%;height:100%;fill:none;stroke:var(--corail);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.et-carte p{font-size:.88rem;line-height:1.5;color:var(--ink);font-weight:600;margin:0}
.et-carte p b{color:var(--corail);font-weight:800}
.et-carte p i{font-style:normal;color:var(--gold-deep);font-weight:800}
/* ── WHATSAPP : ses vraies couleurs, mais pas la meme aux deux endroits ────
   Demande de PO le 18/08 : « le WhatsApp en vert de WhatsApp, avec le vrai
   logo ». Le vert de marque est #25D366.
   🔑 Mesure faite avant d'ecrire : #25D366 sur le blanc de la carte donne
   1,98:1. C'est illisible pour du texte (il faut 4,5:1). On separe donc :
   le LOGO garde le vert de marque #25D366 (un pictogramme de 38 px n'est pas
   du texte, et c'est la couleur officielle), le MOT prend le vert FONCE
   officiel de WhatsApp #075E54, qui monte a 7,67:1.
   ⚠️ Ne pas « corriger » le mot vers #25D366 en trouvant ca plus joli : ce
   serait un mot illisible, et le corail qu'il remplace etait deja limite. */
.et-carte p b.wa{color:#075E54}
/* Le glyphe officiel est un trace PLEIN, pas un contour : il faut annuler le
   stroke herite de .et-ic svg, sinon il ressort epaissi et bave. */
.et-ic--wa svg{fill:#25D366;stroke:none}
/* l'étape 3 : le choix, mis en avant */
.et--cle .et-num{background:var(--corail);color:#fff}
.et--cle .et-carte{border-top-color:var(--corail);box-shadow:0 12px 32px rgba(201,100,66,.20)}
.et--cle .et-ic svg{stroke:var(--corail)}
.et-bulle{display:inline-block;margin-top:11px;font-size:.63rem;font-weight:800;
  letter-spacing:.9px;text-transform:uppercase;background:#dcefee;color:#00706b;
  padding:4px 10px;border-radius:999px}
.parc5-sign{text-align:center;margin-top:40px;font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:1.5rem;color:var(--ink);font-weight:600}
@media(max-width:900px){
  .parc5::before{display:none}
  .parc5-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .et-num{width:44px;height:44px;font-size:1rem;margin-bottom:14px}
  .parc5-sign{font-size:1.15rem}
}
@media(max-width:560px){.parc5-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.et{opacity:1;transform:none;transition:none}}

/* =========================================================================
   BANDE TEAL — sortir du monochrome.
   Tout en blanc sur du teal, c'est plat et ça fatigue. On rend l'or aux
   éléments qui doivent accrocher l'œil : l'intitulé, les coches, les mots
   qui portent le sens. Le corps de texte reste clair, pour la lisibilité.
   ========================================================================= */
.sx-band--teal .sx-kicker{color:var(--gold);opacity:1;letter-spacing:2px}
.sx-band--teal .sx-title em{color:var(--gold)}
.sx-band--teal .sx-lead{color:rgba(255,255,255,.9)}
.sx-band--teal .sx-lead b,
.sx-band--teal .sx-lead strong{color:var(--gold);font-weight:800}
/* les coches passent en or plein, le texte reste blanc */
.sx-band--teal .sx-list li::before{background:var(--gold);border-color:var(--gold)}
.sx-band--teal .sx-list li svg{stroke:#04413f}
.sx-band--teal .sx-list li{color:#fff}
/* un liseré doré en tête de bande, pour la détacher de la précédente */
.sx-band--teal{position:relative}
.sx-band--teal::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8}

/* =========================================================================
   FORMULES EN TROIS BLOCS — chacun sa teinte, chacun son dessin.
   Trois nuances d'une même famille chaude plutôt que trois couleurs qui
   se disputent : le regard descend du plus simple au sur-mesure.
   ========================================================================= */
.form3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;align-items:start}
.fm{border-radius:22px;padding:74px 26px 30px;position:relative;
    transition:transform .18s ease, box-shadow .18s ease}
.fm:hover{transform:translateY(-4px)}
.fm--1{background:#F7ECC9;color:var(--ink)}                    /* sable clair */
.fm--2{background:var(--corail);color:#fff}                    /* corail, la plus choisie */
.fm--3{background:var(--ink);color:#f5ece0}                    /* encre, le sur-mesure */
/* le dessin, posé au-dessus de la carte */
.fm-art{position:absolute;top:-52px;left:50%;transform:translateX(-50%);width:104px;height:104px}
.fm-art svg{width:100%;height:100%;display:block;overflow:visible}
.fm-art .tr{fill:none;stroke:#241a12;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
.fm-art .bl{fill:#fff;stroke:#241a12;stroke-width:5.5;stroke-linejoin:round;stroke-linecap:round}
.fm-art .ac{fill:var(--gold);stroke:none}
.fm--3 .fm-art .tr{stroke:#f5ece0}
.fm--3 .fm-art .bl{fill:#241a12;stroke:#f5ece0}
.fm-nom{font-size:.68rem;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
        opacity:.72;display:block;text-align:center}
.fm-sous{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.24rem;
         text-align:center;margin:4px 0 12px;opacity:.9}
.fm-prix{font-size:2.7rem;font-weight:900;letter-spacing:-1.6px;text-align:center;line-height:1}
.fm-prix span{font-size:.92rem;font-weight:700;letter-spacing:0;opacity:.75}
.fm-prix.fm-devis{font-size:1.7rem;letter-spacing:-.8px}
.fm-note{text-align:center;font-size:.86rem;line-height:1.5;opacity:.86;margin:12px 0 20px}
.fm ul{list-style:none;padding:0;margin:0 0 24px}
.fm li{font-size:.87rem;line-height:1.5;padding:7px 0 7px 24px;position:relative}
.fm li::before{content:"✔";position:absolute;left:0;top:7px;font-size:.78rem;opacity:.8}
.fm .btn{width:100%;text-align:center;display:block}
.fm-ruban{position:absolute;top:16px;right:-6px;background:var(--gold);color:#241a12;
  font-size:.62rem;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
  padding:5px 12px;border-radius:6px 0 0 6px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
/* le bloc sur-mesure : on insiste sur ce qui le distingue */
.fm-sur{background:rgba(245,236,224,.08);border:1px solid rgba(245,236,224,.18);
  border-radius:14px;padding:14px 16px;margin:0 0 20px;font-size:.84rem;line-height:1.55}
.fm-sur b{color:var(--gold)}
@media(max-width:980px){
  .form3{grid-template-columns:1fr;gap:64px;margin-top:64px}
}

/* =========================================================================
   CARTES D'ARTICLES — bandeau coloré (date + titre) AU-DESSUS de la photo.
   Le titre se lit avant l'image, et la couleur donne le rythme de la rangée.
   ========================================================================= */
.arti-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.arti{background:var(--paper);border-radius:18px;overflow:hidden;text-decoration:none;
      color:inherit;display:flex;flex-direction:column;border:1px solid var(--line);
      transition:transform .17s ease, box-shadow .17s ease}
.arti:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(36,26,18,.15)}
.arti-tete{background:var(--corail);color:#fff;padding:22px 22px 24px}
.arti:nth-child(2) .arti-tete{background:#8a4a2f}
.arti:nth-child(3) .arti-tete{background:var(--ink)}
.arti-date{font-size:.76rem;opacity:.82;font-weight:600;display:block;margin-bottom:9px}
.arti-tete h3{font-size:1.14rem;font-weight:800;line-height:1.28;letter-spacing:-.3px;margin:0;color:#fff}
.arti-img{height:auto;aspect-ratio:16/10;overflow:hidden;background:var(--sand)}
.arti-img img{width:100%;height:100%;object-fit:cover;display:block;
              transition:transform .5s ease}
.arti:hover .arti-img img{transform:scale(1.05)}
.arti-bas{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
.arti-cat{display:inline-block;background:var(--sand-lite);color:var(--gold-deep);
  font-size:.68rem;font-weight:800;letter-spacing:.6px;padding:5px 12px;border-radius:999px;
  margin-bottom:12px;align-self:flex-start}
.arti-bas p{font-size:.88rem;color:var(--ink-soft);line-height:1.58;flex:1;margin:0}
.arti-go{margin-top:15px;font-size:.84rem;font-weight:800;color:var(--corail)}
@media(max-width:900px){.arti-grid{grid-template-columns:1fr}}

/* =========================================================================
   PARCOURS — le récit en étapes, alternées gauche/droite.
   Les étapes anciennes sont évoquées par un DESSIN, celles d'aujourd'hui par
   une VRAIE photo. Le contraste dit honnêtement ce qui est reconstitué et ce
   qui est réel : sur une page qui sert à croire quelqu'un, ça compte.
   ========================================================================= */
.hist{max-width:940px;margin:0 auto}
.hist-et{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
         padding:34px 0;position:relative}
.hist-et:nth-child(even) .hist-vis{order:2}
.hist-vis{position:relative}
.hist-vis img{width:100%;border-radius:20px;display:block;height:auto;aspect-ratio:4/5;object-fit:cover;
              box-shadow:0 18px 44px rgba(36,26,18,.18)}
.hist-dessin{background:var(--sand-lite);border-radius:20px;aspect-ratio:4/5;
             display:flex;align-items:center;justify-content:center;padding:34px}
.hist-dessin svg{width:100%;height:auto;max-height:100%}
.hist-dessin .tr{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.hist-dessin .pl{fill:var(--ink);stroke:none}
.hist-dessin .ac{fill:var(--corail);stroke:none}
.hist-dessin .bl{fill:#fff;stroke:var(--ink);stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.hist-num{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--corail);margin-bottom:10px}
.hist-txt h3{font-size:1.55rem;font-weight:800;letter-spacing:-.7px;line-height:1.18;margin:0 0 6px}
.hist-lieu{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.1rem;
  color:var(--gold-deep);margin-bottom:14px}
.hist-txt p{font-size:.98rem;line-height:1.68;color:var(--ink-soft);margin:0 0 12px}
.hist-appris{background:var(--paper);border-left:3px solid var(--corail);border-radius:0 12px 12px 0;
  padding:13px 16px;font-size:.9rem;line-height:1.55;color:var(--ink)}
.hist-appris b{color:var(--corail)}
@media(max-width:820px){
  .hist-et{grid-template-columns:1fr;gap:22px;padding:26px 0}
  .hist-et:nth-child(even) .hist-vis{order:0}
  .hist-vis img,.hist-dessin{aspect-ratio:16/11}
  .hist-txt h3{font-size:1.3rem}
}

/* =========================================================================
   NOS VALEURS — quatre blocs colorés.
   Le lavande vient de la famille AikiLearn : sur une page qui parle de la
   maison plutôt que du produit, il rappelle qui édite MiamOS.
   ========================================================================= */
.val{padding:74px 0}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
/* 🔴 Refait le 17/08. Les quatre pastels (lavande, pêche, menthe, sable)
   faisaient quatre encarts sans lien entre eux, et le MOT — qui est le seul
   contenu qu'on retient d'une valeur — se lisait à la même taille que le
   reste. Désormais : une seule couleur, un vert profond, et le mot qui prend
   toute la place.
   ⚠️ Le vert est plus foncé que le teal de la charte (#00514F contre #006a68)
   pour une raison mesurable : le blanc n'atteint 4,5:1 de contraste qu'à
   partir de là. Sur #006a68 le texte courant serait juste sous la limite. */
/* ⚠️ PAS d'overflow:hidden ici : la pastille d'icône est posée à cheval sur
   le bord haut (top:-30px) et se retrouvait tranchée en deux. Le rond
   décoratif du fond est donc borné pour rester à l'intérieur. */
.vl{border-radius:22px;padding:66px 26px 30px;position:relative;text-align:center;
    background:#00514F;color:#fff}
/* Un dégradé imperceptible d'une carte à l'autre : elles restent une famille,
   sans se répéter à l'identique. */
.vl:nth-child(2){background:#004A48}
.vl:nth-child(3){background:#00514F}
.vl:nth-child(4){background:#004A48}
/* L'icône en filigrane, très grande, coupée par le coin : c'est elle qui
   remplit le fond sans jamais gêner la lecture. */
.vl::after{content:"";position:absolute;right:14px;bottom:14px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.vl-ic{position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(36,26,18,.16)}
.vl .vl-ic{background:var(--gold);border:4px solid var(--paper)}
.vl .vl-ic svg{stroke:#0b3b3a}
.vl-ic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* LE MOT, c'est le contenu principal. Il passe de 1,16 à 2,1 rem : on doit
   pouvoir lire les quatre valeurs d'un coup d'œil, sans lire les phrases. */
.vl h3{font-size:2.1rem;font-weight:900;letter-spacing:-.055em;line-height:1;
       margin:0 0 14px;color:#fff}
.vl p{font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.9);margin:0;
      position:relative;z-index:1}
@media(max-width:1000px){.val-grid{grid-template-columns:1fr 1fr;row-gap:56px}}
@media(max-width:560px){.val-grid{grid-template-columns:1fr;row-gap:56px}}
@media(max-width:900px){.val-grid{grid-template-columns:1fr 1fr;gap:46px 16px;margin-top:52px}}
@media(max-width:520px){.val-grid{grid-template-columns:1fr;gap:52px}}

/* les deux photos du récit, côte à côte */
.ap-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0 8px}
.ap-duo figure{margin:0}
.ap-duo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block;
            box-shadow:0 12px 30px rgba(36,26,18,.14)}
.ap-duo figcaption{font-size:.76rem;color:var(--ink-soft);margin-top:8px;line-height:1.4}
@media(max-width:640px){.ap-duo{grid-template-columns:1fr;gap:22px}}

/* =========================================================================
   TOUCHES DE LAVANDE SUR L'ACCUEIL
   La page etait tout en chaud (corail, or, sable) : une couleur froide donne
   du relief sans quitter la charte, et rappelle la famille AikiLearn.
   ========================================================================= */
/* la bande de « nos solutions » : la 4e bulle passe en lavande */
.sol:nth-child(4){background:#5B4BD6}
/* la carte Signature des formules : liseré lavande, pour la détacher */
.fm--3{background:var(--ink);border:2px solid #6C5CE7}
.fm--3 .fm-nom{color:#B9AEFF}
.fm--3 .fm-prix{color:#fff}
.fm--3 .fm-sur{background:rgba(108,92,231,.16);border-color:rgba(108,92,231,.35)}
.fm--3 .fm-sur b{color:#B9AEFF}
/* la section articles : le 3e bandeau en lavande plutôt qu'en encre */
.arti:nth-child(3) .arti-tete{background:#5B4BD6}
/* la bande de preuve garde le corail : c'est le repère de la marque */