/* ═══════════════════════════════════════════════════════════════════════
   Formations et templates Notion · v2 (05, 24/10/2026)
   Chargé après /v2/site-v2.css. Dessin repris de fiche-atsmatch.html
   (carte d'achat, blocs, FAQ, carrousel « Dans le même esprit »).
   Charte §5 :
   - fiche : couverture en situation + carte d'achat collantes à gauche (5),
     contenu à droite (7) : réponse, programme en accordéon, pour qui, FAQ ;
   - liste : filtres collants à gauche, grille de cartes à droite (3 colonnes).
   ═══════════════════════════════════════════════════════════════════════ */

ul { list-style: none; }
.btn { cursor: pointer; border: 0; }
.btn-ligne { border: 1px solid rgba(255, 255, 255, .16); }
.btn-s { height: 40px; padding: 0 18px; font-size: 14px; }
.btn svg { flex: none; }
.acc-gold { background: linear-gradient(100deg, var(--or-clair), var(--or) 50%, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ═════════════ FICHE ═════════════ */
/* repli sans JS : le contenu statique de la page reste lisible */
#fmRoot > .wrap, #prRoot > .wrap { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; padding-bottom: var(--sec); color: var(--gris); }
#fmRoot > .wrap h1, #prRoot > .wrap h1 { font: 800 40px/1.1 var(--titre); color: var(--texte); margin: 16px 0; }
#fmRoot > .wrap p, #prRoot > .wrap p { margin-top: 12px; }
.fiche { padding-top: 40px; }
.fiche .ariane { margin-bottom: 40px; flex-wrap: wrap; }
.fiche-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); align-items: start; }
.fiche-gauche { grid-column: 1 / span 5; align-self: stretch; }
.fiche-droite { grid-column: 6 / span 7; min-width: 0; padding-left: 40px; }
.fiche-colle { position: sticky; top: 96px; display: grid; gap: 22px; }

/* couverture en situation : visuel réel, cadre en relief, reflet, lumière au sol */
.couv { position: relative; margin: 0 0 14px; }
.couv .socle { bottom: -30px; width: 70%; z-index: -1; }
.couv-cadre { position: relative; padding: 10px; border-radius: 22px;
  background: linear-gradient(180deg, var(--charbon-3), var(--charbon-2)) padding-box,
              linear-gradient(160deg, rgba(224, 169, 81, .6), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .02) 70%, rgba(224, 169, 81, .3)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .04), var(--ombre-or);
  transform: perspective(1800px) rotateY(5deg) rotateX(1.5deg); transform-origin: left center; }
.couv-cadre img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.couv-cadre::after, .couv-ecran .navig::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 30%, transparent 70%, rgba(255, 255, 255, .04)); }
.couv-ecran .navig { transform: perspective(1800px) rotateY(5deg) rotateX(1.5deg); transform-origin: left center; }
.couv-ecran .navig .page img, .couv-ecran .navig .page video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.couv-vide { aspect-ratio: 3 / 2; width: 100%; border-radius: 14px; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(360px 240px at 30% 20%, rgba(224, 169, 81, .22), transparent 70%), linear-gradient(160deg, #1B1B22, #0D0D11); }
.couv-vide img { width: 64px; height: 64px; filter: drop-shadow(0 0 18px rgba(224, 169, 81, .5)); }
.couv-vide span { font: 700 22px/1.2 var(--titre); color: var(--texte); max-width: 18ch; }
.pr-thumbs { display: flex; gap: 10px; }
.pr-thumb { width: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); background: none; cursor: pointer; padding: 0; opacity: .6; }
.pr-thumb.on { opacity: 1; box-shadow: 0 0 0 2px var(--or); }

/* carte d'achat (maquette .achat) */
.achat { padding: 24px; }
.achat .bloc-prix .ligne-prix b { font-size: 40px; }
.achat .bloc-prix .ligne-prix b.bientot { font: 700 30px/1 var(--titre); color: var(--or); }
.achat .bloc-prix .ligne-prix .vie { flex-basis: 100%; }
.achat .pr-ctas { display: grid; gap: 10px; margin-top: 16px; }
.achat .pr-ctas .btn { width: 100%; justify-content: center; }
.achat .pr-sample-note { margin-top: 10px; font-size: 13px; color: var(--gris); text-align: center; }
.achat .sg-optin { color: var(--or); text-align: center; }
.achat .confiance { margin-top: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--gris); }
.achat .confiance li { display: flex; gap: 8px; }
.achat .confiance li::before { content: '✓'; color: var(--or); flex: none; }
.achat .dispo { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--trait); font-size: 13px; color: var(--gris-2); }
.pr-bundle { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--or-06); border: 1px solid var(--or-20); font-size: 14px; color: var(--gris); }
.pr-bundle-t { color: var(--texte); font-weight: 600; }
.pr-bundle-d { margin: 4px 0 8px; }
.pr-bundle .lien-fleche { font-size: 14px; }
.pr-bundle-o { display: block; margin-top: 6px; font-size: 13px; }
.pr-bundle-o a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }

/* tête de la colonne de droite : la réponse en tête */
.fiche-tete .pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-tete .nom-produit { margin-top: 24px; font: 600 15px/1.3 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.fiche-tete h1 { margin-top: 10px; font: 800 clamp(36px, 3.6vw, 54px)/1.04 var(--titre); letter-spacing: -.03em; }
.reponse { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--trait); border-left: 3px solid var(--or);
           font-size: 17px; line-height: 1.6; color: var(--texte); }
.meta { display: flex; gap: 10px 18px; flex-wrap: wrap; margin-top: 20px; font-size: 14px; color: var(--gris); }
.meta > span { display: inline-flex; align-items: center; gap: 8px; }
.meta > span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.note-avis { display: inline-flex; align-items: center; gap: 6px; color: var(--texte); font-weight: 600; }
.note-avis svg { width: 15px; height: 15px; color: var(--or); }
.note-avis span { color: var(--gris); font-weight: 400; }

/* blocs de contenu (maquette .bloc) */
.fiche-droite .bloc { margin-top: var(--bloc); padding-top: var(--bloc); border-top: 1px solid var(--trait); }
.h2-s { margin: 0 0 22px; font-size: clamp(26px, 2.4vw, 34px); }
.texte p { color: var(--gris); font-size: 17px; max-width: 65ch; }
.texte p + p { margin-top: 14px; }
.texte p:first-child { color: var(--texte); }
.programme, .faq-liste { display: grid; gap: 12px; }
.carte.q { padding: 18px 22px; }
details.module summary { align-items: center; }
.mod-n { flex: none; min-width: 44px; height: 32px; padding: 0 10px; border-radius: var(--pilule); display: grid; place-items: center;
         font: 700 14px/1 var(--corps); color: var(--or); background: var(--or-06); border: 1px solid var(--or-20); }
.mod-t { flex: 1; }
details.module p { margin-left: 60px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo > * { min-width: 0; }
.encart { padding: 22px; }
.encart .h3 { font-size: 19px; margin-bottom: 14px; }
.liste-ok { display: grid; gap: 10px; font-size: 15px; color: var(--gris); }
.liste-ok li { display: flex; gap: 10px; }
.liste-ok li::before { content: '✓'; flex: none; color: var(--or); font-weight: 700; }
.liste-ok.puces li::before { content: ''; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--or); }
.etapes { display: grid; gap: 12px; counter-reset: e; list-style: none; }
.etapes li { counter-increment: e; display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--trait); color: var(--gris); font-size: 15px; }
.etapes li::before { content: counter(e); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--or); color: var(--or-encre); font-weight: 700; }
.pr-updates { display: grid; gap: 8px; }
.pr-update { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; font-size: 15px; color: var(--gris); }
.pr-update .v { color: var(--or); font-weight: 700; }
.pr-update .d { color: var(--gris-2); }

/* avis : tels que publiés, avec leurs mentions */
.pr-avis-intro { color: var(--texte); margin-bottom: 14px; }
.avis { display: grid; gap: 14px; }
.pr-review { padding: 20px 22px; }
.pr-review .rr { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.pr-review .rn { font-weight: 600; }
.pr-review .rev-stars, .tp-stars { color: var(--or); letter-spacing: .1em; }
.pr-review .rt { margin-top: 10px; color: var(--gris); font-size: 15px; }
.pr-review .rt strong { color: var(--texte); }
.pr-review .rd { margin-top: 10px; font-size: 13px; color: var(--gris-2); }
.pr-avis-legal { margin-top: 14px; font-size: 13px; color: var(--gris-2); }
.pr-avis-legal a, .pr-reviews-empty a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }
.pr-reviews-empty { padding: 20px 22px; }
.pr-reviews-empty p { margin-top: 6px; color: var(--gris); font-size: 15px; }

/* passerelles (ponts-ui.js) */
.pnt { margin-top: var(--bloc); padding-top: var(--bloc); border-top: 1px solid var(--trait); }
.pnt-t { font: 700 clamp(22px, 2vw, 28px)/1.15 var(--titre); letter-spacing: -.02em; margin-bottom: 18px; }
.pnt-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pnt-c { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--trait); transition: border-color .2s, background .2s; }
.pnt-c:hover { border-color: var(--or-35); background: var(--or-06); }
.pnt-k { font: 600 11px/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.pnt-n { margin-top: 6px; font: 700 17px/1.2 var(--titre); }
.pnt-p { font-size: 14px; color: var(--texte); }
.pnt-d { font-size: 14px; color: var(--gris); }

.fm-disclaimer { margin-top: var(--bloc); padding: 16px 20px; border-radius: 14px; border: 1px dashed var(--trait); font-size: 13px; line-height: 1.6; color: var(--gris-2); }
.fm-disclaimer strong { color: var(--gris); }

/* ═════════════ CARTES PRODUIT (grille + carrousel) ═════════════ */
.carte-produit { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 24px; cursor: pointer; min-width: 0; }
.cp-couv { position: relative; border-radius: 14px; overflow: hidden; background: #0D0D11; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.cp-couv > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s; }
.cp-ecran > img { aspect-ratio: 16 / 9; }
.carte-produit:hover .cp-couv > img { transform: scale(1.04); }
.cp-couv .couv-vide { border-radius: 0; }
.cp-couv .couv-vide span { font-size: 17px; }
.cp-badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-badges .pastille { height: 26px; padding: 0 10px; font-size: 11px; background: rgba(8, 8, 11, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cp-cat { margin: 6px 6px 0; font: 600 12px/1.3 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.carte-produit .h3 { margin: 0 6px; font-size: 20px; }
.carte-produit .h3 a:hover { color: var(--or-clair); }
.cp-phrase { margin: 0 8px; color: var(--texte); opacity: .86; font-size: 15px; line-height: 1.55; }
.cp-meta { margin: 0 6px; font-size: 13px; color: var(--gris-2); display: flex; gap: 8px; align-items: center; }
.cp-bas { margin: auto 6px 0; padding-top: 14px; border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cp-prix b { font: 700 22px/1 var(--corps); letter-spacing: -.01em; }
.cp-prix span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gris); }
.cp-prix.bientot b { font: 700 18px/1 var(--titre); color: var(--or); }
.cp-prix.gratuit b { color: var(--vert); }
.cp-actions { display: flex; align-items: center; gap: 14px; }
.cp-actions .lien-fleche { font-size: 14px; }
.cp-extrait { margin: 0 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
.cp-extrait svg, .lien-sortie svg { width: 15px; height: 15px; }
.cp-extrait:hover { color: var(--or); }
.lien-sortie { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gris); font-weight: 600; }
.lien-sortie:hover { color: var(--or); }
.carte-avenir { justify-content: flex-start; padding: 24px; background: linear-gradient(180deg, rgba(224, 169, 81, .07), rgba(255, 255, 255, .02)) padding-box,
  linear-gradient(160deg, rgba(224, 169, 81, .45), rgba(255, 255, 255, .06) 40%, rgba(224, 169, 81, .2)) border-box; cursor: default; }
.carte-avenir .cp-cat, .carte-avenir .h3, .carte-avenir .cp-phrase { margin-inline: 0; }
.carte-avenir .cp-bas { margin-inline: 0; }

/* « Dans le même esprit » : 4 cartes, carrousel sur mobile */
.meme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); }
.meme .cp-extrait { display: none; }

/* ═════════════ LISTES (formations.html, templates.html) ═════════════ */
.liste-tete { padding-top: 48px; padding-bottom: 88px; }
.liste-tete .ariane { margin-bottom: 40px; }
.liste-tete .display { margin-top: 18px; font-size: clamp(40px, 4.4vw, 62px); }
.liste-tete .chapo { max-width: 52ch; }
.liste-tete .meta { margin-top: 26px; }
.lang-notice { margin-top: 22px; max-width: 58ch; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--trait); font-size: 14px; color: var(--gris); }
.lang-notice strong { color: var(--texte); }
.lang-notice .ln-switch { color: var(--or); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* composition de couvertures (images réelles) */
.pile { position: relative; height: 440px; }
.pile .pc { position: absolute; padding: 8px; border-radius: 18px; background: linear-gradient(180deg, var(--charbon-3), var(--charbon-2)); border: 1px solid rgba(224, 169, 81, .3);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .85), var(--ombre-or); }
.pile .pc img { border-radius: 12px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.pile .p1 { width: 78%; right: 0; top: 0; transform: rotate(2.5deg); }
.pile .p2 { width: 62%; left: 0; top: 150px; transform: rotate(-3deg); z-index: 2; }
.pile .p3 { width: 50%; right: 4%; bottom: 0; transform: rotate(4deg); z-index: 3; }
.pile .socle { bottom: -24px; width: 80%; }
.pile .navig { position: absolute; width: 92%; right: 0; top: 10px; transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); }
.pile .navig .page img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.pile .navig.n2 { width: 58%; left: 0; right: auto; top: 220px; transform: rotate(-3deg); z-index: 2; }

.catalogue > .conteneur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); align-items: start; }
.filtres { grid-column: span 3; position: sticky; top: 96px; display: grid; gap: 22px; padding: 22px; }
.catalogue-grille { grid-column: span 9; min-width: 0; }
.filtres > * { min-width: 0; }
.filtres .f-titre { font: 600 12px/1 var(--corps); letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-bottom: 10px; }
.tpl-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--trait); }
.tpl-search:focus-within { border-color: var(--or-35); }
.tpl-search svg { flex: none; width: 16px; height: 16px; color: var(--gris); }
.tpl-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--texte); font: 400 14px/1 var(--corps); }
.tpl-search input::placeholder { color: var(--gris-2); }
.tpl-cats { display: grid; gap: 4px; }
.tpl-chip { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--gris); font: 500 15px/1.3 var(--corps); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.tpl-chip:hover { color: var(--texte); background: rgba(255, 255, 255, .04); }
.tpl-chip.on { color: var(--texte); background: var(--or-06); border-color: var(--or-20); }
.tpl-chip .n { flex: none; min-width: 28px; padding: 3px 8px; border-radius: var(--pilule); font-size: 12px; text-align: center; color: var(--gris); background: rgba(255, 255, 255, .05); }
.tpl-chip.on .n { color: var(--or-encre); background: var(--or); }
.tpl-seg { display: flex; padding: 4px; gap: 4px; border-radius: var(--pilule); background: rgba(0, 0, 0, .3); border: 1px solid var(--trait); }
.tpl-seg button { flex: 1; height: 34px; border: 0; border-radius: var(--pilule); background: none; color: var(--gris); font: 600 13px/1 var(--corps); cursor: pointer; }
.tpl-seg button.on { background: linear-gradient(180deg, var(--or-clair), var(--or)); color: var(--or-encre); }
.tpl-select { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--trait); color: var(--texte); font: 500 14px/1 var(--corps); }
.tpl-count { font-size: 13px; color: var(--gris-2); }

#fmGrid.fm-plat, #tplGrid.fm-plat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.fm-sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.fm-section + .fm-section { margin-top: var(--sec); }
.fm-sec-head { margin-bottom: 26px; }
.fm-sec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 700 clamp(28px, 2.6vw, 38px)/1.1 var(--titre); letter-spacing: -.02em; }
.fm-sec-n { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 10px; border-radius: var(--pilule); font: 600 14px/1 var(--corps); color: var(--or); background: var(--or-06); border: 1px solid var(--or-20); }
.fm-sec-desc, .fm-sub-desc { margin-top: 10px; color: var(--gris); max-width: 64ch; }
.fm-subsec + .fm-subsec { margin-top: var(--bloc); }
.fm-sub-head { margin-bottom: 18px; padding-top: 22px; border-top: 1px solid var(--trait); }
.fm-sub-title { display: flex; align-items: center; gap: 10px; font: 700 21px/1.2 var(--titre); }
.fm-sub-title .fm-sec-n { height: 26px; min-width: 30px; font-size: 13px; }
.fm-avenir-list { display: grid; gap: 10px; }
.fm-avenir-list li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.fm-av-n { font-weight: 600; }
.fm-av-c { color: var(--gris-2); font-size: 14px; margin-right: auto; }
.fm-avenir-foot { margin-top: 18px; }
.tpl-empty { display: grid; justify-items: center; gap: 14px; padding: 48px 24px; text-align: center; color: var(--gris); }
.tpl-empty svg { width: 34px; height: 34px; color: var(--or); }
.seo-liste { display: grid; gap: 10px; font-size: 15px; color: var(--gris); }
.seo-liste a { color: var(--texte); }
.seo-liste-t { margin: 22px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }

/* bandeau de confiance (textes publiés) : 3 cartes */
.confiance-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.confiance-liste .t-item { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.confiance-liste .t-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--or); background: var(--or-06); border: 1px solid var(--or-20); }
.confiance-liste .t-ico svg { width: 22px; height: 22px; }
.confiance-liste .t-t { font: 700 19px/1.25 var(--titre); }
.confiance-liste .t-d { color: var(--gris); font-size: 15px; }

/* fenêtre d'inscription facultative de l'extrait (sample-gate.js) */
.sg-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(6, 6, 10, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; }
.sg-overlay[hidden] { display: none; }
.sg-overlay:not([hidden]) { display: flex; }
.sg-modal { position: relative; width: min(440px, 100%); padding: 36px 30px 26px; text-align: center; border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--charbon-3), var(--charbon-2)) padding-box, linear-gradient(160deg, rgba(224, 169, 81, .5), rgba(255, 255, 255, .06) 50%, rgba(224, 169, 81, .2)) border-box;
  border: 1px solid transparent; box-shadow: var(--ombre), var(--ombre-or); }
.sg-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--gris); font-size: 26px; line-height: 1; cursor: pointer; }
.sg-ico { display: none; }
.sg-title { font: 700 22px/1.2 var(--titre); margin-bottom: 8px; }
.sg-sub { font-size: 14px; color: var(--gris); margin-bottom: 20px; }
.sg-form { display: flex; flex-direction: column; gap: 10px; }
.sg-email { width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--trait); color: var(--texte); font: 400 15px/1 var(--corps); }
.sg-email:focus { outline: none; border-color: var(--or-35); }
.sg-submit { height: 50px; border: 0; border-radius: var(--pilule); cursor: pointer; font: 600 15px/1 var(--corps); color: var(--or-encre); background: linear-gradient(180deg, var(--or-clair), var(--or)); }
.sg-note { font-size: 12px; color: var(--gris-2); margin-top: 14px; }
.sg-note a, .sg-status a { color: var(--or); }
.sg-status { font-size: 13px; margin-top: 12px; min-height: 18px; }
.sg-status.ok { color: var(--vert); } .sg-status.err { color: #FF9B9B; }

/* ═════════════ MOBILE 390 ═════════════ */
@media (max-width: 1100px) and (min-width: 761px) {
  #fmGrid.fm-plat, #tplGrid.fm-plat, .fm-sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtres { grid-column: span 4; } .catalogue-grille { grid-column: span 8; }
}
@media (max-width: 760px) {
  .fiche { padding-top: 20px; }
  .fiche .ariane { margin-bottom: 22px; font-size: 12px; }
  /* une seule colonne : titre et réponse d'abord, puis couverture et carte d'achat, puis le contenu */
  .fiche-grille { display: flex; flex-direction: column; gap: 0; }
  .fiche-gauche, .fiche-colle, .fiche-droite { display: contents; padding: 0; }
  .fiche-tete { order: 1; }
  .couv { order: 2; margin: 32px 0 30px; }
  .pr-thumbs { order: 3; }
  .achat { order: 4; }
  .fiche-droite > .bloc, .fiche-droite > .pnt, .fiche-droite > .fm-disclaimer { order: 5; }
  .couv-cadre, .couv-ecran .navig { transform: none; }
  .fiche-tete .nom-produit { margin-top: 18px; font-size: 13px; }
  .fiche-tete h1 { font-size: 34px; }
  .reponse { font-size: 16px; padding: 16px 18px; }
  .achat { padding: 18px; }
  .duo { grid-template-columns: 1fr; }
  details.module p { margin-left: 0; }
  .carte.q { padding: 16px 18px; }
  .meme { display: flex; }
  body { padding-bottom: 84px; }
  .barre-mobile .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  .liste-tete { padding-top: 24px; padding-bottom: 56px; }
  .liste-tete .ariane { margin-bottom: 22px; }
  .pile { height: 300px; margin-top: 12px; }
  .pile .p2 { top: 96px; }
  .pile .navig.n2 { top: 130px; }
  .catalogue > .conteneur { display: block; }
  .filtres { position: static; padding: 16px; gap: 14px; margin-bottom: 32px; }
  .filtres .f-titre { display: none; }
  .tpl-cats { display: flex; overflow-x: auto; gap: 8px; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .tpl-chip { width: auto; flex: none; white-space: nowrap; border-color: var(--trait); border-radius: var(--pilule); padding: 8px 12px; font-size: 14px; }
  #fmGrid.fm-plat, #tplGrid.fm-plat { grid-template-columns: 1fr; }
  .fm-sec-title { font-size: 26px; }
  .fm-avenir-list li { flex-wrap: wrap; gap: 6px 12px; }
  .confiance-liste { display: flex; }
}


/* ═════════════ FINITIONS (00 + CEO, 24/10 soir) ═════════════ */
/* états : survol, focus clavier (anneau or), actif */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, .carte-produit:focus-within {
  outline: 2px solid var(--or); outline-offset: 3px; border-radius: 12px; }
.btn:active, .tpl-chip:active, .tpl-seg button:active { transform: translateY(1px) scale(.98); }
details.q summary:hover { color: var(--or-clair); }
.lien-fleche:active, .lien-sortie:active { opacity: .75; }

/* prix et économies en pastilles */
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pastille.prix-p { color: var(--texte); border-color: var(--or-35); background: var(--or-06); font-size: 13px; }
.pastille.prix-p b { font: 700 15px/1 var(--corps); color: var(--or-clair); margin-right: 2px; }
.cp-prix .pastilles { margin-top: 10px; }
.cp-prix .pastille { height: 26px; font-size: 11.5px; }
.achat .bloc-prix .pastilles { margin-top: 12px; }
.pr-bundle .pastilles { margin: 8px 0 10px; }
.pr-bundle-o .pastille { height: 26px; margin-left: 4px; font-size: 11.5px; }
.prix-ligne { margin-top: 18px; }

/* bande « mise en avant » des packs : 2 grandes cartes, couverture qui déborde, halo or */
.fm-vedette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); padding-top: 34px; }
.carte-vedette { padding: 0 24px 24px; gap: 0; overflow: visible;
  box-shadow: var(--ombre), 0 40px 90px -40px rgba(224, 169, 81, .55), 0 0 0 1px var(--or-20); }
.cv-couv { margin: -34px -8px 0; border-radius: 16px; overflow: hidden; transform: rotate(-1.2deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 50px -8px rgba(224, 169, 81, .45), 0 0 0 1px rgba(224, 169, 81, .35); transition: transform .4s; }
.carte-vedette:hover .cv-couv { transform: rotate(0) translateY(-4px); }
.cv-couv > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cv-corps { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; flex: 1; }
.carte-vedette .cp-cat, .carte-vedette .h3 { margin: 0; }
.carte-vedette .h3 { font-size: 24px; }
.cv-puces { display: grid; gap: 8px; }
.cv-puces li { display: flex; align-items: center; gap: 12px; color: var(--texte); font-size: 15px; }
.cv-puces .mod-n { min-width: 38px; height: 26px; font-size: 12px; }
.cv-bas { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.cv-prix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-prix b { font: 700 30px/1 var(--corps); letter-spacing: -.02em; }
.fm-vedette.seule { grid-template-columns: 1fr; }
.fm-vedette.seule .carte-vedette { display: grid; grid-template-columns: 5fr 6fr; gap: 32px; padding: 24px; align-items: start; }
.fm-vedette.seule .cv-couv { margin: -48px 0 0 -8px; }
.fm-vedette.seule .cv-corps { padding-top: 0; }

/* fiche : chapô de la description, cartes des systèmes, encadré fort */
.chapo-fiche { font-size: 20px; line-height: 1.5; color: var(--texte); max-width: 60ch; }
.fiche-droite .texte { margin-top: 18px; }
.fiche-droite .texte p, .fiche-droite .texte p:first-child { color: var(--gris); }
.systemes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.systeme { display: flex; flex-direction: column; gap: 10px; padding: 24px; transition: border-color .2s, transform .2s; }
.systeme:hover { transform: translateY(-3px); }
.systeme .h3 { font-size: 21px; }
.sy-l { font: 600 11px/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--gris-2); }
.sy-f { display: flex; flex-wrap: wrap; gap: 6px; }
.sy-f .pastille { height: 26px; font-size: 12px; color: var(--texte); }
.systeme .lien-fleche { margin-top: 6px; font-size: 14px; }
.fort { margin-top: 24px; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--or-35);
  background: radial-gradient(400px 160px at 0% 0%, rgba(224, 169, 81, .16), transparent 70%), rgba(0, 0, 0, .25); }
.fort p { margin-top: 12px; font: 600 19px/1.45 var(--corps); color: var(--texte); max-width: 60ch; }

/* fonctionnalités et programme : bento ouvert sur 2 colonnes (accordéon seulement sur mobile) */
.bento-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fn-c { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.fn-c h3 { font: 700 18px/1.25 var(--titre); color: var(--texte); }
.fn-c p { color: var(--gris); font-size: 15px; }
.fn-c .mod-n { align-self: flex-start; }
.encart-ico { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--or); background: var(--or-06); border: 1px solid var(--or-20); }
.encart-ico svg { width: 20px; height: 20px; }
.encart .h3 { display: flex; align-items: center; gap: 12px; }
.encart .liste-ok li:first-child { color: var(--texte); }

/* passerelles : repère visuel */
.pnt-c { position: relative; padding-right: 44px; }
.pnt-c::after { content: '→'; position: absolute; right: 18px; top: 18px; color: var(--or); transition: transform .2s; }
.pnt-c:hover::after { transform: translateX(3px); }

@media (max-width: 1100px) and (min-width: 761px) {
  .fm-vedette.seule .carte-vedette { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fm-vedette { grid-template-columns: 1fr; gap: 48px; padding-top: 28px; }
  .fm-vedette .carte-vedette, .fm-vedette.seule .carte-vedette { display: flex; padding: 0 16px 24px; gap: 0; }
  .fm-vedette.seule .cv-couv, .cv-couv { margin: -28px -4px 0; }
  .fm-vedette.seule .cv-corps { padding-top: 20px; }
  .chapo-fiche { font-size: 18px; }
  .systemes { grid-template-columns: 1fr; }
  .fort p { font-size: 17px; }
}

/* Fiche vue dans l'autre langue : bandeau dans la langue du visiteur (06, 24/10). */
.fm-langue { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: -16px 0 32px; padding: 12px 16px; border: 1px solid var(--or-35); border-radius: var(--rayon-s); background: var(--or-06); color: var(--texte); font-size: 15px; line-height: 1.5; }
.fm-langue a { color: var(--or); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .fm-langue { margin: -6px 0 22px; font-size: 14px; } }

/* Héros des fiches sur petits écrans (25/10) : en colonne flex, l'en-tête prenait la largeur de son plus long mot. */
@media (max-width: 760px) { .fiche-grille > * { min-width: 0; } }
@media (max-width: 399px) { .fiche-tete h1 { font-size: clamp(26px, 8.5vw, 34px); } }