/* ================================================================================================
   Configurateur DESS. Mobile d'abord : le trafic arrive des campagnes Meta et Instagram.
   ================================================================================================ */

:root{
  --primaire:#00A9CE; --primaire-sombre:#0089a8; --primaire-clair:#8be2e5;
  --bleu-profond:#0b4f68;   /* le « bleu foncé » demandé le 24/09 : lisible en blanc dessus */
  --accent:#e89c00; --texte:#16232b; --texte-doux:#5a6b76;
  --fond:#ffffff; --fond-doux:#f2f7fa; --bordure:#dbe6ec;
  --succes:#12855f; --alerte:#d5432f;
  --r:14px; --r-s:10px;
  --ombre:0 1px 2px rgba(16,35,43,.05), 0 10px 30px -12px rgba(16,35,43,.18);
  --ombre-forte:0 2px 6px rgba(16,35,43,.08), 0 18px 48px -18px rgba(16,35,43,.28);
  --transition:.22s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* sinon display:flex ecrase l'attribut hidden */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--fond-doux); color:var(--texte);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:800px; margin:0 auto; padding:0 20px}
.saut-contenu{position:absolute; left:-9999px}
.saut-contenu:focus{left:12px; top:12px; z-index:20; background:#fff; padding:10px 14px; border-radius:8px}

/* --- en-tête ------------------------------------------------------------------------------------ */
.topbar{background:var(--fond); border-bottom:1px solid var(--bordure); position:sticky; top:0; z-index:10}
.topbar-in{display:flex; align-items:center; justify-content:space-between; min-height:62px; gap:14px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-mark{width:30px; height:30px; flex:none; color:var(--primaire)}
.brand-mark svg,.brand-mark img{width:100%; height:100%; display:block}
.brand-texte{min-width:0; display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-size:21px; font-weight:800; letter-spacing:.02em; color:var(--primaire)}
.brand-baseline{font-size:11.5px; color:var(--texte-doux); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:560px){ .brand-baseline{display:none} }

.topbar-droite{display:flex; align-items:center; gap:14px; flex:none}
.topbar-step{font-size:12.5px; color:var(--texte-doux); font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:430px){ .topbar-step{display:none} }

/* compteur vivant : la liste se construit sous les yeux du praticien, c'est ce qui le fait aller au bout */
.live{
  display:flex; align-items:center; gap:8px; background:#eaf7fb; border:1px solid #cae9f3;
  border-radius:999px; padding:5px 13px 5px 10px; animation:apparait .3s ease both;
}
.live-nb{
  font-size:18px; font-weight:800; color:var(--primaire-sombre); font-variant-numeric:tabular-nums;
  transition:transform .2s ease;
}
.live-nb.pulse{transform:scale(1.22)}
.live-txt{font-size:9.5px; line-height:1.15; text-transform:uppercase; letter-spacing:.05em; color:var(--primaire-sombre); font-weight:700}

.progress{height:3px; background:var(--bordure)}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--primaire),var(--primaire-clair)); transition:width .45s cubic-bezier(.4,0,.2,1)}

/* --- écrans -------------------------------------------------------------------------------------- */
main{flex:1 0 auto; padding:30px 20px 60px}
.screen{animation:entre .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes entre{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes apparait{from{opacity:0} to{opacity:1}}
@keyframes monte{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.decale > *{animation:monte .3s cubic-bezier(.2,.7,.3,1) both}
.decale > *:nth-child(1){animation-delay:.02s}
.decale > *:nth-child(2){animation-delay:.06s}
.decale > *:nth-child(3){animation-delay:.10s}
.decale > *:nth-child(4){animation-delay:.14s}
.decale > *:nth-child(5){animation-delay:.18s}
.decale > *:nth-child(6){animation-delay:.22s}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

.surtitre{text-transform:uppercase; letter-spacing:.1em; font-size:11.5px; font-weight:800; color:var(--primaire); margin:0 0 10px}
h1{font-size:31px; line-height:1.15; margin:0 0 14px; letter-spacing:-.02em; font-weight:800}
h2{font-size:21px; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em; font-weight:750}
h3{font-size:17px; margin:0 0 8px; font-weight:700}
@media (max-width:520px){ h1{font-size:26px} }
.sous{color:var(--texte-doux); margin:0 0 26px; font-size:16.5px}
.aide{color:var(--texte-doux); font-size:14.5px; margin:-6px 0 22px}

.card{background:var(--fond); border:1px solid var(--bordure); border-radius:var(--r); box-shadow:var(--ombre); padding:24px}
@media (max-width:520px){ .card{padding:18px} }
.card + .card{margin-top:16px}

/* --- accueil ------------------------------------------------------------------------------------- */
.preuves{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 22px}
.preuve{background:var(--fond); border:1px solid var(--bordure); border-radius:var(--r-s); padding:14px 10px; text-align:center}
.preuve b{display:block; font-size:23px; font-weight:800; color:var(--primaire); letter-spacing:-.02em}
.preuve span{display:block; font-size:11.5px; color:var(--texte-doux); margin-top:3px; line-height:1.3}
@media (max-width:430px){ .preuve b{font-size:19px} .preuve{padding:11px 6px} }

.liste-check{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:11px}
.liste-check li{display:flex; gap:11px; align-items:flex-start; color:var(--texte-doux); font-size:15px}
.liste-check li::before{
  content:""; flex:none; margin-top:3px; width:17px; height:17px; border-radius:50%;
  background:var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --- boutons -------------------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
  font:inherit; font-weight:700; cursor:pointer; border-radius:var(--r-s); border:1.5px solid transparent;
  padding:15px 24px; min-height:52px; transition:background var(--transition), border-color var(--transition),
  transform .08s ease, box-shadow var(--transition); text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primaire{background:var(--primaire); color:#fff; box-shadow:0 6px 18px -8px rgba(0,169,206,.9)}
.btn-primaire:hover{background:var(--primaire-sombre); box-shadow:0 10px 26px -10px rgba(0,169,206,.95)}
.btn-primaire[disabled]{background:#b9c9d1; box-shadow:none; cursor:not-allowed}
.btn-secondaire{background:var(--fond); color:var(--texte); border-color:var(--bordure)}
.btn-secondaire:hover{border-color:var(--primaire); color:var(--primaire-sombre)}
.btn-fantome{background:none; border:none; color:var(--texte-doux); padding:12px 6px; cursor:pointer; font:inherit; font-size:14.5px}
.btn-fantome:hover{color:var(--primaire-sombre); text-decoration:underline}
.btn-bloc{width:100%}
.actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:24px}
.actions .btn{flex:1 1 210px}
.actions-pile{display:grid; gap:11px; margin-top:24px}
.nav-bas{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px}

/* --- choix ---------------------------------------------------------------------------------------- */
.choix{display:grid; gap:12px}
.opt{
  display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:var(--fond); border:1.5px solid var(--bordure); border-radius:var(--r); padding:17px 18px;
  transition:border-color var(--transition), background var(--transition), box-shadow var(--transition), transform .1s ease;
}
.opt:hover{border-color:var(--primaire); box-shadow:var(--ombre); transform:translateY(-1px)}
.opt[aria-pressed="true"]{border-color:var(--primaire); background:#f2fbfd; box-shadow:0 0 0 1px var(--primaire) inset}
.opt-icone{
  flex:none; width:42px; height:42px; border-radius:11px; background:var(--fond-doux);
  display:flex; align-items:center; justify-content:center; color:var(--primaire); transition:background var(--transition);
}
.opt[aria-pressed="true"] .opt-icone{background:var(--primaire); color:#fff}
.opt-icone svg{width:22px; height:22px; display:block}
.opt-txt{min-width:0; flex:1}
.opt-lab{font-weight:700; font-size:16.5px; display:block}
.opt-desc{color:var(--texte-doux); font-size:14px; margin-top:2px; display:block}
.opt-coche{
  flex:none; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--bordure);
  align-self:center; transition:all var(--transition);
}
.opt[aria-pressed="true"] .opt-coche{
  background:var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--primaire);
}

/* --- sélection des connexions --------------------------------------------------------------------- */
.recherche{position:relative; margin-bottom:16px}
.recherche input[type=search]{padding-left:48px}
.recherche::before{
  content:""; position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b76' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
}
.groupe-marque{margin-bottom:20px}
.groupe-marque h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--texte-doux);
  margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid var(--bordure);
}
.puces{display:grid; gap:8px}
.puce{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:var(--fond); border:1.5px solid var(--bordure); border-radius:var(--r-s); padding:11px 14px;
  transition:border-color var(--transition), background var(--transition);
}
.puce:hover{border-color:var(--primaire)}
.puce[aria-pressed="true"]{border-color:var(--primaire); background:#f2fbfd}
.puce-coche{flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--bordure); transition:all var(--transition)}
.puce[aria-pressed="true"] .puce-coche{
  background:var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--primaire);
}
.puce-nom{font-weight:650; font-size:15px}
.puce-connexion{color:var(--texte-doux); font-size:13px; margin-left:auto; text-align:right; white-space:nowrap}
@media (max-width:480px){ .puce-connexion{display:none} }
.vide-recherche{color:var(--texte-doux); text-align:center; padding:26px 10px; font-size:15px}

.selection-resume{
  position:sticky; bottom:0; background:var(--fond); border-top:1px solid var(--bordure);
  margin:16px -24px -24px; padding:14px 24px; border-radius:0 0 var(--r) var(--r);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
@media (max-width:520px){ .selection-resume{margin:16px -18px -18px; padding:12px 18px} }
.selection-resume span{font-size:14px; color:var(--texte-doux)}
.selection-resume b{color:var(--texte)}

/* --- champs --------------------------------------------------------------------------------------- */
.champs{display:grid; gap:16px}
@media (min-width:640px){ .champs{grid-template-columns:1fr 1fr} .champ-large{grid-column:1 / -1} }
label{display:block; font-size:14px; font-weight:650; margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=search],select,textarea{
  width:100%; font:inherit; color:var(--texte); background:var(--fond);
  border:1.5px solid var(--bordure); border-radius:var(--r-s); padding:13px 15px; min-height:52px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primaire); box-shadow:0 0 0 3px rgba(0,169,206,.16)}
input[aria-invalid="true"]{border-color:var(--alerte); background:#fffafa}
.champ-aide{font-size:13px; color:var(--texte-doux); margin-top:6px}
.champ-erreur{font-size:13px; color:var(--alerte); margin-top:6px; display:none; font-weight:600}
input[aria-invalid="true"] ~ .champ-erreur{display:block}

.suggestions{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.suggestion{
  font:inherit; font-size:13.5px; cursor:pointer; background:var(--fond-doux); color:var(--texte-doux);
  border:1px solid var(--bordure); border-radius:999px; padding:7px 14px; transition:all var(--transition);
}
.suggestion:hover{border-color:var(--primaire); color:var(--primaire-sombre); background:#f2fbfd}

/* --- résultats ------------------------------------------------------------------------------------- */
.entete-resultat{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px}
.bulle{
  flex:none; text-align:center; background:linear-gradient(135deg,var(--primaire),#00c3e8); color:#fff;
  border-radius:16px; padding:14px 18px; min-width:104px; box-shadow:0 10px 26px -12px rgba(0,169,206,.9);
}
.bulle strong{display:block; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1}
.bulle span{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; opacity:.95; display:block; margin-top:4px}
@media (max-width:480px){
  .entete-resultat{flex-direction:column-reverse; align-items:stretch; gap:12px}
  .bulle{display:flex; align-items:baseline; justify-content:center; gap:9px; padding:10px 16px}
  .bulle strong{font-size:22px} .bulle span{margin:0}
}

.synthese{background:var(--fond); border:1px solid var(--bordure); border-radius:var(--r); box-shadow:var(--ombre); padding:4px 18px; margin-bottom:16px}
.syn-l{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--bordure); font-size:15px}
.syn-l:first-child{border-top:none}
.syn-c{color:var(--texte-doux); flex:none}
.syn-v{font-weight:650; text-align:right}
.syn-v em{font-style:normal; font-weight:400; color:var(--texte-doux); font-size:13.5px; display:block}

.avert{
  background:#fff8ea; border:1px solid #f2dcb0; border-left:4px solid var(--accent);
  border-radius:var(--r-s); padding:15px 17px; font-size:14.5px; color:#6b4d12; margin:0 0 22px; line-height:1.5;
}

/* --- retour visible en haut d'ecran (retour Thomas du 29/09) --------------------------------- */
.retour-haut{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 16px; padding:8px 14px 8px 10px;
  background:var(--fond); border:1px solid var(--bordure); border-radius:999px;
  color:var(--texte-doux); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color var(--transition), color var(--transition);
}
.retour-haut:hover{border-color:var(--primaire); color:var(--primaire-sombre)}
.retour-haut .rh-ic{width:17px; height:17px; transform:rotate(90deg); flex:none}
@media print{ .retour-haut{display:none !important} }

/* --- rebond implant : on a l'equivalent de la marque posee ----------------------------------- */
.rebond{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid #cfe7d9; border-left:4px solid var(--succes); background:#f2fbf7;
  border-radius:var(--r); padding:15px 18px; margin-bottom:14px;
}
.rebond-txt{flex:1 1 320px; font-size:14.5px; color:#1d4c3c}
.rebond-txt b{display:block; font-size:15.5px; color:var(--succes); margin-bottom:2px}
.rebond-lien{
  color:#fff; background:var(--succes); text-decoration:none; font-weight:700; font-size:14.5px;
  padding:10px 17px; border-radius:999px; white-space:nowrap;
}
.rebond-lien:hover{background:#0c6b4c}
@media print{ .rebond{display:none !important} }

/* --- resultats groupes par marque d'implant (retour Thomas du 24/09) ------------------------- */
.marque{
  border:1px solid var(--bordure); border-radius:var(--r); background:var(--fond);
  margin-bottom:18px; overflow:hidden; box-shadow:var(--ombre);
}
.marque > summary{
  cursor:pointer; padding:16px 19px; display:flex; align-items:baseline; gap:11px;
  list-style:none; background:var(--bleu-profond); color:#fff;
}
.marque > summary::-webkit-details-marker{display:none}
.marque > summary:hover{filter:brightness(1.12)}
.m-titre{font-weight:800; font-size:17px; letter-spacing:-0.2px}
.m-gamme{font-size:13.5px; color:#bfe4f0; font-weight:500}
.m-compte{
  margin-left:auto; font-size:12px; font-weight:750; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  border-radius:999px; padding:4px 11px; white-space:nowrap; align-self:center;
}
.marque > summary .g-chevron{color:#fff; align-self:center}
.marque[open] .g-chevron{transform:rotate(180deg)}
.m-corps{padding:6px 0 4px}
.m-role{padding:10px 19px 4px; border-top:1px solid var(--bordure)}
.m-role:first-child{border-top:none}
.m-role-tete{display:flex; align-items:center; gap:11px; margin-bottom:2px}
.m-role-tete h3{font-size:14.5px; font-weight:750; margin:0; color:var(--texte)}
.m-role-tete .g-compte{margin-left:auto}
.m-role .g-note{padding:0; margin:0 0 9px; font-size:13.5px}

@media (max-width:600px){
  .marque > summary{flex-wrap:wrap; gap:4px 9px}
  .m-compte{margin-left:0; order:3}
  .marque > summary .g-chevron{order:4; margin-left:auto}
  .m-role{padding-left:13px; padding-right:13px}
}

.groupe{border:1px solid var(--bordure); border-radius:var(--r); background:var(--fond); margin-bottom:13px; overflow:hidden; box-shadow:var(--ombre)}
.groupe > summary{cursor:pointer; padding:17px 19px; display:flex; align-items:center; gap:13px; list-style:none}
.groupe > summary::-webkit-details-marker{display:none}
.groupe > summary:hover{background:var(--fond-doux)}
.g-titre{font-weight:750; font-size:16.5px}
.g-compte{
  margin-left:auto; font-size:12px; font-weight:750; color:var(--primaire-sombre);
  background:#eaf7fb; border:1px solid #cae9f3; border-radius:999px; padding:4px 11px; white-space:nowrap;
}
.g-chevron{flex:none; width:19px; height:19px; color:var(--primaire); transition:transform var(--transition)}
.groupe[open] .g-chevron{transform:rotate(180deg)}
.g-note{padding:0 19px 12px; margin:-6px 0 0; color:var(--texte-doux); font-size:14px}
.g-corps{padding:0 19px 10px}

.fam{display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--bordure); padding:17px 0}
.fam:first-child{border-top:none}
.fam-visuel{
  flex:none; width:82px; height:82px; border-radius:11px; background:var(--fond-doux);
  border:1px solid var(--bordure); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.vignette{max-width:88%; max-height:88%; object-fit:contain; display:block; mix-blend-mode:multiply}
.vignette-vide{width:42px; height:42px; fill:#bdd0da; display:block}
.fam-corps{min-width:0; flex:1}
.fam-tete{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.fam-tete h4{margin:0; font-size:16px; font-weight:700}
.fam-desc{color:var(--texte-doux); font-size:13.5px; margin:0 0 10px; line-height:1.45}
.badge{
  font-size:11px; font-weight:750; letter-spacing:.03em; background:var(--fond-doux); color:var(--texte-doux);
  border:1px solid var(--bordure); border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.refs{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.refs li{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px;
  background:var(--fond-doux); border:1px solid var(--bordure); border-radius:7px; padding:5px 9px;
  display:inline-flex; align-items:center; gap:6px;
}
.ref-plat{font-family:inherit; font-size:10px; font-weight:800; color:var(--primaire-sombre); letter-spacing:.03em}
.ref-us{color:var(--accent); font-weight:800}
.refs-plus{
  font:inherit; font-size:12.5px; cursor:pointer; background:none; border:1px dashed var(--bordure);
  border-radius:7px; padding:5px 11px; color:var(--primaire-sombre); font-weight:650;
}
.refs-plus:hover{border-color:var(--primaire); background:#f2fbfd}
@media (max-width:430px){ .fam{gap:12px} .fam-visuel{width:62px; height:62px} }

/* --- colonnes par plateforme, dans l'ordre et les couleurs du catalogue (Thomas, 06/10) ------- */
.plat-grille{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:10px}
.plat-col{min-width:0}
.plat-tete{display:flex; flex-direction:column; gap:3px; margin-bottom:7px}
.plat-nom{font-weight:800; font-size:13px; letter-spacing:.02em}
.plat-barre{display:block; height:4px; border-radius:2px; width:34px}
.refs-col{flex-direction:column; align-items:stretch}
.refs-col li{flex-wrap:wrap; column-gap:7px}
.ref-var{font-family:inherit; font-size:10.5px; color:var(--texte-doux); font-weight:500}
.ref-vide{color:var(--texte-doux); background:none !important; border-color:transparent !important; padding-left:0 !important}
.plat-sans{margin-top:10px}
.plat-sans-titre{display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--texte-doux); margin-bottom:6px}
.m-plats{display:inline-flex; gap:9px; flex-wrap:wrap; margin-left:4px}
.m-plat{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#fff}
.m-plat i{display:inline-block; width:14px; height:5px; border-radius:2px}
.puce-couleur{display:inline-block; width:22px; height:6px; border-radius:3px; margin-left:2px}
@media (max-width:640px){ .plat-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:380px){ .plat-grille{grid-template-columns:1fr} }

/* --- bloc expert (l'action que l'on met en avant) --------------------------------------------------- */
.expert{
  background:linear-gradient(135deg,#083b49,#0d5b6e); color:#fff; border-radius:var(--r); padding:26px;
  margin-top:24px; box-shadow:var(--ombre-forte);
}
.expert h2{color:#fff; margin-bottom:8px}
.expert p{color:#c9e7f0; margin:0 0 18px; font-size:15.5px}
.expert-apports{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:10px}
.expert-apports li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:#e6f5fa}
.expert-apports li::before{
  content:""; flex:none; margin-top:3px; width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,.16)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.expert .btn-primaire{background:#fff; color:#083b49; box-shadow:none}
.expert .btn-primaire:hover{background:#e6f5fa}
.expert .btn-secondaire{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.expert .btn-secondaire:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.08)}

.secondaires{display:flex; flex-wrap:wrap; gap:11px; margin-top:16px}
.secondaires .btn{flex:1 1 200px}

/* --- calendrier -------------------------------------------------------------------------------------- */
.cal-note{background:#eef7fa; border:1px solid #cfe9f1; border-left:4px solid var(--primaire); border-radius:var(--r-s); padding:15px 17px; font-size:14.5px; color:#14495a; margin:0 0 18px; line-height:1.5}
.cal-expert{display:flex; align-items:center; gap:14px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--bordure)}
.cal-avatar{
  width:52px; height:52px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--primaire),#00c3e8);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.cal-avatar svg{width:26px; height:26px}
.cal-expert-nom{font-weight:750}
.cal-expert-role{color:var(--texte-doux); font-size:14px}
.cal-tete{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:15px; flex-wrap:wrap}
.cal-mois{font-weight:750; font-size:17px}
.cal-meta{font-size:13px; color:var(--texte-doux)}
.cal-jours{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:16px}
.cal-jour{text-align:center; border:1.5px solid var(--bordure); border-radius:var(--r-s); padding:9px 4px; background:var(--fond); color:var(--texte-doux); cursor:default}
.cal-jour span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em}
.cal-jour b{display:block; font-size:18px; color:var(--texte); margin-top:2px}
.cal-jour.est-actif{border-color:var(--primaire); background:#f2fbfd}
.cal-jour.est-actif b{color:var(--primaire-sombre)}
.cal-creneaux{display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:8px}
.cal-creneau{text-align:center; border:1.5px solid var(--bordure); border-radius:9px; padding:11px 6px; font-weight:650; color:var(--primaire-sombre); background:var(--fond)}
.cal-creneau.est-actif{background:var(--primaire); color:#fff; border-color:var(--primaire)}
.cal-legende{margin:16px 0 0; text-align:center; font-size:11.5px; color:var(--texte-doux); text-transform:uppercase; letter-spacing:.08em}
.cal-iframe{width:100%; min-height:660px; border:none; border-radius:var(--r-s); display:block}

/* --- confirmation --------------------------------------------------------------------------------------- */
.ok-mark{
  width:62px; height:62px; border-radius:50%; background:var(--succes); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  animation:pop .45s cubic-bezier(.2,1.4,.4,1) both;
}
.ok-mark svg{width:30px; height:30px}
@keyframes pop{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}
.centre{text-align:center}
.centre .sous{margin-left:auto; margin-right:auto; max-width:52ch}
.etapes-suite{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; text-align:left}
.etapes-suite li{display:flex; gap:14px; align-items:flex-start}
.etape-num{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--fond-doux); color:var(--primaire-sombre);
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; border:1px solid var(--bordure);
}
.etape-txt b{display:block; font-size:15px}
.etape-txt span{color:var(--texte-doux); font-size:14px}

/* --- mode test ------------------------------------------------------------------------------------------- */
.bandeau-test{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between;
  background:#fdf6e3; border:1px dashed #e0c072; border-radius:var(--r-s); padding:10px 14px;
  margin:0 0 20px; font-size:13px; color:#6b5416;
}
.bandeau-test code{background:#f6ead0; padding:1px 5px; border-radius:4px; font-size:12px}
.btn-mini{
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  background:#fff; color:#6b5416; border:1px solid #e0c072; border-radius:7px; padding:6px 11px; margin-left:6px;
}
.btn-mini:hover{background:#fff9ec; border-color:#c9a24d}

/* --- chargement ------------------------------------------------------------------------------------------- */
.chargement{display:flex; align-items:center; gap:12px; color:var(--texte-doux); padding:40px 0; justify-content:center}
.spin{width:22px; height:22px; border:2.5px solid var(--bordure); border-top-color:var(--primaire); border-radius:50%; animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* --- pied ---------------------------------------------------------------------------------------------------- */
.foot{border-top:1px solid var(--bordure); background:var(--fond); padding:20px 0; margin-top:auto}
.foot-ligne{margin:0 0 6px; font-size:12.5px; color:var(--texte-doux)}
.foot-contact a{color:var(--primaire-sombre)}

/* --- impression : on ne l'encourage pas, mais elle doit rester lisible ------------------------------------------ */
@media print{
  .topbar,.foot,.actions,.actions-pile,.secondaires,.expert,.bandeau-test,.nav-bas,.bulle,.avert{display:none !important}
  body{background:#fff}
  .card,.groupe,.marque,.synthese{border:1px solid #ccc; box-shadow:none; page-break-inside:avoid}
  .fam{page-break-inside:avoid}
  main{padding:0}
}

/* --- grille des fabricants -------------------------------------------------------------------- */
.fabricants{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (max-width:520px){ .fabricants{grid-template-columns:1fr} }
.fab{
  display:flex; align-items:center; gap:10px; text-align:left; font:inherit; cursor:pointer; width:100%;
  background:var(--fond); border:1.5px solid var(--bordure); border-radius:var(--r-s); padding:13px 15px;
  transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.fab:hover{border-color:var(--primaire); box-shadow:var(--ombre)}
.fab[aria-pressed="true"]{border-color:var(--primaire); background:#f2fbfd}
.fab.est-ouvert{
  grid-column:1 / -1;                      /* la tuile ouverte prend la largeur du tiroir */
  border-color:var(--primaire); border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.fab-nom{font-weight:700; font-size:15.5px; flex:1; min-width:0}
.fab-meta{font-size:12px; color:var(--texte-doux); white-space:nowrap}
.fab[aria-pressed="true"] .fab-meta{color:var(--primaire-sombre); font-weight:650}
.fab-chevron{flex:none; width:17px; height:17px; color:var(--primaire); transition:transform var(--transition)}
.fab.est-ouvert .fab-chevron{transform:rotate(180deg)}
.fab-coche{flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--bordure); transition:all var(--transition)}
.fab[aria-pressed="true"] .fab-coche{
  background:var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--primaire);
}
.fab-tiroir{
  grid-column:1 / -1; display:grid; gap:8px; padding:12px 14px; margin-top:-10px;
  background:var(--fond-doux); border:1.5px solid var(--primaire); border-top:none;
  border-radius:0 0 var(--r-s) var(--r-s); animation:monte .2s ease both;
}
@media (min-width:521px){ .fab-tiroir{margin-top:-10px} }

/* --- creneaux cliquables ------------------------------------------------------------------------ */
.cal-jour, .cal-creneau{cursor:pointer; transition:all var(--transition)}
.cal-jour:hover, .cal-creneau:hover{border-color:var(--primaire); background:#f2fbfd}
.cal-creneau.est-actif:hover{background:var(--primaire-sombre)}
.cal-choix{
  margin-top:16px; background:#eefaf4; border:1px solid #b7e4cf; border-left:4px solid var(--succes);
  border-radius:var(--r-s); padding:14px 16px; font-size:14.5px; color:#0e5a41;
}
.cal-choix b{color:#0b4632}
.argu{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:12px}
.argu li{display:flex; gap:13px; align-items:flex-start}
.argu-num{
  flex:none; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.argu-txt b{display:block; font-size:15.5px; color:#fff}
.argu-txt span{color:#c9e7f0; font-size:14px}

/* --- case a cocher d'echappatoire ---------------------------------------------------------------- */
.case{
  display:flex; align-items:flex-start; gap:10px; margin-top:10px; cursor:pointer;
  font-size:14px; font-weight:400; color:var(--texte-doux);
}
.case input{width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--primaire); cursor:pointer}
.case:hover span{color:var(--texte)}
/* Thomas, 24/09 : « mets-le en bleu, comme ca ca attire le regard, qu'il le voit,
   qu'il le clique facilement, qu'il ne cherche pas pendant 10 ans ». */
.case span{color:var(--bleu-profond); font-weight:650}
.case:hover span{color:var(--bleu-profond); text-decoration:underline}
.champ-neutralise input[type=text]{background:var(--fond-doux); color:var(--texte-doux); cursor:not-allowed}
.champ-neutralise label{color:var(--texte-doux)}

/* --- telephone (retours du 16/10) : references compactes, cibles tactiles --------------------- */
@media (max-width:560px){
  .refs-col li{display:flex; flex-wrap:wrap; column-gap:6px; row-gap:0; padding:6px 8px; font-size:12px; min-width:0}
  .refs-col .ref-var{font-size:10px; white-space:normal; overflow-wrap:anywhere}
  .plat-col{min-width:0}
  .plat-grille{gap:8px 10px}
  .fam{padding:14px 0}
  .fam-visuel{width:54px; height:54px}
  .fam-desc{font-size:12.5px; margin-bottom:8px}
  .foot-contact a{display:inline-block; padding:6px 0}
  .bandeau-test button{min-height:40px}
}

/* --- ecran des implants (16/10) : noms du catalogue, icone de la connexion ----------------------- */
/* Remplissage colonne par colonne (Thomas, 16/10) : on lit chaque colonne de haut en bas, de A a Z */
.implants-liste{column-count:2; column-gap:10px}
.implants-liste .impl{break-inside:avoid; margin-bottom:10px}
@media (max-width:620px){ .implants-liste{column-count:1} }
.impl{display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:var(--fond); border:1.5px solid var(--bordure); border-radius:var(--r-s); padding:10px 14px; min-height:62px;
  transition:border-color var(--transition), background var(--transition)}
.impl:hover{border-color:var(--primaire)}
.impl[aria-pressed="true"]{border-color:var(--primaire); background:#f2fbfd}
.impl-ico{flex:none; width:40px; height:40px; object-fit:contain}
.impl-txt{flex:1; min-width:0; display:flex; flex-direction:column}
.impl-nom{font-weight:700; font-size:15px; line-height:1.25}
.impl-cx{font-size:11.5px; color:var(--texte-doux); text-transform:uppercase; letter-spacing:.04em; margin-top:2px}
.impl[aria-pressed="true"] .fab-coche{background:var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; border-color:var(--primaire)}
/* revetement des vis */
.vis{display:inline-flex; align-items:center; gap:4px; font-family:Inter,system-ui,sans-serif; font-size:10.5px; font-weight:700; color:var(--texte); background:#fff; border:1px solid var(--bordure); border-radius:999px; padding:1px 7px}
.vis i{display:inline-block; width:9px; height:9px; border-radius:50%}
/* logo : noir a points bleus, by Unblock-ed tout petit dessous (Thomas, 16/10) */
.brand-name{color:#0F172A !important; letter-spacing:-.01em}
.brand-name .pt{color:var(--primaire)}
.brand-baseline{font-size:10px !important}

.rappel-pdf{display:flex; flex-direction:column; gap:8px; align-items:center; margin-top:22px; background:#fff6e5; border:2px solid #f2b84b; border-radius:var(--r-s); padding:18px 20px}
.rappel-pdf b{font-size:18px; color:#7a4a00}
.rappel-pdf span{font-size:14.5px; color:#7a5a12}
.rappel-pdf .btn{width:100%; max-width:360px}
/* nouvelles references du catalogue 2026/2 (23/10) */
.ref-new{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#e8f7ee;color:#147a43;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:1px}