/* Système de pages Talmo Properties (gabarit v2, 20/10/2026) — repris de l'accueil v2 validé par Clément le 19/10
   (skill design-web) : fond sable, cartes blanches en relief, sections sombres en dégradé marine, or en détail,
   jaune = action. Utilisé par les pages générées par src/gabarit-v2.mjs (guides, puis quartiers, projets…).
   Thème unique clair. */
:root{
  --marine:#0B1F3B; --jaune:#FFD400; --ardoise:#2B3442; --blanc:#FFFFFF;
  --sable:#F7F3EC; --lin:#EFE7DA; --ivoire:#FCFAF6; --filet:#E4DACB; --taupe:#5E5A54;
  --or:#C9A55C; --or-texte:#7A5C22; --marine-nuit:#071528; --marine-haut:#163460;
  --ombre-1:0 1px 2px rgba(11,31,59,.06),0 2px 6px rgba(11,31,59,.06);
  --ombre-2:0 1px 2px rgba(11,31,59,.05),0 8px 20px -4px rgba(11,31,59,.12),0 24px 48px -16px rgba(11,31,59,.16);
  --ombre-3:0 2px 4px rgba(11,31,59,.06),0 16px 32px -8px rgba(11,31,59,.18),0 40px 80px -24px rgba(11,31,59,.28);
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --wide:"Archivo",system-ui,sans-serif; --ui:"Instrument Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sable);color:var(--ardoise);font-family:var(--ui);font-size:17px;line-height:1.55;overflow-x:hidden}
.in{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;text-wrap:balance;overflow-wrap:break-word}
h3{font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:700;color:var(--marine);line-height:1.15}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.mono{font-family:var(--mono)}
.sur{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--or-texte)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--jaune);color:var(--marine);font-weight:700;font-size:16px;padding:16px 26px;min-height:52px;border-radius:var(--r-pill);text-decoration:none;border:0;cursor:pointer;font-family:var(--ui);white-space:nowrap;box-shadow:0 1px 0 rgba(11,31,59,.15),0 8px 20px -6px rgba(201,165,92,.55);transition:transform .2s ease-out,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--marine);outline-offset:3px}
.btn .fl{font-family:var(--mono);font-weight:500}
.btn.discret{background:transparent;color:var(--marine);box-shadow:inset 0 0 0 1.5px var(--marine)}
.sombre .btn.discret{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.photo{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--lin)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sombre{position:relative;color:#fff;background:radial-gradient(120% 80% at 20% 0%,var(--marine-haut) 0%,var(--marine) 45%,var(--marine-nuit) 100%)}
.sombre:after,.grain:after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;pointer-events:none;mix-blend-mode:overlay}
.grain{position:relative}
.grain:after{opacity:.05;mix-blend-mode:multiply}
.sombre .sur{color:var(--or)}
.lin{background:var(--lin)}
@media (prefers-reduced-motion:reduce){.btn:hover,.carte:hover{transform:none}html{scroll-behavior:auto}}

/* Pastille lecture vidéo */
.play{position:absolute;display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.97);color:var(--marine);border-radius:var(--r-pill);padding:8px 18px 8px 8px;font-weight:600;font-size:14.5px;white-space:nowrap;border:0;cursor:pointer;font-family:var(--ui);box-shadow:var(--ombre-3);z-index:2}
.play i{width:42px;height:42px;border-radius:50%;background:var(--jaune);position:relative;flex:none}
.play i:after{content:"";position:absolute;left:17px;top:13px;border-left:12px solid var(--marine);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* Navigation */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(247,243,236,.92);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--filet)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.nav svg{height:34px;width:auto;display:block}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;color:var(--marine);font-size:15px;font-weight:500}
.nav ul a{color:inherit;text-decoration:none}.nav ul a:hover,.nav ul a[aria-current]{text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:6px}
.nav .btn{padding:11px 20px;min-height:44px;font-size:14.5px}
@media (max-width:860px){.nav ul{display:none}}
@media (max-width:520px){.nav .btn{display:none}.nav svg{height:30px}}

/* Fil d'Ariane */
.fil{font-size:13.5px;color:var(--taupe);padding-top:22px}
.fil a{color:inherit;text-decoration:none}.fil a:hover{text-decoration:underline}
.fil span[aria-current]{color:var(--marine)}

/* Tête de guide : titre + réponse immédiate à gauche, photo à droite */
.tete-guide .in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-block:28px 120px}
.tete-guide h1{font-family:var(--wide);font-variation-settings:"wdth" 100;font-weight:700;letter-spacing:-.015em;line-height:1.08;font-size:clamp(32px,4vw,52px);color:var(--marine);margin:14px 0 20px}
.tete-guide h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(255,212,0,.85) 62%);padding:0 .06em}
.reponse{font-size:19px;line-height:1.55;color:var(--ardoise);max-width:58ch}
.reponse b{color:var(--marine)}
.auteur{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:14.5px;color:var(--taupe)}
.auteur img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:var(--ombre-1);flex:none}
.auteur b{color:var(--marine);font-weight:600}
.auteur a{color:var(--or-texte)}
.tete-guide .photo{aspect-ratio:4/5;box-shadow:var(--ombre-3)}
.tete-guide .badge{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:var(--r-m);padding:12px 16px;box-shadow:var(--ombre-3);z-index:1;max-width:calc(100% - 36px)}
.tete-guide .badge b{display:block;font-family:var(--wide);font-variation-settings:"wdth" 112;font-size:13.5px;text-transform:uppercase;color:var(--marine)}
.tete-guide .badge span{font-family:var(--mono);font-size:12px;color:var(--taupe)}
.tete-guide .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media (max-width:900px){.tete-guide .in{grid-template-columns:1fr;gap:28px;padding-block:20px 104px}.tete-guide .photo{order:-1;aspect-ratio:4/3}.reponse{font-size:17.5px}}

/* Chiffres clés : carte qui chevauche la tête */
.chiffres{margin-top:-72px;position:relative;z-index:3}
.chiffres .carte-chiffres{background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-3);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.chiffre{padding:22px 22px;display:grid;gap:4px;border-left:1px solid var(--filet);min-width:0}
.chiffre:first-child{border-left:0}
.chiffre b{font-family:var(--mono);font-weight:500;font-size:clamp(28px,2.8vw,40px);line-height:1;color:var(--marine)}
.chiffre b small{font-size:.5em;color:var(--or-texte)}
.chiffre span{font-size:14px;color:var(--taupe);line-height:1.35}
.chiffres .source{font-size:12.5px;color:var(--taupe);margin-top:10px;font-family:var(--mono)}
@media (max-width:860px){.chiffres .carte-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}.chiffre{border-left:0;border-top:1px solid var(--filet)}.chiffre:nth-child(-n+2){border-top:0}.chiffre:nth-child(even){border-left:1px solid var(--filet)}}

/* Corps : sommaire collant + article */
.corps .in{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;padding-block:72px 40px;align-items:start}
.sommaire{position:sticky;top:96px;font-size:14.5px}
.sommaire .sur{margin-bottom:12px}
.sommaire ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:2px solid var(--filet)}
.sommaire a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--taupe);text-decoration:none;line-height:1.35}
.sommaire a:hover{color:var(--marine)}
.sommaire a.ici{color:var(--marine);border-left-color:var(--or);font-weight:600}
.sommaire details summary{display:none}
@media (max-width:1060px){.corps .in{grid-template-columns:1fr;gap:28px;padding-block:56px 32px}.sommaire{position:static}
 .sommaire details{background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-2);padding:16px 18px}
 .sommaire details summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none;font-weight:600;color:var(--marine)}
 .sommaire details summary::-webkit-details-marker{display:none}.sommaire details summary:after{content:"+";font-family:var(--mono)}
 .sommaire details[open] summary:after{content:"–"}.sommaire details[open] summary{margin-bottom:12px}.sommaire details>.sur{display:none}}
.article{max-width:740px;min-width:0}
.article>*+*{margin-top:18px}
.article h2{font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(25px,2.6vw,32px);line-height:1.12;color:var(--marine);margin-top:72px;scroll-margin-top:96px}
.article h2:before{content:"";display:block;width:48px;height:2px;background:var(--or);margin-bottom:18px}
.article h2:first-child{margin-top:0}
.article h3{font-size:19px;margin-top:32px}
.article p,.article li{font-size:17.5px;line-height:1.62;color:var(--ardoise)}
.article ul,.article ol{padding-left:22px}.article li+li{margin-top:6px}
.article li::marker{color:var(--or-texte)}
.article a{color:var(--marine);text-decoration-color:var(--or);text-underline-offset:3px}
.article strong{color:var(--marine)}
.article blockquote{margin:28px 0;padding:0 0 0 34px;position:relative;font-style:italic;font-size:21px;line-height:1.45;color:var(--marine)}
.article blockquote:before{content:"«";position:absolute;left:0;top:-10px;font-size:52px;line-height:1;color:var(--or);font-style:normal}
.article blockquote p{font-size:inherit;color:inherit}
@media (max-width:640px){.article p,.article li{font-size:16.5px}.article h2{margin-top:56px}}

/* Tableau de données */
.donnees{background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-2);overflow:hidden;margin-top:24px}
.donnees .defile{overflow-x:auto}
.donnees table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
.donnees th,.donnees td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--filet);vertical-align:top}
.donnees th{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--or-texte);background:var(--ivoire)}
.donnees tr:last-child td{border-bottom:0}
.donnees td.n{font-family:var(--mono);color:var(--marine);white-space:nowrap}
.donnees figcaption{font-family:var(--mono);font-size:12px;color:var(--taupe);padding:10px 16px;border-top:1px solid var(--filet);background:var(--ivoire)}

/* Étapes numérotées (achat) */
.etapes{list-style:none;padding:0!important;margin:26px 0 0;display:grid;gap:14px;position:relative}
.etapes:before{content:"";position:absolute;left:19px;top:22px;bottom:30px;width:3px;background:var(--marine)}
.etapes li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;position:relative;margin:0!important}
.etapes .num{width:40px;height:40px;border-radius:50%;background:var(--marine);color:var(--or);font-family:var(--mono);font-weight:500;display:grid;place-items:center;z-index:1}
.etapes li:last-child .num{background:var(--jaune);color:var(--marine)}
.etapes .c{background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-2);padding:14px 18px}
.etapes .c b{display:block;font-family:var(--wide);font-variation-settings:"wdth" 112;font-size:16px;color:var(--marine);text-transform:uppercase;margin-bottom:2px}
.etapes .c span{font-size:15.5px;color:var(--taupe);line-height:1.5;display:block}
.etapes .c .mono{color:var(--or-texte);font-size:13px}

/* Encart « Mon avis » (signé) */
.avis{background:#fff;border-radius:var(--r-l);box-shadow:var(--ombre-3);display:grid;grid-template-columns:200px 1fr;overflow:hidden;margin-top:28px!important}
.avis .photo{border-radius:0;min-height:100%}
.avis .txt{padding:26px 28px}
.avis .txt p{font-size:16.5px}
.avis .txt p+p{margin-top:12px}
.avis .signe{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.signature{font-family:"Snell Roundhand","Brush Script MT",cursive;font-size:32px;color:var(--marine);opacity:.9;transform:rotate(-4deg);display:inline-block}
.avis .signe small{font-family:var(--mono);font-size:12px;color:var(--taupe)}
@media (max-width:640px){.avis{grid-template-columns:1fr}.avis .photo{aspect-ratio:16/10}}

/* Vidéo dans l'article (vignette, lecture dans la page) */
.video-guide{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--ombre-3);background:var(--marine);margin-top:26px!important}
.video-guide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-guide .play{left:16px;bottom:16px}
.video-guide+figcaption{font-family:var(--mono);font-size:12.5px;color:var(--taupe);margin-top:10px}

/* Deux vidéos côte à côte */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px!important}
.duo .video-guide{margin-top:0!important}.duo .play{font-size:13.5px}
@media (max-width:640px){.duo{grid-template-columns:1fr}}

/* Encart d'appel (dans le texte) */
.appel{background:var(--lin);border-radius:var(--r-l);padding:26px 28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-top:30px!important}
.appel b{display:block;font-family:var(--wide);font-variation-settings:"wdth" 112;font-size:19px;color:var(--marine);text-transform:uppercase;line-height:1.2}
.appel p{font-size:15.5px!important;color:var(--taupe)!important;margin-top:6px}
@media (max-width:640px){.appel{grid-template-columns:1fr}.appel .btn{width:100%;white-space:normal}}

/* Section pleine largeur entre deux parties de l'article (projets par budget) */
.corps.suite .in{padding-top:72px}
.aside-appel{position:sticky;top:96px;background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-2);padding:20px;display:grid;gap:10px}
.aside-appel b{font-family:var(--wide);font-variation-settings:"wdth" 112;font-size:16px;color:var(--marine);text-transform:uppercase;line-height:1.2}
.aside-appel p{font-size:14px;color:var(--taupe)}
.aside-appel .btn{font-size:14.5px;padding:12px 16px;min-height:46px;white-space:normal}
.aside-appel a.lien{font-size:14px;color:var(--marine)}
@media (max-width:1060px){.aside-appel{display:none}}
.budget{padding-block:88px;overflow:hidden}
.budget .in>.sur{display:block;margin-bottom:12px}
.budget h2{font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1.08;color:#fff;max-width:22ch;scroll-margin-top:96px}
.budget h2:before{content:"";display:block;width:48px;height:2px;background:var(--or);margin-bottom:18px}
.budget .intro{color:#C9D3E2;font-size:17px;max-width:62ch;margin-top:14px}
.onglets{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 26px}
.onglets button{border:1.5px solid rgba(201,165,92,.55);background:transparent;color:#fff;border-radius:var(--r-pill);padding:11px 18px;font:600 15px var(--ui);cursor:pointer;min-height:44px;transition:background .2s,color .2s}
.onglets button[aria-selected=true]{background:var(--ivoire);color:var(--marine);border-color:var(--ivoire)}
.onglets button small{font-family:var(--mono);font-weight:500;opacity:.75;margin-left:6px}
.tranche[hidden]{display:none}
.tranche .resume{color:#E9E1D2;font-size:16.5px;margin-bottom:22px;max-width:70ch}
.tranche .resume b{color:var(--or)}
.projets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.projet{background:#fff;color:var(--ardoise);border-radius:var(--r-m);box-shadow:var(--ombre-3);padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.projet .etiq{align-self:start;background:var(--lin);color:var(--or-texte);font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:var(--r-pill)}
.projet h3{font-size:18px}
.projet .lieu{font-size:14px;color:var(--taupe)}
.projet .prix{font-family:var(--mono);font-size:22px;color:var(--marine);margin-top:4px}
.projet .prix small{font-size:12.5px;color:var(--taupe);display:block;font-family:var(--ui)}
.projet dl{margin:6px 0 0;display:grid;gap:4px;font-size:13.5px;border-top:1px solid var(--filet);padding-top:10px}
.projet dl div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.projet dt{color:var(--taupe)}.projet dd{margin:0;color:var(--marine);font-family:var(--mono);text-align:right;white-space:nowrap}
.projet dd.bien{color:#1E6B3A}.projet dd.moyen{color:var(--or-texte)}
.projet a{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--marine)}
.budget .bas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.budget .note{font-family:var(--mono);font-size:12px;color:#AEB9CA;margin-top:22px;max-width:90ch}
@media (max-width:1060px){.projets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.budget{padding-block:64px}.projets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,env(safe-area-inset-left,0px));gap:14px;margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px));padding-bottom:14px;scrollbar-width:none}.projets::-webkit-scrollbar{display:none}.projet{flex:0 0 84%;scroll-snap-align:start}.onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px))}.onglets::-webkit-scrollbar{display:none}.onglets button{flex:none;white-space:nowrap;padding:10px 14px;font-size:14.5px}}

/* FAQ */
.faq{display:grid;gap:12px;margin-top:22px!important}
.faq details{background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-1);padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:600;color:var(--marine);font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:16px;font-family:var(--mono);font-size:20px;color:var(--or-texte)}
.faq details[open] summary:after{content:"–"}
.faq details>div{padding:0 0 18px}
.faq details p{font-size:16.5px!important}

/* Liens vers les pages sœurs */
.soeurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px!important}
.soeurs a{display:block;background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-2);padding:16px 18px;text-decoration:none;transition:transform .2s ease-out,box-shadow .2s}
.soeurs a:hover{transform:translateY(-3px);box-shadow:var(--ombre-3)}
.soeurs b{display:block;color:var(--marine);font-size:16px}.soeurs span{font-size:14px;color:var(--taupe)}
@media (max-width:760px){.soeurs{grid-template-columns:1fr}}
.sources{font-size:14px!important;color:var(--taupe)!important}
.sources a{color:var(--taupe)!important}

/* Dernier appel (photo sombre) */
.final{position:relative;overflow:hidden;color:#fff;margin-top:72px}
.final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.final:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,40,.92) 0%,rgba(7,21,40,.74) 50%,rgba(7,21,40,.3) 100%);z-index:1}
.final .in{position:relative;z-index:2;padding-block:104px}
.final h2{font-family:var(--wide);font-variation-settings:"wdth" 125;font-weight:700;text-transform:uppercase;font-size:clamp(28px,3.6vw,44px);line-height:1.04;color:#fff;max-width:16ch}
.final h2:before{content:"";display:block;width:48px;height:2px;background:var(--or);margin-bottom:20px}
.final p{font-size:18px;color:#E9E1D2;margin-top:20px;max-width:46ch}
.final .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
@media (max-width:640px){.final .in{padding-block:72px}}

/* Suivez-nous + pied */
.suivez{background:var(--marine);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.suivez .in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:36px}
.suivez .sur{color:var(--or)}
.suivez p{font-size:17px;color:#E9E1D2;margin-top:6px}
.reseaux{display:flex;gap:12px;flex-wrap:wrap}
.reseau{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;border:1px solid rgba(201,165,92,.45);border-radius:var(--r-pill);padding:10px 18px 10px 12px;font-weight:600;font-size:15px;transition:background .2s,color .2s,transform .2s ease-out}
.reseau svg{width:22px;height:22px}
.reseau:hover{background:var(--jaune);color:var(--marine);border-color:var(--jaune);transform:translateY(-2px)}
@media (max-width:560px){.reseaux{display:grid;grid-template-columns:1fr 1fr;width:100%}.reseau{justify-content:center}}
.pied{background:var(--marine-nuit);color:#AEB9CA;font-size:13px}
.pied .in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:34px}
.pied svg{height:30px;width:auto}
.pied span{max-width:70ch;line-height:1.6}
.pied a{color:inherit}.pied button.lien{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* Barre d'action mobile */
.barre{display:none}
@media (max-width:520px){.barre{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));background:rgba(247,243,236,.96);border-top:1px solid var(--filet)}.barre .btn{flex:1}body{padding-bottom:80px}}

/* Fenêtres (formulaire, vidéo) */
dialog{border:0;border-radius:var(--r-l);padding:0;max-width:min(460px,calc(100vw - 32px));width:100%;color:var(--ardoise);background:var(--ivoire)}
dialog::backdrop{background:rgba(7,21,40,.7)}
#vid{max-width:min(960px,calc(100vw - 32px));background:#000}
.lecteur{position:relative;aspect-ratio:16/9}
.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.form{padding:30px;display:grid;gap:18px}
.form h3{font-size:24px;text-transform:uppercase;font-variation-settings:"wdth" 118}
.form label{font-size:13.5px;font-weight:600;color:var(--marine);display:grid;gap:6px}
.form input{border:1px solid var(--filet);background:#fff;border-radius:var(--r-s);padding:13px 14px;font:inherit}
.form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.form legend{font-size:13.5px;font-weight:600;color:var(--marine);padding:0;margin-bottom:8px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puces label{display:block}
.puces input{position:absolute;opacity:0;pointer-events:none}
.puces span{display:block;border:1px solid var(--filet);background:#fff;border-radius:var(--r-pill);padding:9px 15px;font-size:14px;cursor:pointer;font-weight:500;color:var(--ardoise)}
.puces input:checked+span{background:var(--marine);color:#fff;border-color:var(--marine)}
.puces input:focus-visible+span{outline:2px solid var(--marine);outline-offset:2px}
.form small{color:var(--taupe);font-size:13px}
.form .erreur{color:#B3261E;font-size:13.5px;margin:0}
.ferme{position:absolute;right:12px;top:8px;background:none;border:0;font-size:28px;cursor:pointer;color:var(--taupe);z-index:3}
.merci{padding:40px 30px;display:grid;gap:12px;text-align:center}
.merci b{font-family:var(--wide);font-variation-settings:"wdth" 118;font-size:22px;color:var(--marine);text-transform:uppercase}

/* Pages vidéo (boucle vidéo → page, src/boucle.mjs, 20/10/2026) — ajouts seulement, rien ci-dessus n'est modifié */
.brouillon{background:#FFF3CD;border-bottom:1px solid #E0C26A;color:#5E4A12;font-size:14px;text-align:center;padding:10px 16px}
.tete-guide .photo.video{aspect-ratio:16/9;border:0;padding:0;width:100%;cursor:pointer;display:block}
.tete-guide .photo.video .play{left:18px;bottom:18px}
@media (max-width:900px){.tete-guide .photo.video{aspect-ratio:16/9}}
.note-c{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border-radius:var(--r-pill);box-shadow:var(--ombre-1);padding:6px 16px;margin:0 0 22px;font-family:var(--mono);color:var(--marine)}
.note-c b{font-size:26px;font-weight:600}.note-c span{font-size:13px;color:var(--taupe)}
.chiffres .carte-chiffres.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.chiffre em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--taupe);opacity:.85;line-height:1.35;margin-top:2px}
@media (max-width:860px){.chiffres .carte-chiffres.n3{grid-template-columns:1fr}.carte-chiffres.n3 .chiffre{border-left:0!important;border-top:1px solid var(--filet)}.carte-chiffres.n3 .chiffre:first-child{border-top:0}}
.avis .citation{font-style:italic;font-size:21px!important;line-height:1.45;color:var(--marine);margin-top:10px}
.avis .citation:before{content:"« ";color:var(--or)}.avis .citation:after{content:" »";color:var(--or)}
.qui-cartes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px!important}
.qc{background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-2);padding:20px 22px}
.qc h3{font-size:15px;text-transform:uppercase;font-variation-settings:"wdth" 118;margin:0 0 10px!important}
.qc ul{list-style:none;padding:0!important;margin:0;display:grid;gap:8px}
.qc li{padding-left:26px;position:relative;font-size:15.5px!important;line-height:1.45!important;margin:0!important}
.qc li:before{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:600}
.qc.oui li:before{content:"✓";color:#1E7B4A}.qc.non li:before{content:"✕";color:#B3261E}
@media (max-width:640px){.qui-cartes{grid-template-columns:1fr}}
.donnees.etroit{max-width:360px}.donnees.etroit table{min-width:0}
.donnees td a{color:var(--marine);font-weight:600}
.analyse{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:11px;background:var(--lin);color:var(--or-texte);padding:2px 8px;border-radius:var(--r-pill);vertical-align:middle}
.plus{display:block;width:100%;background:var(--ivoire);border:0;border-top:1px solid var(--filet);padding:14px;font:inherit;font-weight:600;color:var(--marine);cursor:pointer}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:22px!important}
.vid{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--ombre-2);border:0;padding:0;text-align:left;font:inherit;color:var(--ardoise);cursor:pointer;transition:transform .2s ease-out,box-shadow .2s ease-out}
.vid:hover{transform:translateY(-4px);box-shadow:var(--ombre-3)}
.vid .vis{position:relative;aspect-ratio:16/9;background:var(--marine)}
.vid .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .play{left:12px;bottom:12px;font-size:13px;padding:6px 14px 6px 6px}
.vid .play i{width:34px;height:34px}.vid .play i:after{left:13px;top:10px;border-left-width:10px;border-top-width:7px;border-bottom-width:7px}
.vid .leg{padding:14px 16px 16px;display:grid;gap:4px}
.vid .leg b{color:var(--marine);font-size:16px;line-height:1.3}
.vid .leg span{font-family:var(--mono);font-size:12px;color:var(--taupe)}
.matrice{display:grid;gap:14px;margin-top:24px!important}
.mx-tete,.mx-ligne{display:grid;grid-template-columns:170px repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.mx-tete div{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--or-texte);padding:0 6px}
.mx-enjeu{background:var(--marine);color:#fff;border-radius:var(--r-m);padding:16px;box-shadow:var(--ombre-2)}
.mx-enjeu b{display:block;font-family:var(--wide);font-variation-settings:"wdth" 112;text-transform:uppercase;font-size:14.5px;color:#fff;line-height:1.2}
.mx-enjeu span{display:block;font-size:13.5px;color:#C9D3E2;margin-top:6px;line-height:1.4}
.mx-case{background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-1);padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.mx-case .lab{display:none}
.mx-case a,.mx-case em{font-style:normal;font-size:14px;font-weight:600;color:var(--marine);background:var(--lin);border-radius:var(--r-pill);padding:6px 12px;text-decoration:none;line-height:1.3}
.mx-case a:hover{background:var(--jaune)}
.mx-case.vide{background:transparent;box-shadow:none;border:1px dashed var(--filet)}
.mx-reco{grid-column:2 / -1;font-size:15px!important;color:var(--ardoise);padding:0 6px 8px;line-height:1.5!important}
.mx-reco b{color:var(--or-texte);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-right:6px}
@media (max-width:860px){.mx-tete{display:none}.mx-ligne{grid-template-columns:1fr;gap:8px;margin-bottom:18px}.mx-case .lab{display:block;width:100%;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;color:var(--or-texte)}.mx-case.vide{display:none}.mx-reco{grid-column:auto}}
.aimant{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin-top:36px!important;background:#fff;border-radius:var(--r-l);box-shadow:var(--ombre-3);overflow:hidden;color:var(--ardoise);text-decoration:none;transition:transform .2s ease-out}
.aimant:hover{transform:translateY(-4px)}
.aimant .vis{position:relative;min-height:220px;background:var(--lin)}
.aimant .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aimant .vis .etiq{position:absolute;left:14px;top:14px;background:var(--ivoire);color:var(--or-texte);font-family:var(--mono);font-size:12px;padding:5px 11px;border-radius:var(--r-pill);box-shadow:var(--ombre-1);z-index:1}
.aimant .txt{padding:26px 28px;display:grid;gap:10px;align-content:center}
.aimant h3{font-size:clamp(19px,1.9vw,23px)}
.aimant .txt p{color:var(--taupe);font-size:15.5px!important;line-height:1.5!important}
.aimant .btn{justify-self:start;margin-top:6px}
.aimant.sans-vis{grid-template-columns:1fr}
@media (max-width:760px){.aimant{grid-template-columns:1fr}.aimant .vis{min-height:170px}.aimant .txt{padding:22px 20px}.aimant .btn{white-space:normal}}
@media (prefers-reduced-motion:reduce){.vid:hover,.aimant:hover{transform:none}}
.article.pv figure.donnees{margin-left:0;margin-right:0}
@media (max-width:640px){.chiffres.pv .chiffre b{font-size:24px}.chiffres.pv .chiffre{padding:18px 16px}}
/* Ajouts du 20/10 (pages vague 1, session pages-vague1) : graphe en barres et rangée de cartes défilantes. */
.graphe .g-titre{font-family:var(--wide);font-weight:700;color:var(--marine);font-size:17px;padding:16px 18px 0}
.graphe svg{display:block;width:100%;height:auto;padding:4px 10px 0}
.cartes-defile{margin:24px 0 0}
.cartes-defile .rang{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
.cartes-defile .carte-q{flex:0 0 230px;scroll-snap-align:start;background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre-2);padding:16px 18px;display:grid;gap:4px;align-content:start;text-decoration:none;color:inherit}
a.carte-q:hover{box-shadow:var(--ombre-3)}
.cartes-defile .sous{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--or-texte)}
.cartes-defile b{color:var(--marine);font-size:17px;line-height:1.25}
.cartes-defile .prix{font-family:var(--mono);color:var(--marine);font-size:14.5px}
.cartes-defile .txt{font-size:14px;color:var(--taupe)}
.cartes-defile figcaption{font-family:var(--mono);font-size:12px;color:var(--taupe)}
