/* Polish / glow up (04/10) : page d'accueil. Chargé APRÈS apercu-appli.css, mais AVANT le <style> de la page :
   tout est préfixé body.apercu-appli pour gagner sur ce <style> à spécificité supérieure. */

/* ── 1. Une seule largeur et un seul retrait intérieur pour toutes les grandes cartes ──
   avant : cartes « soft » 1012 px / 72 px, maintien et évolution 1012 px / 80 px, appel final 1120 px / 96×64 px */
body.apercu-appli .maintien,body.apercu-appli .evo{padding:clamp(28px,5vw,72px)!important}
body.apercu-appli section.end>.wrap{max-width:calc(1120px - 2*var(--edge,24px))}

/* ── 2. Rythme vertical : deux cartes qui se suivent (maintien → évolution → appel final) étaient séparées
   de 240 px (deux marges de section cumulées). Ramené à ~48 px, l'écart d'une carte à l'autre. */
body.apercu-appli main section:has(>.wrap>.maintien){padding-bottom:clamp(12px,2vw,24px)}
body.apercu-appli main section:has(>.wrap>.evo){padding-top:clamp(12px,2vw,24px);padding-bottom:clamp(12px,2vw,24px)}
body.apercu-appli main section.end{padding-top:clamp(12px,2vw,24px)}
body.apercu-appli section.end .eyebrow{margin-bottom:18px!important}
body.apercu-appli section.end .lede{margin-top:20px}

/* ── 3. Idées reçues : le texte ne saute plus de 12 px à l'ouverture (retrait identique ouvert / fermé),
   aligné sur le titre ; survol et focus clavier dessinés */
body.apercu-appli .myths{margin-left:-16px;margin-right:-16px}
body.apercu-appli .myths summary,body.apercu-appli .myths details[open] summary{padding:20px 16px!important;border-radius:14px}
body.apercu-appli .myths .ans,body.apercu-appli .myths details[open] .ans{padding:0 16px 22px!important;line-height:1.6}
@media(prefers-reduced-motion:no-preference){body.apercu-appli .myths summary::after{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s}}
@media(hover:hover){body.apercu-appli .myths summary:hover::after{background:color-mix(in srgb,var(--brand) 30%,var(--carte))!important}}
body.apercu-appli .myths summary:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* ── 4. Chiffres : les légendes alignées d'une tuile à l'autre (« Des années » tient sur 2 lignes et
   décalait la sienne de 12 px). Chaque tuile partage les rangées de la grille : chiffre en bas de sa rangée. */
/* (11/10) règle déplacée dans apercu-appli.css : elle vaut aussi pour Méthode et Qui sommes-nous */

/* ── 5. Avis clients (en-tête) : les ombres n'étaient plus coupées par le cadre du rail, et les cartes
   sortent en fondu au lieu d'être tranchées net au bord de la colonne (bureau) */
body.apercu-appli .avis-rail{padding-top:8px;padding-bottom:14px;margin-top:-6px}
@media(min-width:901px){
  /* fondu à droite seulement : à gauche, l'aimantation cale toujours la carte sur son bord */
  body.apercu-appli .avis-rail{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
}
body.apercu-appli .avis-c:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* ── 6. Focus clavier : un seul anneau partout (3 px bleu Elysium, comme les boutons) ── */
body.apercu-appli main .more:focus-visible,body.apercu-appli main .contact a:focus-visible,body.apercu-appli .partner-strip a:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ── 6 ter. Interligne régulier : le gras 800 (Arial Black sous Windows, plus haut) élargissait de 2 px chaque
   ligne qui en contenait un → paragraphes « en escalier ». Le gras ne compte plus dans la hauteur de ligne. ── */
body.apercu-appli main :is(.lede,.recois li,.avis-c blockquote p,.myths .ans,.recois-prix) b{line-height:0}

/* ── 6 bis. En-tête : les deux boutons remplissent la colonne (à ~1024 px ils passaient l'un sous l'autre
   avec deux largeurs différentes, 285 et 183 px) ── */
body.apercu-appli .hero .ctas .btn{flex:1 1 auto}

/* ── 7. Obscur : le téléphone se détachait mal du fond (cadre noir sur fond noir) ── */
html[data-theme="obscur"] body.apercu-appli .day{box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.10)}

/* ── 8. Mobile (Instagram, iPhone) ── */
@media(max-width:480px){
  /* deux boutons de même largeur, l'un sous l'autre (avant : 285 px et 183 px) */
  body.apercu-appli main .ctas .btn{flex:1 1 100%}
  /* pilules qui passent sur 2 lignes : arrondi de carte plutôt qu'une « gélule » déformée */
  body.apercu-appli .sign{border-radius:20px;line-height:1.4}
}
@media(max-width:700px){
  body.apercu-appli .recois-prix{border-radius:22px;line-height:1.45}
  /* maintien et évolution étaient posés à 30 px du bord, les autres cartes à 12 px : tout le monde à 12 px */
  body.apercu-appli .maintien,body.apercu-appli .evo{margin-left:calc(12px - var(--edge,18px))!important;margin-right:calc(12px - var(--edge,18px))!important}
}
/* « C'est ce qui évite l'effet yoyo. » : interligne 1 → les deux lignes se touchaient sur mobile */
body.apercu-appli .chute{line-height:1.3!important}

/* Damien 05/10 : le « −25 kg » des avis n'est plus bleu ni géant (couleur du texte, taille de la carte) */
body.apercu-appli .avis-n{font:800 16px/1.2 Arial,Helvetica,sans-serif!important;letter-spacing:-.03em!important;color:var(--a-encre,#111)!important}
html[data-theme="obscur"] body.apercu-appli .avis-n{color:var(--ice,#EAF2FF)!important}

/* Damien 05/10 : l'appli MyEly bien visible, SOUS le téléphone d'exemple (Dimitri) — façon fiche d'appli : l'icône officielle « kcal », le nom, la phrase */
body.apercu-appli .myely-tag{display:flex;align-items:center;gap:14px;width:auto;max-width:none;margin:22px 0 0;padding:12px 18px 12px 12px;border-radius:22px;background:var(--carte,#fff);box-shadow:var(--ombre,0 8px 30px rgba(0,0,0,.08));text-align:left}
body.apercu-appli .myely-tag img{flex:none;width:52px;height:52px;border-radius:13px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
body.apercu-appli .myely-tag span{display:block;font:500 13.5px/1.45 Arial,Helvetica,sans-serif;color:var(--a-doux,#6b6358)}
body.apercu-appli .myely-tag b{display:block;margin-bottom:2px;font:800 18px/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.02em;color:var(--a-encre,#111)}
body.apercu-appli .myely-tag b i{font-style:normal;font-weight:600;font-size:13px;letter-spacing:0;color:var(--a-doux,#6b6358);margin-left:4px}
html[data-theme="obscur"] body.apercu-appli .myely-tag b{color:var(--ice,#EAF2FF)}
/* badges officiels App Store / Google Play sous le téléphone (même hauteur, jamais agrandis ni recolorés : règles des stores) */
.stores{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0}.stores[hidden],.stores a[hidden]{display:none!important}
.stores a{display:inline-block;line-height:0;border-radius:8px}.stores img{height:44px;width:auto;display:block}
.stores a[data-store="android"] img{height:57px;margin:-6.5px 0}   /* le badge Google contient sa marge de protection transparente : même hauteur visible que celui d'Apple */
.stores a:focus-visible{outline:2px solid var(--blue,#1466b8);outline-offset:3px}
@media(max-width:560px){body.apercu-appli .myely-tag{width:auto;max-width:none;margin:18px 0 0}}
/* le nom écrit comme dans l'appli (app/appli.css .appli-marque) : Georgia, « My » noir, « Ely » bleu droit, BY ELYSIUM en capitales espacées */
body.apercu-appli .myely-tag b.myely-mot{font:400 24px/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.01em;margin-bottom:4px;font-kerning:none}  /* iPhone : « My » collé (audit 10/10) */
/* décision définitive de Damien & Yoann (05/10, 20 h) : « My » en BLEU #1466b8, « Ely » en NOIR ; en obscur, « Ely » prend la couleur du texte */
body.apercu-appli .myely-tag b.myely-mot{color:#1466b8}
body.apercu-appli .myely-tag b.myely-mot em{font-style:normal;color:var(--a-encre,#111)}
html[data-theme="obscur"] body.apercu-appli .myely-tag b.myely-mot{color:#2E9BFF}
html[data-theme="obscur"] body.apercu-appli .myely-tag b.myely-mot em{color:var(--ice,#EAF2FF)}
body.apercu-appli .myely-tag b.myely-mot i{color:var(--a-doux,#6b6358);font:600 9.5px/1 Arial,Helvetica,sans-serif;letter-spacing:.24em;text-transform:uppercase;margin-left:6px;vertical-align:4px}

/* MANIFESTE (Damien 06/10, « plutôt en haut ») : dans le premier écran (.hero .wrap), un bloc qui marque.
   Ordinateur : pleine largeur sous les deux colonnes. Téléphone (une colonne) : la colonne de gauche s'ouvre (display:contents)
   pour que le manifeste passe juste après les boutons, avant les avis et le téléphone. */
.hero .manifeste{grid-column:1/-1;text-align:center;padding:clamp(24px,5vw,72px) 0 clamp(16px,3vw,40px);max-width:1040px;margin:0 auto}
.hero .manifeste h2{font-size:clamp(27px,3.5vw,48px)!important;line-height:1.14!important;letter-spacing:-.025em;margin:0 auto;max-width:28ch;text-wrap:balance}
.hero .manifeste h2 em{display:block;margin-top:.45em}
.hero .manifeste .lede{margin:clamp(24px,3vw,36px) auto 0;max-width:34ch;font-size:clamp(18px,1.8vw,22px);line-height:1.45;text-wrap:balance}
.hero .manifeste .ctas{justify-content:center;margin-top:clamp(28px,3.4vw,40px)}
body.apercu-appli .hero .manifeste .ctas .btn{flex:0 0 auto;width:auto}
@media (max-width:900px){
  .hero .wrap{row-gap:0!important}
  .hero .wrap>div:first-child{display:contents}
  .hero .wrap>div:first-child>*{order:1;min-width:0}
  .hero .wrap>div:first-child>:is(.eyebrow,h1,.lede,.ctas,.sign){order:0}
  .hero .manifeste{order:0;padding:clamp(36px,10vw,64px) 0 clamp(8px,3vw,24px)}
  .hero .dayzone{order:2;margin-top:clamp(32px,6vw,80px)!important}
}

/* « Voir tous les résultats » sous les avis : centré, même bouton que « Voir la méthode » (Dimitri 06/10 : deux modèles de bouton, pas plus) */
.hero .avis .avis-tous{display:flex!important;width:max-content!important;margin:20px auto 0!important}