:root{
  --marine:#14233F; --marine-2:#1E3358; --dore:#C9A961; --dore-clair:#E3CE9B; --dore-pale:#F6EFDD;
  --creme:#FAF7F1; --blanc:#fff; --gris:#6B7280; --gris-clair:#E8E4DA; --encre:#2A2A2A;
  --vert:#0E5A34; --vert-clair:#CDE7D8; --rouge:#8C1F1F; --rouge-clair:#F6D9D9;
  --dore-fonce:#6B5518;
  --r:14px; --ombre:0 1px 2px rgba(20,35,63,.05),0 10px 32px rgba(20,35,63,.07);
}
*{box-sizing:border-box}
/* mêmes polices que cabinet-dona.fr : Marcellus pour les titres, Mulish pour le texte,
   Cormorant Garamond en italique pour les accents */
body{margin:0;background:var(--creme);color:var(--encre);
  font:16px/1.65 "Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--marine);font-family:"Marcellus",Georgia,"Times New Roman",serif;
  font-weight:400;letter-spacing:0;line-height:1.15}
h1{font-size:clamp(30px,4.4vw,46px)} h2{font-size:clamp(22px,2.7vw,29px)} h3{font-size:19px}
.italique{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500}
p{margin:0 0 .85em}
a{color:var(--marine-2)}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.muted{color:var(--gris)} .small{font-size:14px} .tiny{font-size:12.5px}
.center{text-align:center}

/* ---------- en-tête ---------- */
header.site{background:var(--marine);color:#EDE7DB;position:sticky;top:0;z-index:30;
  box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.site .in{max-width:1140px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap}
header.site .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
header.site .logo img{height:44px;width:auto;display:block}
header.site .logo span{font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(237,231,219,.55);border-left:1px solid rgba(237,231,219,.24);padding-left:12px;line-height:1.4}
header.site a{color:#EDE7DB;text-decoration:none;font-size:14.5px}
header.site .tel{border:1px solid rgba(237,231,219,.28);padding:7px 15px;border-radius:99px}
header.site .tel:hover{background:rgba(255,255,255,.08)}

/* ---------- héros ---------- */
.hero{padding-top:52px;padding-bottom:30px}
.hero .surtitre{color:var(--dore);font-size:11.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px}
.hero p.lede{font-size:18px;color:var(--gris);max-width:62ch}
.reperes{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--gris-clair)}
.repere b{display:block;font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:23px;color:var(--marine)}
.repere span{font-size:13px;color:var(--gris)}

/* ---------- cartes formation ---------- */
/* Grille de cartes. Chaque carte reprend les lignes de la grille parente (subgrid),
   si bien que titres, pastilles, prix et résumés s'alignent d'une carte à l'autre. */
.cartes{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));margin:8px 0 40px}
.carte-f{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--ombre);transition:transform .15s,box-shadow .15s;
  display:grid;grid-template-rows:subgrid;grid-row:span 9;row-gap:0}
.carte-f:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(20,35,63,.06),0 18px 44px rgba(20,35,63,.1)}
.carte-f>*{padding-left:24px;padding-right:24px}
.bandeau{height:5px;padding:0!important;background:linear-gradient(90deg,var(--dore),var(--dore-clair))}
.carte-f h2{font-size:21px;margin:20px 0 10px}
.carte-f .eleve{font-size:12.5px;color:#7A6428;font-weight:700}
.carte-f .eleve:empty,.carte-f .prerequis:empty{margin:0}
.carte-f .prerequis{font-size:12.5px;color:var(--gris);margin-top:6px}
.carte-f .resume{margin:8px 0 0}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;
  background:#F0E2BC;color:var(--dore-fonce);border:1px solid #DFC98E}
.chip.gris{background:#E8E5DC;color:#3F4451;border-color:#D5D1C5}
.prix-bloc{display:flex;align-items:baseline;gap:9px;margin:14px 0 4px}
.prix{font-family:"Marcellus",Georgia,serif;font-size:29px;font-weight:400;color:var(--marine);letter-spacing:0}
.prix-note{font-size:12.5px;color:var(--gris);white-space:nowrap}
.resume{font-size:14.5px;color:#414141}
.carte-f .dates{border-top:1px solid var(--gris-clair);margin-top:18px;padding:16px 24px 20px;background:#FCFBF8;
  align-self:stretch}
.dates h4{font-family:"Mulish",sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin-bottom:9px}
.date-l{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px dashed #E8E4DA;font-size:14.5px}
.date-l:last-of-type{border-bottom:0}
.date-l .j{font-weight:600;color:var(--marine);text-transform:capitalize}
.date-l .p{font-size:12.5px;color:var(--gris)}
.pastille{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap;
  background:var(--vert-clair);color:var(--vert);border:1px solid #A8CDBA}
.pastille.derniere{background:var(--rouge-clair);color:var(--rouge);border-color:#DFAFAF}
.actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:9px;
  border:1px solid transparent;background:var(--marine);color:#fff;font-size:14.5px;font-weight:600;
  cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.25;transition:background .15s}
.btn:hover{background:var(--marine-2)}
.btn.or{background:var(--dore);color:var(--marine)} .btn.or:hover{background:var(--dore-clair)}
.btn.ligne{background:#fff;color:var(--marine);border-color:var(--gris-clair)} .btn.ligne:hover{background:#F6F5F1}
.btn.mini{padding:6px 13px;font-size:13px}
.btn.plein{width:100%}

/* ---------- page détail ---------- */
.fil{font-size:13.5px;color:var(--gris);padding:18px 0 0}
.fil a{color:var(--gris);text-decoration:none} .fil a:hover{color:var(--marine)}
.detail{display:grid;grid-template-columns:1fr 384px;gap:32px;align-items:start;padding:14px 0 60px}
.contenu section{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--r);
  padding:24px 26px;margin-bottom:18px;box-shadow:var(--ombre)}
.contenu section h2{font-size:20px;padding-bottom:10px;border-bottom:1px solid var(--gris-clair);margin-bottom:14px}
.contenu ul{margin:0;padding-left:20px} .contenu li{margin-bottom:7px}
.prog-bloc{margin-bottom:16px}
.prog-bloc h4{font-size:14.5px;color:var(--marine);margin-bottom:6px;padding-left:12px;border-left:3px solid var(--dore)}
.prog-bloc ul{padding-left:32px} .prog-bloc li{font-size:14.5px;color:#414141;margin-bottom:4px}
.fiche{width:100%;border-collapse:collapse;font-size:14.5px}
.fiche td{padding:8px 0;border-bottom:1px solid #F1EFEA;vertical-align:top}
.fiche td:first-child{color:var(--gris);width:42%}
.fiche tr:last-child td{border-bottom:0}

/* ---------- panneau dates collant ---------- */
.panneau{position:sticky;top:92px}
.panneau .bloc{background:#fff;border:1px solid var(--gris-clair);border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden}
.panneau .haut{background:var(--marine);color:#fff;padding:20px 22px}
.panneau .haut .prix{color:#fff;font-size:34px}
.panneau .haut .prix-note{color:rgba(237,231,219,.7)}
.panneau .haut .eleve{margin-top:8px;font-size:13px;color:var(--dore-clair)}
.panneau .compte{padding:11px 22px;background:#FCFBF8;border-bottom:1px solid var(--gris-clair);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.panneau .liste{max-height:min(56vh,440px);overflow:auto;padding:4px 22px}
.panneau .liste::-webkit-scrollbar{width:6px}
.panneau .liste::-webkit-scrollbar-thumb{background:var(--gris-clair);border-radius:9px}
.date-p{padding:12px 0;border-bottom:1px dashed #E8E4DA}
.date-p:last-child{border-bottom:0}
.date-p .haut-l{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.date-p .j{font-weight:650;color:var(--marine);text-transform:capitalize;font-size:15px;line-height:1.3}
.date-p .p{font-size:12.5px;color:var(--gris)}
.panneau .liste .date-l{padding:11px 0}
.panneau .bas{padding:16px 22px 20px;border-top:1px solid var(--gris-clair);background:#FCFBF8}
.panneau .rassure{font-size:12.5px;color:var(--gris);margin-top:12px;line-height:1.5}
.aucune{padding:22px;text-align:center;color:var(--gris);font-size:14.5px}

/* ---------- modale ---------- */
.fond{position:fixed;inset:0;background:rgba(20,35,63,.45);display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow:auto;z-index:80}
.modale{background:#fff;border-radius:var(--r);max-width:640px;width:100%;padding:26px 28px;box-shadow:0 24px 70px rgba(20,35,63,.3)}
.champ{margin-bottom:13px}
label{display:block;font-size:12.5px;font-weight:650;color:var(--gris);margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--gris-clair);border-radius:9px;
  font:inherit;font-size:15px;background:#fff;color:var(--encre)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--dore-clair);outline-offset:-1px;border-color:var(--dore)}
.duo{display:flex;gap:12px;flex-wrap:wrap} .duo>*{flex:1;min-width:180px}
label .oblig{color:var(--dore);font-size:15px;font-weight:800;vertical-align:-1px}
.oblig-note{font-size:12.5px;color:var(--gris);margin:0 0 12px}
.oblig-note b{color:var(--dore)}
input.faux,select.faux,textarea.faux{border-color:var(--rouge);background:var(--rouge-clair)}
.encart{background:var(--dore-pale);border-left:4px solid var(--dore);padding:12px 15px;border-radius:8px;font-size:14px;margin:14px 0}
.encart.rouge{background:var(--rouge-clair);border-left-color:var(--rouge);color:#6E1717}
.encart.vert{background:var(--vert-clair);border-left-color:var(--vert);color:#0C4A2C}
.droite{text-align:right;margin-top:16px}

footer.site{margin-top:20px;padding:30px 0;border-top:1px solid var(--gris-clair);font-size:13px;color:var(--gris);text-align:center;line-height:1.8}

@media(max-width:900px){
  .detail{grid-template-columns:1fr}
  .panneau{position:static;order:-1}
  .panneau .liste{max-height:none}
}

/* ---------- téléphone ---------- */
@media(max-width:640px){
  body{font-size:15.5px}
  p,li,td,a,strong{overflow-wrap:anywhere}
  .wrap{padding:0 16px}
  header.site .in{padding:11px 16px;gap:10px}
  header.site .logo{gap:9px}
  header.site .logo img{height:32px}
  header.site .logo span{display:none}
  header.site a{font-size:13.5px}
  header.site .tel{padding:9px 14px}

  .hero{padding-top:26px;padding-bottom:16px}
  .hero p.lede{font-size:16px}
  .reperes{gap:14px 20px;margin-top:16px;padding-top:16px}
  .repere{flex:1 1 40%}
  .repere b{font-size:18px}

  .cartes{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .carte-f{grid-row:auto;grid-template-rows:none}
  .etiquette{padding-top:14px}
  .carte-f>*{padding-left:18px;padding-right:18px}
  .carte-f h2{margin-top:16px}
  .carte-f .dates{padding:14px 18px 18px}
  .carte-f h2{font-size:19px}
  .prix{font-size:24px}
  .date-l{flex-wrap:wrap;row-gap:4px}
  .actions .btn{width:100%}

  .fil{padding:14px 0 0;font-size:12.5px}
  .detail{gap:16px;padding:10px 0 40px}
  .contenu section{padding:18px 18px;margin-bottom:14px}
  .contenu section h2{font-size:18px}
  .prog-bloc ul{padding-left:22px}
  .panneau .haut{padding:18px}
  .panneau .haut .prix{font-size:28px}
  .panneau .compte,.panneau .liste,.panneau .bas{padding-left:18px;padding-right:18px}

  /* fiche pratique en blocs empilés, plus de colonne à 42 % illisible */
  .fiche tr{display:block;border-bottom:1px solid #F1EFEA;padding:9px 0}
  .fiche tr:last-child{border-bottom:0}
  .fiche td{display:block;width:auto;padding:0;border:0}
  .fiche td:first-child{width:auto;font-size:11.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;margin-bottom:3px}

  /* la modale devient une feuille plein écran */
  .fond{padding:0;align-items:stretch}
  .modale{border-radius:0;min-height:100%;padding:20px 18px 30px}
  .duo{gap:0}
  .duo>*{flex:1 1 100%;min-width:0}
  .droite{display:flex;gap:9px;margin-top:18px}
  .droite .btn{flex:1;margin-left:0!important}
  .droite .btn:last-child{flex:1.5}

  /* confort tactile, et 16 px pour empêcher le zoom automatique d'iOS */
  input,select,textarea{font-size:16px;padding:12px 13px}
  .btn{min-height:46px;padding:12px 18px}
  .btn.mini{min-height:40px;padding:9px 14px;font-size:13.5px}

  footer.site{padding:24px 0;font-size:12.5px}
}

/* ---------- barre de filtres ---------- */
.filtres{background:#fff;border-top:1px solid var(--gris-clair);border-bottom:1px solid var(--gris-clair);
  position:sticky;top:66px;z-index:20;box-shadow:0 6px 18px rgba(20,35,63,.05)}
.filtres .in{display:flex;gap:26px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.grp{display:flex;align-items:center;gap:10px;min-width:0}
.grp-nom{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.grp-opts{display:flex;gap:6px;flex-wrap:wrap}
.f-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;cursor:pointer;
  border:1px solid var(--gris-clair);background:#fff;color:var(--marine);font:inherit;font-size:13.5px;font-weight:600;
  transition:background .15s,border-color .15s}
.f-chip:hover{background:#F6F5F1;border-color:#CFC9B8}
.f-chip .n{font-size:11px;font-weight:700;color:var(--gris);background:#F0EEE9;border-radius:99px;padding:1px 7px}
.f-chip.on{background:var(--marine);border-color:var(--marine);color:#fff}
.f-chip.on .n{background:rgba(255,255,255,.18);color:#fff}
.f-chip.zero{opacity:.42}

/* ---------- étiquettes de carte ---------- */
.etiquette{display:flex;gap:6px;flex-wrap:wrap;padding-top:16px}
.tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:5px;
  background:#E8E5DC;color:#3F4451}
.tag.parcours{background:var(--marine);color:var(--dore-clair)}
.tag.bientot{background:#F0E2BC;color:var(--dore-fonce)}

/* ---------- parcours ---------- */
.carte-f.pack{border-color:#D9CEB0;box-shadow:0 2px 4px rgba(20,35,63,.05),0 14px 38px rgba(20,35,63,.1)}
.carte-f.pack .bandeau{height:5px;background:var(--marine)}
.carte-f.pack .dates{background:#F7F3E9;border-top-color:#E3D9C1}
.carte-f .mods{margin:10px 0 0;padding-left:19px;font-size:13.5px;color:#414141}
.carte-f .mods li{margin-bottom:4px}
.prix-bloc .barre{text-decoration:line-through;color:var(--gris);font-size:15px}
.prix-a-venir{font-size:17px;font-weight:700;color:var(--dore-fonce)}
.chip.offert{background:var(--vert-clair);color:var(--vert);border-color:#A8CDBA}

/* un module dans la composition du parcours */
.mod{border:1px solid var(--gris-clair);border-radius:10px;padding:13px 14px;margin-bottom:11px;background:#FCFBF8}
.mod-tete{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:9px}
.mod-nom{font-weight:700;color:var(--marine);font-size:15px}
.mod-note{font-size:12.5px;color:var(--gris);margin-top:2px}
.mod .choix-sel{margin-bottom:9px}
.mod .date-sel{background:#fff}

@media(max-width:640px){
  .filtres{position:static}   /* trop haute pour rester collée sur un écran de téléphone */
  .filtres .in{gap:10px;padding-top:11px;padding-bottom:11px;flex-direction:column}
  .grp{align-items:flex-start;flex-direction:column;gap:6px;width:100%}
  .grp-opts{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;padding-bottom:2px;
    margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .grp-opts::-webkit-scrollbar{display:none}
  .f-chip{white-space:nowrap;padding:9px 14px;flex:0 0 auto}
  .etiquette{padding-top:14px}
}