/* Génération App, feuille commune (JM 30/10/2026). Couleurs tirées de la bannière Facebook. */
:root{
  --nuit:#030815; --nuit-2:#06102a; --encre:#f3f7ff; --doux:#a9b8da; --pale:#7d8db3;
  --cyan:#3fe0ff; --bleu:#3b82f6; --indigo:#6366f1; --violet:#8b5cf6; --magenta:#d24dff;
  --degrade:linear-gradient(90deg,#3fe0ff,#3b82f6 45%,#8b5cf6 75%,#d24dff);
  --verre:linear-gradient(160deg,rgba(63,224,255,.10),rgba(59,130,246,.05) 45%,rgba(139,92,246,.10));
  --bord:rgba(140,190,255,.22);
  --rayon:20px;
  --sans:"Segoe UI Variable Display","Segoe UI","Arial Nova",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --large:1160px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--nuit); color:var(--encre); font:17px/1.6 var(--sans); overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--cyan); }
h1,h2,h3{ line-height:1.15; letter-spacing:-.02em; margin:0; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }
.lien-evitement{ position:absolute; left:16px; top:-60px; z-index:50; padding:10px 16px; border-radius:10px; background:#fff; color:#000; }
.lien-evitement:focus{ top:12px; }
.conteneur{ width:min(var(--large),100% - 32px); margin-inline:auto; }

/* ── en-tête ── */
.entete{ position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(3,8,21,.72); border-bottom:1px solid rgba(140,190,255,.10); }
.entete .conteneur{ display:flex; align-items:center; gap:24px; min-height:68px; }
.marque{ display:flex; align-items:center; gap:10px; color:var(--encre); text-decoration:none; font-weight:700; font-size:17px; }
.marque img{ width:44px; height:auto; }
.menu{ display:flex; gap:4px; margin-left:auto; }
.menu a{ color:var(--doux); text-decoration:none; font-size:15px; font-weight:600; padding:8px 12px; border-radius:10px; transition:color .2s,background .2s; }
.menu a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.bouton{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:999px; border:0; cursor:pointer;
  font:700 16px/1.2 var(--sans); color:#fff; text-decoration:none; text-align:center;
  background:linear-gradient(90deg,#22c8ff,#4f6bff 55%,#a44dff); box-shadow:0 8px 30px rgba(79,107,255,.35);
  transition:transform .2s, box-shadow .2s; }
.bouton:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(79,107,255,.5); }
.bouton.second{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--bord); }
.bouton.second:hover{ background:rgba(255,255,255,.09); }
.bouton.petit{ padding:10px 18px; font-size:14.5px; }
.menu a{ white-space:nowrap; }
@media (max-width:1040px){ .menu{ display:none; } .entete .bouton{ margin-left:auto; } }

/* ── héros : le nom en grains de lumière, comme la bannière ── */
.heros{ position:relative; overflow:hidden; isolation:isolate; padding:28px 0 0;
  background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(59,130,246,.18),transparent 70%),
             radial-gradient(ellipse 40% 40% at 12% 70%,rgba(63,224,255,.10),transparent 70%),
             radial-gradient(ellipse 40% 40% at 88% 60%,rgba(139,92,246,.14),transparent 70%),var(--nuit); }
#ciel{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.heros-nom{ height:0; margin:0 auto; width:min(980px,100% - 32px); }
.heros-nom.actif{ height:clamp(110px,17vw,200px); }
.heros-texte{ position:relative; text-align:center; padding:8px 16px 0; }
.heros .surtitre{ font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:#cfe0ff; }
.heros .surtitre i{ font-style:normal; color:var(--cyan); padding:0 .5em; }
.heros h1{ margin:18px auto 14px; max-width:880px; font-size:clamp(30px,4.6vw,54px); font-weight:800; }
.heros h1 em{ font-style:normal; background:var(--degrade); -webkit-background-clip:text; background-clip:text; color:transparent; }
.heros .accroche{ max-width:660px; margin:0 auto; color:var(--doux); font-size:clamp(17px,1.6vw,19px); }
.heros .actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:30px 0 22px; }
.garanties{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; padding:0; margin:0; list-style:none; color:#cfe0ff; font-size:15px; }
.garanties li::before{ content:"✓"; color:var(--cyan); font-weight:800; margin-right:8px; }
/* panneaux de verre des côtés, immobiles : seule la lumière glisse dessus */
.panneaux{ display:flex; justify-content:center; align-items:flex-end; gap:clamp(14px,2.4vw,34px); margin:44px auto 0; padding-bottom:46px; perspective:900px; }
.panneau{ position:relative; width:clamp(130px,13vw,180px); aspect-ratio:.86; border-radius:18px;
  background:var(--verre); border:1px solid rgba(160,210,255,.35); overflow:hidden;
  box-shadow:0 0 40px rgba(63,224,255,.18), inset 0 0 30px rgba(99,102,241,.18); }
.panneau{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-decoration:none; color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:box-shadow .3s, border-color .3s, translate .3s; }
.panneau svg{ width:46%; height:auto; aspect-ratio:1; fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.panneau b{ font-size:clamp(12.5px,1.25vw,15px); font-weight:700; letter-spacing:.02em; text-shadow:0 0 12px rgba(63,224,255,.6); padding:0 8px; text-align:center; }
.panneau:hover, .panneau:focus-visible{ translate:0 -4px; border-color:#9fe8ff; box-shadow:0 0 60px rgba(63,224,255,.35), inset 0 0 30px rgba(99,102,241,.25); }
.panneau .point-fenetre{ position:absolute; top:10px; left:12px; display:flex; gap:4px; }
.panneau .point-fenetre i{ width:6px; height:6px; border-radius:50%; background:rgba(220,240,255,.7); }
.panneau::after{ content:""; position:absolute; inset:-40%; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-60%); animation:reflet 7s ease-in-out infinite; }
.panneau.g2{ transform:rotateY(26deg) scale(.88); }
.panneau.g1{ transform:rotateY(14deg); margin-right:clamp(10px,4vw,70px); }
.panneau.d1{ transform:rotateY(-14deg); margin-left:clamp(10px,4vw,70px); border-color:rgba(210,150,255,.45); box-shadow:0 0 40px rgba(170,90,255,.25), inset 0 0 30px rgba(139,92,246,.22); }
.panneau.d2{ transform:rotateY(-26deg) scale(.88); border-color:rgba(210,150,255,.4); }
.panneau{ -webkit-box-reflect:below 10px linear-gradient(transparent 60%,rgba(255,255,255,.18)); }
.panneau.g1 svg, .panneau.g2 svg{ stroke:#5ef0ff; filter:drop-shadow(0 0 8px #3fe0ff); }
.panneau.d1 svg, .panneau.d2 svg{ stroke:#d9a6ff; filter:drop-shadow(0 0 8px #b066ff); }
.panneau.d1::after, .panneau.d2::after{ animation-delay:3.5s; }
@keyframes reflet{ 0%,55%{ transform:translateX(-60%); } 85%,100%{ transform:translateX(60%); } }
.sol{ position:absolute; left:0; right:0; bottom:0; height:46%; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(63,224,255,.22) 1px,transparent 1px) 0 0/100% 34px,
             linear-gradient(90deg,rgba(99,140,255,.18) 1px,transparent 1px) 50% 0/60px 100%;
  transform:perspective(420px) rotateX(62deg); transform-origin:50% 100%;
  -webkit-mask:linear-gradient(transparent,#000 35%,#000 70%,transparent); mask:linear-gradient(transparent,#000 35%,#000 70%,transparent); }
/* téléphone : les quatre vignettes se rangent en grille, à plat */
@media (max-width:760px){
  .panneaux{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:min(420px,100% - 32px); margin:30px auto 0; padding-bottom:34px; perspective:none; }
  .panneau, .panneau.g1, .panneau.g2, .panneau.d1, .panneau.d2{ width:auto; aspect-ratio:1.5; transform:none; margin:0; -webkit-box-reflect:none; }
  .panneau svg{ width:30%; }
  .heros .surtitre{ font-size:12px; letter-spacing:.16em; }
}

/* ── sections ── */
section{ scroll-margin-top:80px; }
.bloc{ padding:clamp(64px,9vw,110px) 0; }
.bloc.teinte{ background:linear-gradient(180deg,transparent,rgba(59,130,246,.06) 30%,rgba(139,92,246,.06) 70%,transparent); }
.titre-bloc{ text-align:center; max-width:760px; margin:0 auto clamp(34px,5vw,54px); }
.titre-bloc .surtitre{ font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.titre-bloc h2{ margin:12px 0 14px; font-size:clamp(28px,3.6vw,42px); font-weight:800; }
.titre-bloc p{ color:var(--doux); }

/* vignettes translucides : elles ne bougent pas, la lumière les suit */
.verre{ position:relative; border-radius:var(--rayon); background:var(--verre); border:1px solid var(--bord); padding:28px 26px;
  box-shadow:inset 0 0 40px rgba(99,102,241,.10); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.verre::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(63,224,255,.16),transparent 60%); }
.verre:hover{ border-color:rgba(120,210,255,.55); box-shadow:inset 0 0 40px rgba(99,102,241,.16),0 0 34px rgba(63,224,255,.14); }
.verre:hover::before{ opacity:1; }

.offres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; align-items:stretch; }
.offre{ display:flex; flex-direction:column; }
.offre.vedette{ border-color:rgba(160,120,255,.6); box-shadow:inset 0 0 40px rgba(139,92,246,.18),0 0 50px rgba(139,92,246,.18); }
.etiquette{ align-self:flex-start; margin-bottom:14px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:linear-gradient(90deg,#4f6bff,#a44dff); }
.offre h3{ font-size:24px; }
.offre .pour{ color:var(--doux); margin:6px 0 18px; font-size:15.5px; }
.prix{ font-size:15px; color:var(--doux); margin-bottom:20px; }
.prix strong{ display:block; font-size:44px; line-height:1.1; color:#fff; font-weight:800; letter-spacing:-.02em; }
.prix small{ display:block; font-size:13px; color:var(--pale); }
.liste{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px; font-size:15.5px; }
.liste li{ padding-left:28px; position:relative; color:#dbe6ff; }
.liste li::before{ content:""; position:absolute; left:0; top:.32em; width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle,#3fe0ff 0 30%,rgba(63,224,255,.18) 34%); }
.offre .bouton{ margin-top:auto; }
.mention{ text-align:center; color:var(--pale); font-size:14px; margin-top:24px; }

.etapes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; counter-reset:etape; list-style:none; padding:0; margin:0; }
.etapes li{ counter-increment:etape; }
.etapes li::after{ content:counter(etape,decimal-leading-zero); position:absolute; right:20px; top:14px; font-size:44px; font-weight:800;
  background:var(--degrade); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.55; }
.etapes h3{ font-size:19px; margin-bottom:8px; padding-right:60px; }
.etapes p{ color:var(--doux); font-size:15.5px; }

.deux-col{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; }
@media (max-width:860px){ .deux-col{ grid-template-columns:1fr; } }
.deux-col .titre-bloc{ text-align:left; margin:0 0 22px; }
.points{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:520px){ .points{ grid-template-columns:1fr; } }
.point{ padding:18px; }
.point h3{ font-size:16.5px; margin-bottom:4px; }
.point p{ font-size:14.5px; color:var(--doux); }
.encadre-google{ padding:26px; }
.resultat{ border-radius:14px; background:#fff; color:#202124; padding:16px 18px; font-family:Arial,sans-serif; }
.resultat .url{ font-size:13px; color:#3c4043; }
.resultat .t{ display:block; color:#1a0dab; font-size:19px; margin:4px 0; }
.resultat .d{ font-size:14px; color:#4d5156; line-height:1.5; }
.resultat + .resultat{ margin-top:10px; opacity:.55; }
.encadre-google .legende{ margin-top:14px; font-size:14px; color:var(--doux); }

.exemples{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.exemple{ padding:0; text-decoration:none; color:inherit; }
.exemple img{ aspect-ratio:16/10; object-fit:cover; object-position:top; width:100%; border-bottom:1px solid var(--bord); }
.exemple div{ padding:16px 18px 18px; }
.exemple h4{ font-size:17px; margin:0; }
.sous-titre-exemples{ font-size:20px; margin:0 0 18px; color:#dbe6ff; }
.exemples + .sous-titre-exemples{ margin-top:46px; }
.exemple p{ color:var(--doux); font-size:14.5px; }

.compris{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.compris .verre h3{ font-size:18px; margin-bottom:6px; }
.compris .verre p{ color:var(--doux); font-size:15px; }

.faq{ max-width:860px; margin:0 auto; display:grid; gap:12px; }
.faq details{ padding:0; }
.faq summary{ cursor:pointer; list-style:none; padding:20px 56px 20px 24px; font-weight:700; font-size:17px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:24px; top:50%; translate:0 -50%; font-size:24px; color:var(--cyan); transition:rotate .25s; }
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ padding:0 24px 22px; color:var(--doux); }

.final{ text-align:center; padding:clamp(40px,6vw,64px) 24px; }
.final h2{ font-size:clamp(26px,3.4vw,40px); margin-bottom:12px; }
.final p{ color:var(--doux); max-width:620px; margin:0 auto 26px; }

/* ── pied de page ── */
.pied{ border-top:1px solid rgba(140,190,255,.12); padding:50px 0 30px; color:var(--doux); font-size:15px; }
.pied .colonnes{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px; }
@media (max-width:760px){ .pied .colonnes{ grid-template-columns:1fr 1fr; } }
.pied h2{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:12px; }
.pied ul{ list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.pied a{ color:var(--doux); text-decoration:none; }
.pied a:hover{ color:#fff; }
.pied .bas{ margin-top:36px; padding-top:20px; border-top:1px solid rgba(140,190,255,.10); font-size:13.5px; color:var(--pale); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }

/* ── tunnel de commande ── */
.tunnel{ display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
@media (max-width:900px){ .tunnel{ grid-template-columns:1fr; } }
.fil{ display:flex; gap:8px; list-style:none; padding:0; margin:0 0 22px; counter-reset:fil; flex-wrap:wrap; }
.fil li{ counter-increment:fil; flex:1 1 0; min-width:90px; font-size:13.5px; color:var(--pale); padding-top:10px; border-top:3px solid rgba(140,190,255,.18); }
.fil li::before{ content:counter(fil) ". "; }
.fil li.fait, .fil li.en-cours{ color:#fff; border-color:var(--cyan); }
.fil li.en-cours{ font-weight:700; }
.etape-form{ border:0; margin:0; padding:0; }
.etape-form legend{ font-size:clamp(22px,2.6vw,28px); font-weight:800; margin-bottom:6px; padding:0; }
.etape-form .aide{ color:var(--doux); margin-bottom:22px; }
.choix{ display:grid; gap:12px; }
.choix label{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; padding:18px 20px; }
.choix input{ margin-top:5px; accent-color:var(--cyan); width:18px; height:18px; flex:none; }
.choix label:has(input:checked){ border-color:var(--cyan); box-shadow:inset 0 0 40px rgba(63,224,255,.12),0 0 24px rgba(63,224,255,.16); }
.choix strong{ display:block; font-size:17px; }
.choix span{ color:var(--doux); font-size:15px; }
.choix .tarif{ margin-left:auto; font-weight:800; white-space:nowrap; color:#fff; }
.metiers{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.metiers label{ cursor:pointer; }
.metiers input{ position:absolute; opacity:0; width:1px; height:1px; }
.metiers span{ display:inline-block; padding:9px 15px; border-radius:999px; border:1px solid var(--bord); background:rgba(255,255,255,.03); font-size:15px; color:#dbe6ff; }
.metiers input:checked + span{ border-color:var(--cyan); background:rgba(63,224,255,.14); color:#fff; }
.metiers input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }
.champ{ display:grid; gap:6px; margin-bottom:16px; }
.champ label{ font-weight:600; font-size:15.5px; }
.champ label small{ color:var(--pale); font-weight:400; }
.champ input, .champ textarea{ width:100%; padding:13px 15px; border-radius:12px; border:1px solid var(--bord); background:rgba(3,8,21,.6);
  color:var(--encre); font:16px var(--sans); }
.champ input:focus, .champ textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(63,224,255,.18); }
.champ input[aria-invalid="true"]{ border-color:#ff6b8a; }
.deux-champs{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:560px){ .deux-champs{ grid-template-columns:1fr; } }
.accord{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--doux); margin:6px 0 20px; }
.accord input{ margin-top:4px; accent-color:var(--cyan); width:17px; height:17px; flex:none; }
.piege{ position:absolute; left:-9999px; }
.navigation-etapes{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:24px; flex-wrap:wrap; }
.retour{ background:none; border:0; color:var(--doux); font:600 15px var(--sans); cursor:pointer; padding:10px 4px; }
.retour:hover{ color:#fff; }
.erreur{ color:#ff9db1; font-size:15px; margin-top:12px; }
.recap{ position:sticky; top:90px; }
.recap h2{ font-size:18px; margin-bottom:14px; }
.recap dl{ margin:0 0 18px; display:grid; gap:8px; font-size:15px; }
.recap dt{ color:var(--pale); font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.recap dd{ margin:0 0 6px; color:#fff; }
.recap .rassure{ list-style:none; padding:16px 0 0; margin:0; border-top:1px solid var(--bord); display:grid; gap:8px; font-size:14.5px; color:var(--doux); }
.recap .rassure li::before{ content:"✓"; color:var(--cyan); font-weight:800; margin-right:8px; }
.merci{ text-align:center; padding:40px 20px; }
.merci h2{ font-size:clamp(26px,3vw,36px); margin:10px 0 12px; }
.merci p{ color:var(--doux); max-width:520px; margin:0 auto 10px; }
.page-tunnel .heros-court{ padding:46px 0 26px; text-align:center; }
.page-tunnel .heros-court h1{ font-size:clamp(28px,4vw,46px); font-weight:800; }
.page-tunnel .heros-court h1 em{ font-style:normal; background:var(--degrade); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-tunnel .heros-court p{ color:var(--doux); margin-top:10px; }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.merci .surtitre{ font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.merci:focus{ outline:none; }
[hidden]{ display:none!important; }
/* téléphone : en-tête sur une ligne, tunnel plus aéré */
.marque, .entete .bouton{ white-space:nowrap; }
@media (max-width:440px){
  .entete .conteneur{ gap:10px; }
  .marque{ font-size:15.5px; gap:8px; } .marque img{ width:38px; }
  .entete .bouton.petit{ padding:9px 14px; font-size:14px; }
}
@media (max-width:560px){
  #tunnel.verre{ padding:22px 16px; }
  .choix label{ flex-wrap:wrap; padding:16px; }
  .choix label > div{ flex:1 1 calc(100% - 40px); }
  .choix .tarif{ margin-left:32px; }
}
@media (max-width:379px){ .entete .marque-texte{ display:none; } }

/* ── menu commun à toutes les pages (JM 30/10/2026) ── */
.menu a[aria-current="page"]{ color:#fff; background:rgba(63,224,255,.10); }
@media (max-width:1180px){ .menu{ display:none; } .entete .bouton{ margin-left:auto; } }
@media (min-width:1181px){ .menu{ display:flex; } .menu-mobile{ display:none; } }
.menu-mobile{ position:relative; }
.menu-mobile summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px;
  border:1px solid var(--bord); color:#fff; font-weight:700; font-size:14.5px; background:rgba(255,255,255,.04); }
.menu-mobile summary::-webkit-details-marker{ display:none; }
.menu-mobile summary i{ width:16px; height:2px; background:currentColor; box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor; }
.menu-mobile[open] summary{ border-color:var(--cyan); }
.menu-mobile nav{ position:absolute; right:0; top:calc(100% + 10px); width:min(280px,calc(100vw - 32px)); padding:10px; display:grid; gap:2px;
  border-radius:16px; background:rgba(6,14,36,.97); border:1px solid var(--bord); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.menu-mobile nav a{ padding:12px 14px; border-radius:10px; color:#dbe6ff; text-decoration:none; font-weight:600; }
.menu-mobile nav a:hover, .menu-mobile nav a[aria-current="page"]{ background:rgba(63,224,255,.10); color:#fff; }
@media (max-width:440px){ .menu-mobile summary span{ display:none; } .menu-mobile summary{ padding:11px 12px; } }

/* ── pages intérieures ── */
.heros-page{ padding:clamp(44px,7vw,80px) 0 clamp(30px,4vw,46px); text-align:center;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(59,130,246,.16),transparent 70%); }
.fil-ariane{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 18px; font-size:14px; color:var(--pale); }
.fil-ariane li + li::before{ content:"›"; margin-right:6px; }
.fil-ariane a{ color:var(--doux); text-decoration:none; }
.heros-page h1{ font-size:clamp(30px,4.4vw,52px); font-weight:800; max-width:900px; margin:10px auto 14px; }
.heros-page h1 em{ font-style:normal; background:var(--degrade); -webkit-background-clip:text; background-clip:text; color:transparent; }
.heros-page .accroche{ max-width:680px; margin:0 auto; color:var(--doux); }
.heros-page .surtitre{ font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.groupe{ margin-bottom:clamp(44px,6vw,70px); }
.groupe > h2{ font-size:clamp(22px,2.6vw,30px); margin-bottom:6px; }
.groupe > p{ color:var(--doux); margin-bottom:22px; max-width:720px; }
.cartes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:20px; }
.carte{ display:flex; flex-direction:column; padding:0; text-decoration:none; color:inherit; }
.carte img{ width:100%; aspect-ratio:5/3; object-fit:cover; border-bottom:1px solid var(--bord); }
.carte .corps{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.carte .etiq{ align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.carte h3{ font-size:19px; }
.carte p{ color:var(--doux); font-size:15px; }
.carte .pied-carte{ margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; }
.carte .tarif-carte{ font-weight:800; color:#fff; font-size:17px; }
.carte .tarif-carte small{ font-weight:600; color:var(--doux); font-size:13px; }
.carte .voir{ font-size:14px; font-weight:700; color:var(--cyan); white-space:nowrap; }
.carte.vedette{ border-color:rgba(160,120,255,.6); box-shadow:inset 0 0 40px rgba(139,92,246,.18),0 0 40px rgba(139,92,246,.15); }
.meta{ font-size:13px; color:var(--pale); }
/* les cartes occupent toute la ligne ; une carte seule ne s'étire pas */
.cartes{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.cartes:has(> :only-child){ max-width:440px; }
/* téléphone : logo seul, pour laisser la place au bouton et au menu */
@media (max-width:520px){ .entete .marque-texte{ display:none; } }
/* aucune grille ne peut exiger plus que la largeur disponible */
.offres{ grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.exemples{ grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); }
.etapes{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.compris{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.pied a{ overflow-wrap:anywhere; }
@media (max-width:480px){ .pied .colonnes{ grid-template-columns:1fr; } }
.carte-visuel{ display:grid; place-items:center; aspect-ratio:5/3; border-bottom:1px solid var(--bord);
  background:radial-gradient(circle at 50% 55%,rgba(63,224,255,.22),transparent 60%),linear-gradient(160deg,#071436,#0b0a2c); }
.carte-visuel svg{ width:34%; fill:none; stroke:#5ef0ff; stroke-width:3.5; stroke-linecap:round; filter:drop-shadow(0 0 10px #3fe0ff); }