:root{
    --encre:#0a2230; --encre-doux:#4a6472; --ligne:#dde8ee;
    --fond:#ffffff; --fond-doux:#f2f8fb; --fond-sombre:#0a2230;
    --cyan:#00a9ce; --cyan-sombre:#0b4f68; --accent:#1547e0;
    --succes:#12855f; --alerte:#c0392b;
    --r:16px; --r-s:10px;
    --ombre:0 1px 2px rgba(10,34,48,.05), 0 12px 34px -14px rgba(10,34,48,.2);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--fond); color:var(--encre);
    font:17px/1.6 Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%}
  .wrap{max-width:1140px; margin:0 auto; padding:0 24px}
  section{padding:88px 0}
  h1,h2,h3{line-height:1.12; letter-spacing:-.025em; margin:0}
  h1{font-size:clamp(38px,6.4vw,70px); font-weight:800}
  h2{font-size:clamp(28px,4.2vw,44px); font-weight:800}
  h3{font-size:21px; font-weight:700}
  p{margin:0 0 16px}
  .sur{
    display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-sombre);
    background:#e8f6fb; border:1px solid #c8e9f4; border-radius:999px; padding:7px 15px;
  }
  .chapo{font-size:clamp(17px,2.1vw,20px); color:var(--encre-doux); max-width:62ch}

  /* --- barre --- */
  .barre{
    position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--ligne);
  }
  .barre .wrap{display:flex; align-items:center; gap:18px; height:70px}
  .logo{font-weight:800; font-size:20px; letter-spacing:-.03em; color:var(--encre); text-decoration:none}
  .logo span{color:var(--cyan)}
  .nav{margin-left:auto; display:flex; gap:26px; align-items:center}
  .nav a{color:var(--encre-doux); text-decoration:none; font-size:15px; font-weight:500}
  .nav a:hover{color:var(--encre)}
  /* sinon la regle .nav a ci-dessus, plus specifique, avale la couleur du bouton */
  .nav a.btn-p{color:#fff}
  .nav a.btn-p:hover{color:#fff}
  @media (max-width:820px){ .nav a:not(.btn){display:none} }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 24px; border-radius:999px; font-weight:700; font-size:16px;
    text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:.18s;
  }
  .btn-p{background:var(--accent); color:#fff}
  .btn-p:hover{background:#0f37b4}
  .btn-s{background:#fff; color:var(--encre); border-color:var(--ligne)}
  .btn-s:hover{border-color:var(--encre)}
  .btn-c{background:var(--cyan); color:#fff}
  .btn-c:hover{background:var(--cyan-sombre)}
  .btn-sm{padding:10px 18px; font-size:14.5px}

  /* --- hero --- */
  .hero{
    padding:76px 0 64px;
    background:
      radial-gradient(1100px 460px at 78% -12%, #d9f0f8 0%, rgba(217,240,248,0) 62%),
      linear-gradient(180deg,#f6fbfd 0%,#ffffff 100%);
    border-bottom:1px solid var(--ligne);
  }
  .hero h1{margin:20px 0 18px; max-width:15ch}
  .hero-haut{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:30px; align-items:center}
  .hero-visuel{margin:0; justify-self:center}
  .hero-visuel img{display:block; width:100%; max-width:380px; height:auto}
  @media (max-width:820px){ .hero-haut{grid-template-columns:1fr; gap:6px} .hero-visuel{order:-1} .hero-visuel img{max-width:150px} }
  .photo-produit{margin:0; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:22px 22px 18px; display:flex; flex-direction:column; justify-content:center; gap:14px}
  .photo-produit img{display:block; width:100%; height:auto}
  .photo-produit figcaption{font-size:14px; color:var(--encre-doux)}
  .photo-produit figcaption b{display:block; color:var(--encre); font-size:15.5px; margin-bottom:3px}
  .hero .barre-act{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
  .hero-note{margin-top:16px; font-size:14.5px; color:var(--encre-doux)}

  /* --- comparatif --- */
  .compa{display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch; margin-top:46px}
  .prix{border:1px solid var(--ligne); border-radius:var(--r); padding:26px; background:#fff; box-shadow:var(--ombre)}
  .prix.gagnant{border:2px solid var(--cyan); background:linear-gradient(180deg,#f4fcfe,#fff)}
  .prix .lab{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-doux)}
  .prix .gros{font-size:clamp(36px,5vw,52px); font-weight:800; letter-spacing:-.04em; margin:8px 0 4px}
  .prix.gagnant .gros{color:var(--cyan-sombre)}
  .prix ul{margin:14px 0 0; padding:0; list-style:none; font-size:15px; color:var(--encre-doux)}
  .prix li{padding:6px 0; border-top:1px solid var(--ligne)}
  .versus{align-self:center; font-weight:800; color:var(--encre-doux); font-size:15px}
  @media (max-width:820px){ .compa{grid-template-columns:1fr} .versus{text-align:center} }

  /* --- portes --- */
  .portes{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:42px}
  .porte{
    border:1px solid var(--ligne); border-radius:var(--r); padding:30px; background:#fff;
    display:flex; flex-direction:column; box-shadow:var(--ombre);
  }
  .porte .num{
    width:38px; height:38px; border-radius:11px; background:#e8f6fb; color:var(--cyan-sombre);
    display:grid; place-items:center; font-weight:800; margin-bottom:16px;
  }
  .porte p{color:var(--encre-doux); font-size:16px}
  .porte .btn{margin-top:auto; align-self:flex-start}
  .porte .liste{margin:6px 0 20px; padding-left:20px; color:var(--encre-doux); font-size:15.5px}
  .porte .liste li{margin-bottom:5px}
  @media (max-width:820px){ .portes{grid-template-columns:1fr} }

  /* --- grille generique --- */
  .g3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px}
  .g2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:38px}
  @media (max-width:880px){ .g3{grid-template-columns:1fr} .g2{grid-template-columns:1fr} }
  .carte{border:1px solid var(--ligne); border-radius:var(--r); padding:26px; background:#fff}
  .carte h3{margin-bottom:8px}
  .carte p{color:var(--encre-doux); font-size:15.5px; margin:0}
  .carte .pastille{
    width:40px; height:40px; border-radius:11px; background:var(--fond-doux);
    display:grid; place-items:center; margin-bottom:14px; font-size:19px;
  }
  .pastille svg{width:22px; height:22px; fill:none; stroke:var(--cyan-sombre); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block}
  .origine{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px}
  .origine li{display:flex; align-items:center; gap:10px}
  .origine .drapeau{width:30px; height:20px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08); flex:none}
  .origine b{display:block; font-size:14.5px; color:var(--encre)}
  .origine span{font-size:13px; color:var(--encre-doux); line-height:1.3}

  /* --- chiffres --- */
  .sombre{background:var(--fond-sombre); color:#fff}
  .sombre h2{color:#fff}
  .sombre .chapo{color:#a8c4d2}
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px}
  .stat{border:1px solid rgba(255,255,255,.16); border-radius:var(--r); padding:26px; background:rgba(255,255,255,.04)}
  .stat .n{font-size:clamp(30px,4.4vw,42px); font-weight:800; letter-spacing:-.04em; color:var(--cyan)}
  .stat .t{color:#a8c4d2; font-size:15px; margin-top:6px}
  @media (max-width:880px){ .stats{grid-template-columns:1fr} }

  /* --- bloc image a fournir --- */
  .trou{
    border:2px dashed #b9d3e0; border-radius:var(--r); background:
      repeating-linear-gradient(135deg,#f7fbfd,#f7fbfd 11px,#f1f8fb 11px,#f1f8fb 22px);
    padding:28px; text-align:center; color:var(--cyan-sombre);
  }
  .trou .ic{font-size:26px; display:block; margin-bottom:8px}
  .trou b{display:block; font-size:15.5px; margin-bottom:5px}
  .trou span{font-size:14px; color:var(--encre-doux); display:block; max-width:52ch; margin:0 auto}
  /* un encadre aligne a gauche doit occuper toute sa largeur */
  .trou[style*="text-align:left"] span{max-width:none; margin:0}
  .trou.haut{min-height:280px; display:flex; flex-direction:column; justify-content:center}

  /* --- macarons d'avantages --- */
  .macarons{
    list-style:none; margin:30px 0 0; padding:0;
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  }
  @media (max-width:900px){ .macarons{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .macarons{grid-template-columns:1fr} }
  .macarons li{
    background:#fff; border:1px solid var(--ligne); border-radius:var(--r-s);
    padding:14px 16px; box-shadow:var(--ombre);
  }
  .macarons b{display:block; font-size:15.5px; color:var(--cyan-sombre)}
  .macarons span{display:block; font-size:13.5px; color:var(--encre-doux); margin-top:3px}

  /* --- visuel d'implant --- */
  .vis-imp{
    display:flex; justify-content:center; align-items:flex-end; gap:30px;
    background:linear-gradient(180deg,#eef7fb,#fff); border:1px solid var(--ligne);
    border-radius:var(--r); padding:26px 20px 0; margin-top:34px; overflow:hidden;
  }
  .vis-imp figure{margin:0; text-align:center; max-width:230px}
  .vis-imp img{display:block; max-height:330px; width:auto; margin:0 auto; mix-blend-mode:multiply}
  .vis-imp figcaption{font-size:13.5px; color:var(--encre-doux); padding:12px 0 18px}
  .vis-imp figcaption b{display:block; color:var(--encre); font-size:15px}
  @media (max-width:640px){ .vis-imp{gap:14px} .vis-imp img{max-height:220px} }

  .planche{
    border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden;
    margin-top:26px; background:#fff;
  }
  .planche img{display:block; width:100%}
  .planche figcaption{
    font-size:13.5px; color:var(--encre-doux); padding:13px 18px; border-top:1px solid var(--ligne);
    background:var(--fond-doux);
  }

  /* --- les implants --- */
  .imp{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px}
  @media (max-width:900px){ .imp{grid-template-columns:1fr} }
  .imp article{
    border:1px solid var(--ligne); border-radius:var(--r); padding:26px; background:#fff;
    box-shadow:var(--ombre); display:flex; flex-direction:column;
  }
  .imp article.attente{background:var(--fond-doux); box-shadow:none; border-style:dashed}
  .imp h3{margin-bottom:4px}
  .imp .compat{font-size:14px; color:var(--cyan-sombre); font-weight:600; margin-bottom:14px}
  .imp dl{margin:0; font-size:14.5px; border-top:1px solid var(--ligne); padding-top:12px}
  .imp dt{color:var(--encre-doux); font-size:13px; margin-top:9px}
  .imp dd{margin:2px 0 0; font-weight:600}

  /* --- temoignages --- */
  .avis{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px}
  @media (max-width:880px){ .avis{grid-template-columns:1fr} }
  .avis figure{
    margin:0; border:1px solid var(--ligne); border-radius:var(--r); padding:26px;
    background:#fff; display:flex; flex-direction:column; box-shadow:var(--ombre);
  }
  .etoiles{color:#f0a500; font-size:15px; letter-spacing:2px; margin-bottom:12px}
  .avis blockquote{margin:0 0 18px; font-size:16px; line-height:1.62; color:var(--encre)}
  .avis figcaption{display:flex; align-items:center; gap:12px; margin-top:auto}
  .initiales{
    width:42px; height:42px; border-radius:50%; background:var(--fond-doux);
    color:var(--cyan-sombre); display:grid; place-items:center; font-weight:800; font-size:14px;
    border:1px solid var(--ligne); flex:none;
  }
  .avis .qui{font-weight:700; font-size:15.5px}
  .avis .ou{color:var(--encre-doux); font-size:14px}
  .note-globale{
    display:inline-flex; align-items:center; gap:12px; margin-top:26px;
    background:var(--fond-doux); border:1px solid var(--ligne); border-radius:999px;
    padding:10px 20px; font-size:15px;
  }
  .note-globale b{font-size:19px; color:var(--encre)}

  /* --- faq --- */
  details.q{border-bottom:1px solid var(--ligne); padding:18px 0}
  details.q summary{
    cursor:pointer; font-weight:700; font-size:17.5px; list-style:none;
    display:flex; align-items:center; gap:14px;
  }
  details.q summary::-webkit-details-marker{display:none}
  details.q summary::after{content:"+"; margin-left:auto; color:var(--cyan); font-weight:800; font-size:22px}
  details.q[open] summary::after{content:"–"}
  details.q p{margin:12px 0 0; color:var(--encre-doux); font-size:16px; max-width:76ch}

  /* --- bandeau final --- */
  .final{
    background:linear-gradient(135deg,var(--cyan-sombre),#0a2230); color:#fff;
    border-radius:22px; padding:clamp(34px,5vw,58px); text-align:center; margin:0 auto;
  }
  .final h2{color:#fff; margin-bottom:14px}
  .final p{color:#bfe0ec; max-width:58ch; margin:0 auto 26px}
  .final .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

  /* --- pied --- */
  footer{border-top:1px solid var(--ligne); padding:52px 0 30px; background:var(--fond-doux)}
  .pied{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px}
  @media (max-width:820px){ .pied{grid-template-columns:1fr} }
  footer h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-doux); margin:0 0 12px}
  footer ul{list-style:none; margin:0; padding:0}
  footer li{margin-bottom:8px}
  footer a{color:var(--encre); text-decoration:none; font-size:15px}
  footer a:hover{text-decoration:underline}
  .legal{margin-top:34px; padding-top:20px; border-top:1px solid var(--ligne); font-size:13.5px; color:var(--encre-doux)}

  .maq{
    background:#fff6e5; border-bottom:1px solid #f2dcb0; color:#7a5a12;
    font-size:14px; padding:10px 0; text-align:center;
  }
  .maq b{color:#5c430c}

/* --- quatre portes, laboratoires, formation (architecture dictée par Thomas le 06/10) ---------- */
.prix{display:flex; flex-direction:column}
.prix .cta{margin-top:18px; align-self:flex-start}
.porte .tag{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-doux); margin-left:auto}
.porte .num-ligne{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.porte .num-ligne .num{margin-bottom:0}
.form-ligne{display:flex; gap:10px; flex-wrap:wrap; flex:1 1 360px; margin:0}
.form-ligne input,.form-ligne select{font:inherit; font-size:15px; padding:11px 13px; border:1.5px solid var(--ligne); border-radius:10px; flex:1 1 150px; min-width:0; background:#fff}
.form-ligne input:focus,.form-ligne select:focus{outline:none; border-color:var(--cyan)}
.merci-inline{margin:0; padding:16px 18px; border:1px solid #bde5d3; background:#f3fbf7; border-radius:var(--r-s); color:#0f6b4c; font-weight:600}

/* --- marque des outils, qui sommes-nous (15/10) ---------------------------------------------- */
.logo{white-space:nowrap}
.logo{display:inline-grid; grid-template-columns:auto auto; align-items:center; column-gap:7px; line-height:1}
.logo img{grid-row:1 / span 2; margin-right:0 !important; vertical-align:middle}
.logo-nom{grid-column:2; white-space:nowrap}
.logo .logo-nom{color:var(--encre)}
.logo .logo-nom span{color:var(--cyan)}
.logo small{grid-column:2; display:block; font-family:inherit; font-size:9.5px; font-weight:600; color:var(--encre-doux); letter-spacing:.03em; margin:2px 0 0 1px}
.nav{gap:22px}
.nav a{white-space:nowrap}
@media (max-width:1100px){ .nav a[href="#labo"], .nav a[href="#formation"]{display:none} }
.porte .outil{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-sombre); margin:-2px 0 10px}
.histoire{display:grid; grid-template-columns:1.6fr 1fr; gap:40px; margin-top:30px; align-items:start}
.histoire p{color:var(--encre-doux); font-size:16.5px}
.histoire .chapo{color:var(--encre)}
.chiffres{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.chiffres li{border:1px solid var(--ligne); border-radius:var(--r); padding:20px 22px; background:var(--fond-doux)}
.chiffres b{display:block; font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--cyan-sombre)}
.chiffres span{font-size:14.5px; color:var(--encre-doux)}
@media (max-width:820px){ .histoire{grid-template-columns:1fr} }

/* --- bandeau ADF, logo, choix du creneau (13/10) ---------------------------------------------- */
.adf{background:var(--encre); color:#cfe3ee; font-size:14px; padding:9px 0; text-align:center}
.adf b{color:#fff}
.adf span{color:#7fd6ea; margin-left:8px}
.logo img{vertical-align:-7px; margin-right:7px}
.creneau-titre{display:block; font-size:13.5px; font-weight:600; color:var(--encre-doux); margin-bottom:8px}
.cal-jours{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.cal-jour,.cal-creneau{font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; background:#fff; border:1.5px solid var(--ligne); border-radius:9px; padding:7px 10px; color:var(--encre)}
.cal-jour:hover,.cal-creneau:hover{border-color:var(--cyan)}
.cal-jour.est-actif,.cal-creneau.est-actif{border-color:var(--accent); background:#e9efff; color:var(--accent)}
.cal-creneaux{display:flex; gap:6px; flex-wrap:wrap; max-height:150px; overflow:auto; padding:2px}
.cal-creneau{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:500; padding:6px 9px}
.creneau-aide{font-size:12.5px; color:var(--encre-doux); margin:8px 0 0}

/* --- page solution (offre à 219 €) ------------------------------------------------------------ */
.hero-sol{padding:56px 0 44px}
.hero-sol h1{max-width:20ch}
.prix-h1{color:var(--cyan-sombre); white-space:nowrap}
.garde{display:flex; flex-direction:column; gap:3px; margin-top:26px; border:1px solid #f2dcb0; background:#fffaf0; border-radius:var(--r-s); padding:14px 18px; font-size:15px; color:#5c430c; max-width:70ch}
.garde b{color:#7a5a12}
.garde a{color:var(--cyan-sombre); font-weight:600}
#sol{padding:10px 24px 120px}
.chargement{padding:60px 0; text-align:center; color:var(--encre-doux)}
.etape{padding:44px 0 10px; border-top:1px solid var(--ligne)}
.etape:first-child{border-top:none}
.etape-tete{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.etape-tete h2{font-size:clamp(22px,3vw,30px)}
.etape-num{width:36px; height:36px; border-radius:11px; background:var(--encre); color:#fff; display:grid; place-items:center; font-weight:800; flex:none}
.etape-opt{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-doux); background:var(--fond-doux); border:1px solid var(--ligne); border-radius:999px; padding:4px 10px}
.etape-aide{color:var(--encre-doux); font-size:15.5px; margin:0 0 20px; max-width:70ch}
.implants{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:860px){ .implants{grid-template-columns:1fr} }
.implant{font:inherit; text-align:left; cursor:pointer; background:#fff; border:2px solid var(--ligne); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; transition:.18s; box-shadow:var(--ombre); color:var(--encre)}
.implant:hover{border-color:var(--cyan)}
.implant[aria-pressed="true"]{border-color:var(--accent); background:#f3f6ff}
.implant img{height:120px; width:auto; align-self:center; mix-blend-mode:multiply; margin-bottom:8px}
.implant-vide{height:120px; width:70px; align-self:center; border-radius:35px 35px 12px 12px; background:repeating-linear-gradient(135deg,#eef4f7,#eef4f7 6px,#f7fafc 6px,#f7fafc 12px); border:1px dashed #b9d3e0; margin-bottom:8px}
.implant-nom{font-weight:800; font-size:19px; letter-spacing:-.02em}
.implant-compat{font-size:14px; color:var(--cyan-sombre); font-weight:600}
.implant-plats{font-size:12.5px; font-weight:700; color:var(--encre-doux); display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.implant-plats i{display:inline-block; width:12px; height:5px; border-radius:2px; vertical-align:middle; margin-right:4px}
.plats{display:flex; gap:12px; flex-wrap:wrap}
.plat{font:inherit; font-weight:800; font-size:17px; cursor:pointer; background:#fff; border:2px solid var(--ligne); border-radius:var(--r-s); padding:14px 22px 12px; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:92px; color:var(--encre)}
.plat i{display:block; width:42px; height:6px; border-radius:3px}
.plat img{display:block; height:96px; width:auto; margin:0 auto 8px; mix-blend-mode:multiply}
.plat small{display:block; font-size:12.5px; font-weight:600; color:var(--encre-doux); text-align:center; line-height:1.35; margin-top:2px}
.plat:hover{border-color:var(--cyan)}
.plat[aria-pressed="true"]{border-color:var(--accent); background:#f3f6ff}
.piliers{display:grid; gap:14px}
.pilier{display:flex; gap:18px; align-items:flex-start; border:1px solid var(--ligne); border-radius:var(--r); padding:18px; background:#fff}
.pilier.est-vide{opacity:.55}
.pilier-visuel{flex:none; width:84px; height:84px; border-radius:12px; background:var(--fond-doux); border:1px solid var(--ligne); display:grid; place-items:center; overflow:hidden}
.pilier-visuel img{max-width:86%; max-height:86%; mix-blend-mode:multiply}
.pilier-corps{min-width:0; flex:1}
.pilier-corps h3{font-size:18px; margin-bottom:3px}
.pilier-corps p{color:var(--encre-doux); font-size:14.5px; margin:0 0 10px}
.choix-refs{display:flex; flex-wrap:wrap; gap:8px}
.ref{font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px; cursor:pointer; background:var(--fond-doux); border:1.5px solid var(--ligne); border-radius:9px; padding:8px 12px; display:inline-flex; gap:8px; align-items:baseline; color:var(--encre)}
.ref small{font-family:Archivo,system-ui,sans-serif; font-size:12px; color:var(--encre-doux)}
.ref:hover{border-color:var(--cyan)}
.ref[aria-pressed="true"]{border-color:var(--accent); background:#e9efff; color:var(--accent); font-weight:700}
.aucune{font-size:14px; color:var(--encre-doux)}
.nbcas{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; padding:16px 18px; border:1px solid var(--ligne); border-radius:var(--r-s); background:var(--fond-doux)}
.nbcas label{font-weight:700; font-size:15.5px}
.nbcas-prix{color:var(--encre-doux); font-size:15px}
.stepper{display:inline-flex; align-items:center; border:1.5px solid var(--ligne); border-radius:999px; background:#fff; overflow:hidden}
.stepper button{font:inherit; font-size:20px; width:40px; height:40px; border:none; background:none; cursor:pointer; color:var(--encre)}
.stepper button:hover{background:var(--fond-doux)}
.stepper input{width:46px; text-align:center; border:none; font:inherit; font-weight:800; font-size:16px; -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.accessoires{display:grid; gap:10px}
.acc{display:flex; gap:16px; align-items:center; border:1px solid var(--ligne); border-radius:var(--r-s); padding:12px 16px; background:#fff; flex-wrap:wrap}
.acc.est-actif{border-color:var(--accent); background:#f7f9ff}
.acc-visuel{flex:none; width:56px; height:56px; border-radius:10px; background:var(--fond-doux); border:1px solid var(--ligne); display:grid; place-items:center; overflow:hidden}
.acc-visuel img{max-width:84%; max-height:84%; mix-blend-mode:multiply}
.acc-corps{flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:2px}
.acc-corps b{font-size:15.5px}
.acc-corps span{font-size:13.5px; color:var(--encre-doux)}
.acc-ref{margin-top:6px; font:inherit; font-size:13.5px; padding:7px 10px; border:1px solid var(--ligne); border-radius:8px; background:#fff; max-width:100%}
.recap-grille{display:grid; grid-template-columns:1fr 1.15fr; gap:22px; margin-top:10px}
@media (max-width:860px){ .recap-grille{grid-template-columns:1fr} }
.recap-carte{border:2px solid var(--cyan); border-radius:var(--r); padding:24px; background:linear-gradient(180deg,#f4fcfe,#fff); align-self:start}
.recap-lignes{display:grid; gap:4px}
.recap-l{display:flex; flex-direction:column; padding:9px 0; border-bottom:1px solid var(--ligne)}
.recap-l b{font-size:15.5px}
.recap-l span{font-size:13.5px; color:var(--encre-doux)}
.recap-l.est-acc b{font-weight:600}
.recap-vide{color:var(--encre-doux); font-size:15px; margin:0; padding:10px 0}
.recap-total{display:flex; flex-direction:column; margin-top:16px}
.recap-total span{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-doux)}
.recap-total b{font-size:clamp(32px,4vw,44px); font-weight:800; letter-spacing:-.04em; color:var(--cyan-sombre); line-height:1.1}
.recap-total small{font-size:13.5px; color:var(--encre-doux)}
.case{display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:14.5px; cursor:pointer}
.case input{margin-top:4px}
.case em{font-style:normal; color:var(--encre-doux); font-size:13.5px}
.recap-form{border:1px solid var(--ligne); border-radius:var(--r); padding:24px; background:#fff; box-shadow:var(--ombre); margin:0}
.recap-form h3{font-size:20px; margin-bottom:6px}
.champs{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .champs{grid-template-columns:1fr} }
.recap-form label{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:var(--encre-doux)}
.recap-form label.large{grid-column:1 / -1}
.recap-form label em{font-style:normal; font-weight:400}
.recap-form input,.recap-form select,.recap-form textarea{font:inherit; font-size:15.5px; color:var(--encre); padding:11px 13px; border:1.5px solid var(--ligne); border-radius:10px; background:#fff; width:100%}
.recap-form input:focus,.recap-form select:focus,.recap-form textarea:focus{outline:none; border-color:var(--cyan)}
.contact-choix{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 12px}
@media (max-width:520px){ .contact-choix{grid-template-columns:1fr} }
.radio{flex-direction:row !important; align-items:center; gap:10px !important; border:1.5px solid var(--ligne); border-radius:10px; padding:11px 13px; cursor:pointer}
.radio:has(input:checked){border-color:var(--accent); background:#f3f6ff}
.radio input{width:auto}
.radio span{display:flex; flex-direction:column}
.radio b{color:var(--encre); font-size:15px}
.radio em{font-style:normal; font-size:13px; color:var(--encre-doux)}
.creneau{margin-bottom:12px}
.recap-form textarea{resize:vertical}
.btn-bloc{width:100%; margin-top:16px}
.erreur{color:var(--alerte); font-size:14.5px; font-weight:600; margin:12px 0 0}
.mention{font-size:12.5px; color:var(--encre-doux); margin:14px 0 0}
.merci{border:2px solid var(--succes); border-radius:var(--r); padding:30px; background:#f3fbf7}
.merci h2{font-size:clamp(24px,3.4vw,34px); margin-bottom:10px}
.merci p{color:var(--encre-doux); max-width:70ch}
.merci-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.synthese-bas{position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--ligne); box-shadow:0 -10px 30px -16px rgba(10,34,48,.3)}
.synthese-bas .wrap{display:flex; align-items:center; gap:18px; padding-top:12px; padding-bottom:12px}
.sb-txt{flex:1; min-width:0; font-size:14.5px; color:var(--encre-doux); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-total{display:flex; flex-direction:column; align-items:flex-end; line-height:1.1}
.sb-total span{font-weight:800; font-size:22px; color:var(--cyan-sombre); letter-spacing:-.03em}
.sb-total small{font-size:11.5px; color:var(--encre-doux); white-space:nowrap}
@media (max-width:640px){ .sb-txt{display:none} .sb-total{align-items:flex-start; flex:1} }

/* --- rappel de telechargement (16/10) ------------------------------------------------------------ */
.rappel-telechargement{display:flex; flex-direction:column; gap:8px; align-items:flex-start; margin-top:20px; background:#fff6e5; border:2px solid #f2b84b; border-radius:var(--r-s); padding:18px 20px}
.rappel-telechargement b{font-size:18px; color:#7a4a00}
.rappel-telechargement span{font-size:15px; color:#7a5a12}
.rappel-telechargement .btn{margin-top:6px}

/* --- One Morse (brochure 2026, 16/10) ----------------------------------------------------------- */
.lien-brochure{margin-top:14px; font-size:14px; font-weight:600; color:var(--cyan-sombre); text-decoration:none}
.lien-brochure:hover{text-decoration:underline}
.om{display:grid; grid-template-columns:1.3fr 1fr; gap:30px; align-items:center; margin-top:34px; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:30px; box-shadow:var(--ombre)}
.om h3{font-size:24px; margin-bottom:10px}
.om p{color:var(--encre-doux); font-size:16px}
.om .liste{padding-left:20px; color:var(--encre-doux); font-size:15.5px; margin:0 0 16px}
.om .liste li{margin-bottom:6px}
.om .liste b{color:var(--encre)}
.om-visuels{display:grid; grid-template-columns:1fr 1.4fr; gap:14px; align-items:center}
.om-visuels img{width:100%; height:auto; mix-blend-mode:multiply}
.om-zoom{margin-top:18px; display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:center; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:18px; box-shadow:var(--ombre)}
.om-video{display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:12px; background:#eef1f3; object-fit:cover}
.om-gros-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.om-gros-plans figure{margin:0; text-align:center}
.om-gros-plans img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--ligne)}
.om-gros-plans figcaption{font-size:12.5px; color:var(--encre-doux); padding-top:8px; line-height:1.35}
.om-gros-plans figcaption b{display:block; color:var(--encre); font-size:13.5px}
@media (max-width:820px){ .om-zoom{grid-template-columns:1fr; padding:12px} }
.kits{margin-top:44px; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:30px; box-shadow:var(--ombre)}
.kits-titre{font-size:26px; margin:14px 0 8px}
.kits-liste{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0 18px; align-items:stretch}
.kit{position:relative; border:1.5px solid var(--ligne); border-radius:var(--r-s); padding:20px 18px; display:flex; flex-direction:column; background:#fff}
.kit img{display:block; max-width:100%; height:auto; max-height:120px; margin:0 auto 12px; mix-blend-mode:multiply}
.kit h4{font-size:17px; margin:0 0 4px}
.kit-prix{font-size:26px; font-weight:800; color:var(--accent); margin:0 0 10px}
.kit-prix small{font-size:13px; font-weight:600; color:var(--encre-doux)}
.kit ul{margin:0; padding-left:18px; color:var(--encre-doux); font-size:14.5px}
.kit li{margin-bottom:3px}
.kit-phare{border-color:var(--accent); box-shadow:0 10px 30px rgba(29,78,216,.12)}
.kit-badge{position:absolute; top:-11px; left:18px; background:var(--accent); color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px}
.kits-note{font-size:13px; color:var(--encre-doux); margin:10px 0 0}
@media (max-width:820px){ .kits{padding:20px} .kits-liste{grid-template-columns:1fr} }
.om-dispo{margin-top:18px; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:22px 24px; overflow-x:auto}
.om-dispo-titre{font-weight:800; font-size:16px; margin:0 0 10px}
.om-dispo table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
.om-dispo th{font-weight:700; text-align:center; padding:8px 6px; border-bottom:2px solid var(--ligne); white-space:nowrap}
.om-dispo th:first-child,.om-dispo td:first-child{text-align:left; color:var(--encre-doux)}
.om-dispo th i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:0}
.om-dispo td{text-align:center; padding:7px 6px; border-bottom:1px solid var(--ligne); color:var(--cyan-sombre); font-weight:800}
@media (max-width:820px){ .om{grid-template-columns:1fr; padding:20px} }

/* --- formation : cycle CFPI et modules intensifs (16/10) -------------------------------------- */
.cycle{display:grid; grid-template-columns:1.5fr 1fr; gap:34px; margin-top:34px; align-items:start; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:30px; box-shadow:var(--ombre)}
.badge-promo{display:inline-block; background:#e8f6fb; color:var(--cyan-sombre); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; letter-spacing:.04em}
.cycle h3{font-size:24px; margin:14px 0 10px}
.cycle-profs{color:var(--encre-doux); font-size:15.5px}
.cycle-sem{margin:14px 0 0; padding-left:20px; display:grid; gap:10px; font-size:15px; color:var(--encre-doux)}
.cycle-sem b{display:block; color:var(--encre)}
.cycle-prix{margin:16px 0 0; font-size:14.5px; font-weight:600; color:var(--cyan-sombre)}
.cycle-visuel img{display:block; width:100%; border-radius:12px; border:1px solid var(--ligne); box-shadow:var(--ombre)}
.module .module-tag{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.module p b{color:var(--encre)}
.liste-mod{margin:14px 0 0; padding-left:18px; color:var(--encre-doux); font-size:15px}
@media (max-width:880px){ .cycle{grid-template-columns:1fr} }

/* --- telephone (retours du 16/10) : plus aucun debordement horizontal, cibles tactiles de 44 px --- */
html,body{overflow-x:hidden}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .barre .wrap{height:auto; min-height:64px; padding-top:8px; padding-bottom:8px; gap:10px}
  .logo{font-size:17px; white-space:normal; line-height:1.1}
  .logo img{width:26px; height:26px; margin-right:6px; vertical-align:-6px}
  .logo small{margin:2px 0 0 1px; font-size:9px}
  .nav{gap:10px}
  .nav a.btn-sm{padding:10px 14px; font-size:13.5px; min-height:40px}
  .maq{font-size:12px; padding:7px 12px; line-height:1.35}
  .adf{font-size:12.5px; padding:8px 14px; line-height:1.4}
  .adf span{display:block; margin:2px 0 0}
  section{padding:56px 0}
  .hero{padding:44px 0 40px}
  .hero .barre-act .btn, .porte .btn, .final .btn, .barre-act .btn{width:100%}
  .btn{min-height:48px}
  .form-ligne{flex:1 1 100%; min-width:0; width:100%}
  .form-ligne > *{min-width:0; max-width:100%; box-sizing:border-box}
  .form-ligne input,.form-ligne select,.form-ligne button{flex:1 1 100%; min-height:46px}
  .recap-form input,.recap-form select,.recap-form textarea{min-height:46px; font-size:16px}
  .acc-ref{min-height:44px; font-size:15px; width:100%}
  .cal-jour,.cal-creneau{min-height:42px; padding:9px 12px}
  .ref{min-height:42px}
  footer li{margin-bottom:0}
  footer a{display:inline-block; padding:8px 0}
  .compa{gap:14px}
  .prix{padding:22px}
  .cycle{padding:20px}
  .synthese-bas .wrap{padding-top:10px; padding-bottom:10px}
}