/* Samy 22/10/2026 -- licence-exploitation-bar.com v2. Charte validee le 05/09 (CHARTE-VALIDEE.md) :
   Barlow Condensed (titres, droits) + DM Sans 14 px ; accent #AE1338, bandeau #0F325C. */
:root{--accent:#AE1338;--deep:#0F325C;--ink:#1d1d1b;--paper:#fff;--soft:#f2f1ef;--line:#dcdad6;--mut:#6d6a64;
  --disp:"Barlow Condensed",Impact,sans-serif;--body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.6}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0}
h1,h2,h3,h4{font-family:var(--disp);font-style:normal;font-weight:700;line-height:1.15;text-wrap:balance}
a{color:var(--accent)}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding-left:16px;padding-right:16px}
.mut{color:var(--mut)}

/* bandeau d'annonce + en-tete */
.topbar{background:var(--deep);color:#fff;font-size:.86rem;padding:7px 16px;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;text-align:center}
.topbar .cta{background:var(--accent);color:#fff;padding:4px 12px;border-radius:3px;font-weight:700;font-size:.82rem;text-decoration:none}
.head{background:#fff;border-bottom:2px solid var(--accent)}
.headin{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo .mark{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:18px}
.logo strong{display:block;font-family:var(--disp);font-size:1.35rem;color:var(--ink);line-height:1}
.logo span span{display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--disp);font-size:1.06rem;font-weight:600}
.nav a{color:var(--ink);text-decoration:none;white-space:nowrap}
.nav a.on,.nav a:hover{color:var(--accent)}
.tels{display:flex;gap:8px;flex-wrap:wrap}
.pastille{border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:4px 11px;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap}
.crumbs{padding-top:9px;padding-bottom:9px;font-size:.82rem;color:var(--mut);border-bottom:1px solid var(--line)}
.crumbs a{text-decoration:none}

/* grille : contenu + colonne */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:30px;padding-top:24px;padding-bottom:36px}
.grid.seule{grid-template-columns:minmax(0,1fr)}
main h1{font-size:clamp(26px,3.5vw,38px);margin-bottom:12px}
main>p,main li{max-width:68ch}
main p{margin-bottom:13px}
main h2{font-size:1.65rem;margin:28px 0 10px}
main h3{font-size:1.28rem;margin:20px 0 8px}
main ul,main ol{margin:0 0 14px 20px;padding:0}
main li{margin-bottom:5px}
.chapo{font-size:1.07rem;color:#3a3936}
.essentiel{border-left:4px solid var(--accent);background:var(--soft);padding:14px 16px;margin:6px 0 20px;max-width:68ch}
.essentiel h2,.essentiel h3{font-size:1.02rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.essentiel ul{margin-bottom:0}
.toc{border:1px solid var(--line);border-radius:5px;padding:14px 16px;margin:6px 0 22px;max-width:68ch}
.toc h2{font-size:1.02rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px}
.toc ol{margin:0 0 0 19px;font-size:.93rem;line-height:1.9}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.92rem;margin:12px 0 18px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
thead th{background:var(--deep);color:#fff;font-family:var(--disp);font-size:.98rem}
.tbl{overflow-x:auto}

/* bouton rouge simple (decision de Samy du 21/10 sur pe.fr) */
.cta{margin:18px 0}
.btn{display:inline-block;background:var(--accent);color:#fff;border-radius:6px;padding:12px 26px;font-weight:700;font-size:1rem;line-height:1.3;text-decoration:none}
.btn:hover{background:#8f0f2e;color:#fff}
.prix{font-family:var(--disp);font-weight:700;color:var(--accent);white-space:nowrap}

/* FAQ depliante */
.faq{border-top:2px solid var(--accent);margin-top:30px;padding-top:6px;max-width:68ch}
details.qa{border-bottom:1px solid var(--line)}
details.qa summary{cursor:pointer;list-style:none;padding:12px 0;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.qa summary::-webkit-details-marker{display:none}
details.qa h3{margin:0;font-size:1.14rem;flex:1}
details.qa .chev{color:var(--accent);font-weight:700;font-size:1.2rem}
details.qa[open] .chev{transform:rotate(45deg)}
details.qa p{font-size:.95rem}

/* emplacement d'image : cadre gris numerote (aucune image generee) */
.ph{background:repeating-linear-gradient(45deg,#ecebe8,#ecebe8 12px,#f4f3f1 12px,#f4f3f1 24px);border:1px dashed #b9b6b0;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#5d5a55;font-size:.82rem;padding:14px;margin:8px 0 20px;max-width:100%;position:relative}
.ph div{max-width:52ch}
.ph b{font-family:var(--disp);font-size:1.1rem;color:var(--deep)}
.ph figcaption{position:absolute;bottom:6px;left:10px;right:10px;font-size:.72rem;color:#8a8780}

/* colonne laterale */
.aside{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:16px;align-self:start;position:sticky;top:12px}
.aside h3{font-size:1.22rem;margin-bottom:6px}
.aside .intro{font-size:.84rem;color:var(--mut);margin-bottom:10px}
.reg{display:flex;justify-content:space-between;gap:9px;font-size:.88rem;border-bottom:1px dotted var(--line);padding-bottom:5px;margin-bottom:6px}
.reg a{text-decoration:none}
.reg b{color:var(--accent);font-variant-numeric:tabular-nums}
.liste{list-style:none;margin:0!important;padding:0!important}
.liste li{padding:5px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.liste a{text-decoration:none}
.aside .cta{margin:14px 0 0}
.aside .btn{width:100%;text-align:center;padding:10px 14px}

/* a lire egalement */
.alire{margin-top:30px;border-top:1px solid var(--line);padding-top:6px;max-width:68ch}
.alire h2{font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.alire ul{columns:2;column-gap:24px;list-style:none;margin:0;padding:0}
.alire li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line)}
.alire a{text-decoration:none}

/* accueil */
main.accueil{max-width:none}
.hero{position:relative;margin:0 0 20px}
.hero .ph{min-height:300px;margin:0;justify-content:flex-start;align-items:flex-end;text-align:right;padding:18px 22px}
.hero .ph div{max-width:40ch}
.hero .txt{position:absolute;left:24px;bottom:24px;right:24px;max-width:620px;background:rgba(15,50,92,.92);color:#fff;padding:20px 22px;border-radius:6px}
.hero h1{color:#fff;font-size:clamp(28px,4vw,44px);margin:0 0 8px}
.hero p{margin:0;color:#e9edf3;font-size:1.02rem}
.preuves{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 26px}
.preuves div{background:var(--soft);border-radius:6px;padding:14px 16px;font-size:.9rem}
.preuves strong{display:block;font-family:var(--disp);font-size:1.2rem;color:var(--deep);margin-bottom:2px}
.cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:12px 0 26px}
.carte{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;background:#fff}
.carte:hover{border-color:var(--accent)}
.carte .lang{writing-mode:vertical-rl;transform:rotate(180deg);background:var(--accent);color:#fff;font-family:var(--disp);font-weight:700;letter-spacing:.08em;padding:12px 6px;text-transform:uppercase;font-size:.85rem;text-align:center}
.carte .corps{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.carte strong{font-family:var(--disp);font-size:1.35rem;line-height:1.15}
.carte em{font-style:normal;color:var(--mut);font-size:.88rem}
.carte .bas{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline}
.carte .prix{font-size:1.5rem}
.reassur{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 26px}
.reassur div{border-top:3px solid var(--accent);padding-top:10px;font-size:.92rem}
.reassur h3{font-size:1.2rem;margin:0 0 4px}
.guidebloc{background:var(--soft);border-radius:8px;padding:20px;margin:10px 0 10px}
.guidebloc h2{margin-top:0}
.guidebloc .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guidebloc .cols a{display:block;background:#fff;border-radius:6px;padding:14px;text-decoration:none;color:inherit;border:1px solid var(--line)}
.guidebloc .cols strong{font-family:var(--disp);font-size:1.2rem;display:block;color:var(--deep)}

/* pied de page */
.foot{background:var(--deep);color:#fff;padding:26px 0 18px}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fcols h4{font-family:var(--disp);font-size:1rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}
.fcols ul{list-style:none;padding:0;font-size:.86rem;line-height:1.9}
.fcols a{color:rgba(255,255,255,.88);text-decoration:none}
.ftel{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.ftel a{background:rgba(255,255,255,.12);color:#fff;padding:4px 10px;border-radius:3px;font-size:.82rem;text-decoration:none}
.agr{font-size:.8rem;color:rgba(255,255,255,.78);margin-top:12px}
.fbot{border-top:1px solid rgba(255,255,255,.22);margin-top:14px;padding-top:10px;font-size:.78rem;color:rgba(255,255,255,.68);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* apercu : marques de travail (absentes en production) */
.filler{background:#fff8dc;border:1px dashed #d4a017;color:#6b5100;padding:10px 13px;border-radius:4px;font-size:.85rem}
.brouillon{background:#eef3fb;border:1px dashed #6b8cc7;color:#213f73;padding:6px 11px;border-radius:4px;font-size:.78rem;display:inline-block}
.aconf{background:#ffe9b0;padding:0 4px;border-radius:3px}
.plan ul{list-style:none;padding-left:18px}
.plan>ul{padding-left:0;margin-left:0}
.plan a{text-decoration:none}
.plan .lv1{font-family:var(--disp);font-size:1.25rem;font-weight:700;color:var(--ink)}
.plan .lv2{font-family:var(--disp);font-size:1.08rem;font-weight:700;color:var(--deep)}

@media (max-width:900px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preuves,.reassur,.guidebloc .cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cartes{grid-template-columns:1fr}
  .hero .txt{position:static;margin-top:-4px;border-radius:0 0 6px 6px}
  .hero .ph{min-height:180px;border-radius:6px 6px 0 0}
  .nav{gap:10px;font-size:1rem}
  .tels{width:100%}
  .alire ul{columns:1}
  .fcols{grid-template-columns:1fr}
}

/* ===== Samy 22/10/2026 -- composants repris de pe.fr / pe.com apres l'audit (03-AUDIT.md) ===== */
/* pas de gras dans le texte courant (decision de Samy du 13/09 sur pe.fr) ; les intitules des listes et des encadres le gardent */
main > p strong, main .faq p strong { font-weight: inherit }
/* telephones plus visibles dans l'en-tete (Nicolas, 19/10, N2 : « agrandir pour mieux voir le telephone ») */
.pastille { font-size: .95rem; padding: 6px 14px; font-weight: 700 }
/* encadre visio (pe.fr, pe_visio) */
.visio { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 18px; padding: 12px 16px; background: #eef2f8; border-left: 4px solid var(--deep); border-radius: 6px; max-width: 68ch }
.visio svg { flex: 0 0 26px; fill: var(--deep); margin-top: 1px }
.visio p { margin: 0; font-size: 1rem }
/* prochaines sessions des l'arrivee (Samy, 20/10) */
.sessions { margin: 4px 0 18px; max-width: 760px }
.sessions-titre { font-size: 1.3rem; margin: 4px 0 4px }
.sessions table { margin: 6px 0 8px }
.sessions td:last-child { text-align: right; white-space: nowrap }
.sessions-plus { font-size: .92rem; margin: 0 0 8px }
.btn.petit { padding: 6px 14px; font-size: .88rem; border-radius: 5px }
/* les 4 dessins des formations (pe.fr, 20/10) */
.carte { position: relative }
.carte .dessin { position: absolute; top: 10px; right: 12px; width: 46px; height: 46px; opacity: .9 }
.dessin svg { width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.dessin svg .pe-d-plein { fill: var(--accent); fill-opacity: .18; stroke: none }
.dessin svg .pe-d-reflet { stroke-opacity: .5 }
.carte .corps strong { padding-right: 52px }
.dessin.mini { display: inline-block; width: 40px; height: 40px; flex: 0 0 40px }
/* cartes telephone cliquables (pe.fr, page financement) */
.cartes-tel { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 }
.carte-tel { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #eef2f8; border: 1px solid #d9e0ee; border-left: 4px solid var(--deep); border-radius: 8px; text-decoration: none; color: var(--deep); max-width: 340px }
.carte-tel .rond { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--deep); display: flex; align-items: center; justify-content: center }
.carte-tel .rond svg { fill: #fff }
.carte-tel .qui { display: block; font-size: .88rem; color: #555 }
.carte-tel .num { display: block; font-family: var(--disp); font-size: 1.45rem; font-weight: 700; letter-spacing: .03em }
.fin-haut { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 6px 0 18px }
.fin-haut > div { flex: 1 1 300px }
.fin-haut > p { flex: 0 1 340px; margin: 0 }
.financeurs { margin: 0 }
.financeurs img { display: block; width: 100%; max-width: 340px; height: auto }
/* formulaires (structure de pe.fr : contact.php, financement-pole-emploi.php) */
.formulaire { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; margin: 16px 0 10px; max-width: 680px }
.formulaire h2 { margin-top: 0; font-size: 1.4rem }
.formulaire .champ { margin: 0 0 14px; max-width: none }
.formulaire label, .formulaire .lab { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 5px }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire select, .formulaire textarea { width: 100%; height: 42px; border: 1px solid #c9c6c0; border-radius: 6px; padding: 8px 10px; font: inherit; background: #fff }
.formulaire textarea { height: auto }
.formulaire .radios label { display: inline-block; font-weight: 400; margin-right: 20px }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px }
.formulaire .aide { display: block; font-size: .82rem; color: var(--mut); margin-top: 4px }
.formulaire .obl { color: var(--accent) }
.formulaire .captcha { display: inline-block; border: 1px dashed #b9b6b0; border-radius: 4px; padding: 14px 18px; font-size: .85rem; color: var(--mut); background: #fff }
.formulaire .actions { margin: 6px 0 8px }
.formulaire button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 700 }
.formulaire .note { font-size: .82rem; color: var(--mut); margin: 0 }
/* bande de confiance du bas de page (pe.fr lib/bas_article.php, 16/10) */
.conf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid #e4e6ef; border-radius: 8px; padding: 16px 20px; margin-top: 4px; margin-bottom: 28px }
.conf-bloc { display: flex; align-items: center; gap: 11px; flex: 1 1 168px; color: #2b2f3f; text-decoration: none }
.conf-bloc img { height: 44px; width: auto; flex: 0 0 auto }
.conf-bloc svg { width: 26px; height: 26px; fill: var(--deep) }
.conf-bloc.tel > svg { flex: 0 0 26px }
.conf .t { display: block; font-size: .95rem; font-weight: 700; color: var(--deep); line-height: 1.3 }
.conf .s { display: block; font-size: .85rem; color: var(--mut); line-height: 1.35 }
.conf a { text-decoration: none }
.conf .tel a { color: var(--deep) }
.conf .btn { margin-left: auto; white-space: nowrap }
a.conf-bloc:hover .t { color: var(--accent) }
/* ligne de date (Nicolas, 14/10 : « Mis a jour le », jamais « Publie le ») */
.meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--mut); margin: -4px 0 14px }
.accueil .preuves .drapeau { width: 34px; height: 34px; float: right; margin: 0 0 6px 10px }
@media (max-width: 991px) { .conf .btn { flex: 1 1 100%; text-align: center; margin-left: 0 } }
@media (max-width: 640px) { .formulaire .deux { grid-template-columns: 1fr } .sessions td:nth-child(3) { white-space: nowrap } }
/* financeurs actuels, en texte (l'image de pe.fr montrait des OPCA disparus en 2019) */
.financeurs { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; max-width: 340px }
.financeurs .fin-t { display: block; font-family: var(--disp); font-weight: 700; font-size: 1.05rem; color: var(--deep); margin-bottom: 8px }
.financeurs ul { list-style: none; margin: 0; padding: 0 }
.financeurs li { padding: 6px 0; border-bottom: 1px solid var(--line); margin: 0 }
.financeurs li:last-child { border-bottom: 0 }
.financeurs li strong { display: block; font-weight: 700; color: var(--ink) }
.financeurs li span { display: block; font-size: .85rem; color: var(--mut) }

/* audit 22/10 : textes de reference (reglementation affichee comme sur pe.fr : article cite + lien Legifrance) */
main ul.textes { list-style: none; margin: 8px 0 24px; padding: 14px 18px; background: #eef2f8; border-left: 4px solid var(--deep); border-radius: 6px; max-width: 68ch; box-sizing: border-box }
main ul.textes li { margin: 0 0 7px; padding: 0; font-size: .92rem; max-width: none }
main ul.textes li:last-child { margin-bottom: 0 }
main ul.textes a { font-weight: 500 }
.nw { white-space: nowrap }
.favis { background: #fff; border-radius: 6px; max-width: 420px; margin: 4px 0 18px; overflow: hidden }
.favis iframe { display: block; border: 0 }

/* Samy 22/10/2026 : les 4 schemas (business plan, reprise, affichages, carte annotee) */
.schema-fig { margin: 10px 0 26px; max-width: 68ch }
.schema { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px }
.schema-titre { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--deep); margin: 0 0 12px; max-width: none }
.schema ol, .schema ul { margin: 0; padding: 0; list-style: none }
.schema li { max-width: none }
.schema strong { display: block; font-weight: 700; color: var(--deep) }
.schema span { display: block; color: #3d3a35; font-size: .92rem; line-height: 1.45 }
/* cartes numerotees */
.schema-cartes ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; counter-reset: sc }
.schema-cartes li { background: #fff; border-radius: 6px; padding: 12px 12px 12px 46px; position: relative; counter-increment: sc }
.schema-cartes li::before { content: counter(sc); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .85rem/24px 'DM Sans', sans-serif; text-align: center }
/* frise verticale */
.schema-frise ol { counter-reset: sf; position: relative }
.schema-frise li { position: relative; padding: 0 0 14px 40px; counter-increment: sf }
.schema-frise li:last-child { padding-bottom: 0 }
.schema-frise li::before { content: counter(sf); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--deep); color: #fff; font: 700 .85rem/26px 'DM Sans', sans-serif; text-align: center; z-index: 1 }
.schema-frise li::after { content: ''; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: #c9cfdb }
.schema-frise li:last-child::after { display: none }
.schema-frise li:nth-child(4)::before, .schema-frise li:nth-child(7)::before { background: var(--accent) }
/* plan en zones */
.schema-plan .zones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.schema-plan .zone { background: #fff; border-radius: 6px; padding: 12px 14px; border-top: 4px solid var(--deep) }
.schema-plan .zone:nth-child(3) { border-top-color: var(--accent) }
.schema-plan .zone:nth-child(4) { border-top-color: #8a8780 }
.schema-plan .zone ul li { position: relative; padding-left: 14px; font-size: .92rem; line-height: 1.45; margin-top: 5px }
.schema-plan .zone ul li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent) }
/* carte annotee */
.schema-carte .carte-modele { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 10px }
.schema-carte .carte-nom { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--deep); margin: 0 0 6px; max-width: none }
.schema-carte table { margin: 0 }
.schema-carte .carte-pied { font-size: .88rem; color: var(--mut); margin: 8px 0 0; max-width: none }
.schema-carte span.repere { display: inline-block; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .72rem/19px 'DM Sans', sans-serif; text-align: center; vertical-align: 1px; margin-left: 3px }
.schema-carte .legende { counter-reset: lg; margin-top: 12px }
.schema-carte .legende li { counter-increment: lg; position: relative; padding-left: 30px; font-size: .92rem; line-height: 1.45; margin-top: 6px }
.schema-carte .legende li::before { content: counter(lg); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .72rem/19px 'DM Sans', sans-serif; text-align: center }
@media (max-width: 640px) {
  .schema-cartes ol { grid-template-columns: 1fr }
  .schema-plan .zones { grid-template-columns: 1fr }
  .schema { padding: 14px }
  .schema-carte .carte-modele { padding: 12px 10px 8px }
  .schema-carte table { font-size: .84rem }
  .schema-carte th, .schema-carte td { padding-left: 6px; padding-right: 6px }
}

/* Samy 22/10/2026 : les illustrations */
.photo { margin: 8px 0 22px }
.photo img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--soft) }
.hero .photo { margin: 0 }

/* Samy 22/10/2026 : les 11 retouches de l'avis de design de Codex (avis-codex/AVIS-DESIGN.md), essayees en direct puis validees par Samy (choix 1) */
/* 1. corps des contenus du guide (pages datées) */
main:has(> .meta) { font-size: 16px; line-height: 1.65 }
/* 2. bouton du bandeau supérieur */
.topbar .cta { margin: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center }
/* 3. petites actions d'inscription et d'appel */
.btn.petit, .pastille, .aside .btn, .ftel a, .conf .tel a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center }
/* 4. navigation mobile */
@media (max-width: 640px) { .nav a { min-height: 44px; display: inline-flex; align-items: center } .nav { gap: 0 10px } }
/* 5. formulaires */
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire select { font-size: 16px; height: 46px; border-color: var(--mut) }
.formulaire textarea { font-size: 16px; border-color: var(--mut) }
.formulaire .radios label { display: inline-flex; min-height: 44px; align-items: center; gap: 8px }
/* 6. focus clavier */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px }
.topbar a:focus-visible, .foot a:focus-visible { outline-color: var(--paper) }
/* 7. tableau des sessions en mobile */
@media (max-width: 640px) { .sessions th, .sessions td { padding-left: 6px; padding-right: 6px } .sessions .btn.petit { padding-left: 10px; padding-right: 10px } }
/* 8. titres des contenus longs */
main:has(> .meta) > h2[id] { margin-top: 36px }
main:has(> .meta) > h3 { margin-top: 24px }
/* 9. sommaire */
.toc a { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em }
@media (max-width: 640px) { .toc a { display: block; min-height: 44px; padding-block: 8px } .toc li { margin-bottom: 0 } }
/* 10. photos a la largeur de lecture */
main > .photo { max-width: 68ch }
/* 11. bandeau d'accueil sur grand ecran */
@media (min-width: 1200px) { .hero .photo img { height: 420px; object-fit: cover; object-position: center } }

/* ==========================================================================
   Samy 22/10/2026 : theme « Comptoir contemporain » (proposition de Codex, avis-codex/design-v2/PROPOSITION.md),
   essaye en direct sur les 38 pages puis adopte par Samy (choix 1). Polices chargees par le generateur (DM Sans + Manrope).
   ========================================================================== */
/* Comptoir contemporain : palette, deux familles et finitions communes. */
:root {
  --accent: #9D2945;
  --accent-hover: #842039;
  --deep: #243B4A;
  --ink: #252722;
  --paper: #FFFFFF;
  --canvas: #FBF8F4;
  --soft: #EFE9E1;
  --cool: #EDF1F3;
  --line: #D8CEC2;
  --mut: #665F58;
  --bronze: #80603D;
  --disp: "Manrope", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 12px;
  --shadow: 0 6px 22px rgb(37 39 34 / 5%);
}

/* Le fond ivoire accueille un corps ouvert, sans diminuer les 16 px du guide. */
body { background: var(--canvas); color: var(--ink); font: 400 15px/1.7 var(--body); }
main:has(> .meta) { font-size: 16px; line-height: 1.7; }
main, .grid > *, .carte .corps, .conf-bloc > span { min-width: 0; }

/* Les titres perdent leur condensation et leurs capitales systématiques. */
h1, h2, h3, h4 { color: var(--deep); font-family: var(--disp); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
main h1 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.16; margin-bottom: 16px; }
main h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); margin: 32px 0 12px; }
main h3 { font-size: 1.1875rem; margin: 24px 0 10px; }
main p { margin-bottom: 16px; }
.chapo { color: var(--ink); font-size: 1.0625rem; line-height: 1.7; }
main p strong, main p b { font-weight: inherit; }
main > p .prix { font-family: var(--body); font-weight: 400; letter-spacing: 0; }

/* Les liens de lecture restent soulignés et leur survol conserve un contraste élevé. */
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
main > p a:not(.btn), main .faq p a { text-decoration-line: underline; }
.mut, .meta { color: var(--mut); }

/* Le rythme principal reste compact avant les sessions, plus ample entre les sections. */
.grid { gap: 32px; padding-top: 28px; padding-bottom: 48px; }
main:has(> .meta) > h2[id] { margin-top: 40px; }
main:has(> .meta) > h3 { margin-top: 28px; }
main > .photo { max-width: 68ch; }
main h2[id], main h3[id] { scroll-margin-top: 24px; }

/* Le bandeau ardoise garde son action rouge, sans effet promotionnel. */
.topbar { background: var(--deep); color: var(--paper); font-size: .8125rem; line-height: 1.5; padding: 8px 16px; gap: 8px 20px; }
.topbar .cta { min-height: 44px; margin: 0; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: var(--paper); font-size: .8125rem; }

/* L'en-tête blanc remplace le trait rouge par une séparation discrète. */
.head { background: var(--paper); border-bottom: 1px solid var(--line); }
.headin { gap: 8px 24px; padding-top: 14px; padding-bottom: 14px; }
.logo { gap: 10px; min-height: 44px; }
.logo .mark { border-radius: 14px; font-size: 16px; }
.logo strong { color: var(--deep); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.035em; }
.logo span span { color: var(--mut); font-size: .625rem; letter-spacing: .1em; margin-top: 3px; }

/* La navigation reste entièrement visible et supporte le retour à la ligne. */
.nav { gap: 0 14px; font: 600 .875rem/1.4 var(--disp); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--deep); text-underline-offset: .4em; }
.nav a.on, .nav a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }

/* Les deux conseillères conservent des boutons d'appel explicites de 44 px. */
.tels { gap: 8px; margin-left: auto; }
.pastille { min-height: 44px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); background: var(--paper); font-size: .9375rem; line-height: 1.35; font-weight: 700; }
.pastille:hover { color: var(--accent-hover); background: var(--canvas); border-color: var(--accent-hover); }

/* Le fil d'Ariane et la date restent discrets et lisibles. */
.crumbs { padding-top: 12px; padding-bottom: 12px; font-size: .8125rem; color: var(--mut); border-color: var(--line); overflow-wrap: anywhere; }
.meta { font-size: .875rem; margin: 0 0 18px; gap: 6px 10px; }

/* Les boutons sont pleins, unis et rouges, sans ombre ni encart ajouté. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 12px 22px; border-radius: 8px; background: var(--accent); color: var(--paper); font: 700 1rem/1.4 var(--body); text-align: center; text-decoration: none; box-shadow: none; }
.btn:hover, .topbar .cta:hover { background: var(--accent-hover); color: var(--paper); }
.btn.petit { min-height: 44px; padding: 8px 14px; border-radius: 8px; font-size: .875rem; }
.cta { margin: 22px 0; }
.prix { color: var(--accent); font-family: var(--disp); font-weight: 700; letter-spacing: -.025em; }

/* Le bandeau conserve la photographie et pose le texte sur une surface opaque fiable. */
.hero { margin-bottom: 20px; }
.hero .photo img { height: 420px; object-fit: cover; object-position: center; border-radius: 16px; }
.hero .txt { left: 24px; right: 24px; bottom: 24px; max-width: 640px; padding: 24px; background: var(--deep); color: var(--paper); border-radius: var(--radius); }
.hero h1 { margin: 0 0 12px; color: var(--paper); font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.15; }
.hero p { margin: 0; color: var(--canvas); font-size: 1rem; line-height: 1.65; }

/* Les preuves d'agrément deviennent trois cartouches sobres et chaleureux. */
.preuves { gap: 16px; margin-bottom: 32px; }
.preuves div { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); font-size: .875rem; }
.preuves strong { margin-bottom: 8px; font-family: var(--disp); font-size: 1.0625rem; line-height: 1.35; color: var(--deep); }

/* Les formations gagnent de l'air sans perdre leur durée, leur prix ni leur dessin. */
.cartes { gap: 18px; margin: 16px 0 32px; }
.carte { background: var(--paper); border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
.carte:hover { border-color: var(--accent); color: var(--ink); box-shadow: 0 8px 24px rgb(37 39 34 / 9%); }
.carte .lang { padding: 14px 8px; background: var(--soft); color: var(--accent); font-size: .8125rem; letter-spacing: .06em; }
.carte .corps { padding: 20px; gap: 12px; }
.carte .corps strong { padding-right: 52px; font-size: 1.1875rem; line-height: 1.35; color: var(--deep); }
.carte em { color: var(--mut); font-size: .9375rem; line-height: 1.6; }
.carte .bas { gap: 8px; padding-top: 4px; flex-wrap: wrap; font-size: .875rem; }
.carte .prix { font-size: 1.5rem; }

/* Le trait bronze des dessins fait écho au bois, en conservant chaque tracé. */
.carte .dessin { top: 18px; right: 16px; opacity: 1; }
.dessin svg { fill: none; stroke: var(--bronze); stroke-width: 2; }
.dessin svg .pe-d-plein { fill: var(--bronze); fill-opacity: .12; stroke: none; }
.conf-bloc .dessin svg { width: 100%; height: 100%; fill: none; }

/* Les services complémentaires restent secondaires par leur simple filet bronze. */
.reassur { gap: 24px; margin: 12px 0 28px; }
.reassur div { border-top: 2px solid var(--bronze); padding-top: 14px; font-size: .9375rem; }
.reassur h3 { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.35; }

/* Le guide reçoit une surface sable et des portes d'entrée blanches. */
.guidebloc { padding: 24px; margin: 16px 0 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.guidebloc h2 { margin-top: 0; }
.guidebloc .cols { gap: 16px; }
.guidebloc .cols a { padding: 18px; border-color: var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: .9375rem; }
.guidebloc .cols a:hover { border-color: var(--accent); }
.guidebloc .cols strong { font-family: var(--disp); font-size: 1.0625rem; line-height: 1.4; margin-bottom: 8px; color: var(--deep); }

/* L'essentiel est identifié par le bronze, sans prendre le poids du bouton rouge. */
.essentiel { border-left: 3px solid var(--bronze); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; margin: 8px 0 20px; background: var(--soft); }
.essentiel h2, .essentiel h3 { margin: 0 0 10px; color: var(--bronze); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.essentiel ul { margin-bottom: 0; }

/* La visio et les références juridiques utilisent le même bleu grisé. */
.visio, main ul.textes { background: var(--cool); border-left: 3px solid var(--deep); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; }
.visio { gap: 12px; margin: 16px 0 20px; }
.visio svg { fill: var(--deep); }
.visio p { margin: 0; font-size: 1rem; line-height: 1.65; }
main ul.textes { margin: 12px 0 28px; }
main ul.textes li { font-size: .9375rem; line-height: 1.65; }

/* Le sommaire prend l'aspect d'une table de lecture, avec liens toujours soulignés. */
.toc { background: var(--paper); border-color: var(--line); border-radius: var(--radius); padding: 20px; margin: 12px 0 26px; }
.toc h2 { margin: 0 0 10px; font-size: 1rem; text-transform: none; letter-spacing: 0; }
.toc ol { font-size: .9375rem; line-height: 1.65; }
.toc a { color: var(--deep); border: 0; text-decoration: underline; text-underline-offset: .2em; }
.toc a:hover { color: var(--accent); }

/* Les tableaux privilégient les lignes horizontales et une tête ardoise. */
table { background: var(--paper); border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 10px; font-size: .9375rem; }
th, td { padding: 12px; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { background: var(--deep); color: var(--paper); font-family: var(--disp); font-size: .875rem; font-weight: 600; }
thead th:first-child { border-top-left-radius: 9px; }
thead th:last-child { border-top-right-radius: 9px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--canvas); }
.tbl { max-width: 100%; overflow-x: auto; }

/* Les sessions restent à leur place et leurs actions gardent 44 px de hauteur. */
.sessions { margin: 8px 0 22px; }
.sessions h2.sessions-titre { font-size: 1.1875rem; margin: 4px 0 12px; line-height: 1.4; }
.sessions table { margin: 0 0 10px; }
.sessions th, .sessions td { padding: 10px; }
.sessions-plus { font-size: .9375rem; margin-bottom: 12px; }

/* La FAQ conserve son comportement natif dans des lignes blanches séparées. */
.faq { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 4px; }
details.qa { margin: 0 0 8px; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
details.qa summary { min-height: 56px; padding: 14px 0; gap: 16px; }
details.qa h3 { margin: 0; font-size: 1.0625rem; line-height: 1.45; letter-spacing: -.015em; }
details.qa .chev { flex: 0 0 auto; color: var(--accent); font-size: 1.5rem; line-height: 1; }
details.qa[open] { border-color: var(--bronze); }
details.qa p { font-size: 1rem; line-height: 1.7; margin-bottom: 18px; }

/* La colonne de conseil est une surface blanche, distincte des encadrés de lecture. */
.aside { background: var(--paper); border-color: var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.aside h3 { font-size: 1.0625rem; line-height: 1.4; }
.aside .intro { color: var(--mut); font-size: .875rem; line-height: 1.6; }
.reg { align-items: center; border-bottom-style: solid; font-size: .875rem; margin: 0; padding: 0; }
.reg a { display: inline-flex; align-items: center; min-height: 44px; }
.liste li { padding: 10px 0; font-size: .875rem; }
.liste a { line-height: 1.6; }
.aside .btn { min-height: 48px; font-size: .9375rem; padding: 12px; }

/* Les renvois éditoriaux restent légers et chaque lien dispose d'une cible confortable. */
.alire { margin-top: 36px; padding-top: 8px; }
.alire h2 { font-size: 1.0625rem; text-transform: none; letter-spacing: 0; }
.alire li { padding: 0; }
.alire a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; }

/* Le financement conserve les deux cartes de contact et la liste des financeurs. */
.carte-tel { max-width: 340px; padding: 16px; gap: 12px; background: var(--cool); border: 1px solid var(--line); border-left: 3px solid var(--deep); border-radius: var(--radius); color: var(--deep); }
.carte-tel:hover { color: var(--deep); border-color: var(--deep); }
.carte-tel .qui { color: var(--mut); font-size: .875rem; }
.carte-tel .num { font-size: 1.3125rem; letter-spacing: 0; line-height: 1.5; }
.carte-tel .rond { background: var(--deep); }
.carte-tel .rond svg { fill: var(--paper); }
.financeurs { padding: 18px; border-color: var(--line); border-radius: var(--radius); background: var(--paper); }
.financeurs .fin-t { font-size: 1rem; color: var(--deep); }
.financeurs li { padding: 10px 0; }
.financeurs li span { color: var(--mut); font-size: .875rem; }

/* Les formulaires reposent sur du blanc avec des contours de champs francs. */
.formulaire { padding: 24px; background: var(--paper); border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.formulaire h2 { font-size: 1.375rem; margin-top: 0; }
.formulaire .champ { margin-bottom: 18px; }
.formulaire label, .formulaire .lab { color: var(--ink); font-weight: 500; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire select, .formulaire textarea { color: var(--ink); background: var(--paper); font: 400 16px/1.5 var(--body); border: 1px solid var(--mut); border-radius: 8px; padding: 10px 12px; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire select { height: 48px; }
.formulaire textarea { height: auto; min-height: 144px; resize: vertical; }
.formulaire input::placeholder, .formulaire textarea::placeholder { color: var(--mut); opacity: 1; }
.formulaire .radios label { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-weight: 400; }
.formulaire input[type=radio], .formulaire input[type=checkbox] { accent-color: var(--accent); }
.formulaire .captcha { border-color: var(--mut); border-radius: 8px; background: var(--canvas); color: var(--mut); }
.formulaire .aide, .formulaire .note { color: var(--mut); font-size: .875rem; }
.formulaire button.btn { font: 700 1rem/1.4 var(--body); }

/* Les schémas gardent leurs structures et remplacent aussi les deux polices codées en dur. */
.schema { padding: 22px; background: var(--soft); border-color: var(--line); border-radius: var(--radius); }
.schema-titre, .schema-carte .carte-nom { font-family: var(--disp); color: var(--deep); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.schema strong { color: var(--deep); }
.schema span { color: var(--ink); font-size: .9375rem; line-height: 1.6; }
.schema-cartes li, .schema-plan .zone, .schema-carte .carte-modele { border-radius: 8px; background: var(--paper); }
.schema-frise li::after { background: var(--line); }
.schema-plan .zone:nth-child(4) { border-top-color: var(--bronze); }
.schema-carte .carte-pied { color: var(--mut); font-size: .875rem; }
.schema-carte span.repere { color: var(--paper); }

/* Les photographies restent naturelles, sans filtre ni modification des fichiers. */
.photo img { border-radius: var(--radius); background: var(--soft); }

/* La bande de confiance garde tous ses repères et une seule action rouge. */
.conf { max-width: 1148px; gap: 16px; margin-top: 0; margin-bottom: 32px; padding: 22px; background: var(--paper); border-color: var(--line); border-radius: var(--radius); }
.conf-bloc { color: var(--ink); min-height: 44px; }
.conf .t { color: var(--deep); font-size: .9375rem; line-height: 1.4; }
.conf .s { color: var(--mut); font-size: .875rem; line-height: 1.5; }
.conf .tel a { color: var(--deep); min-height: 44px; }
.conf .btn { white-space: normal; }

/* Le pied ardoise emploie des teintes opaques pour garantir chaque contraste. */
.foot { background: var(--deep); color: var(--paper); padding: 40px 0 24px; }
.fcols { gap: 28px; }
.fcols h4 { color: var(--paper); font-size: .9375rem; letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.fcols ul { font-size: .875rem; line-height: 1.6; }
.fcols a { display: flex; align-items: center; min-height: 44px; padding: 7px 0; color: var(--canvas); }
.fcols a:hover { color: var(--paper); text-decoration: underline; }
.ftel { margin-top: 24px; gap: 10px; }
.ftel a { min-height: 44px; padding: 8px 14px; border: 1px solid var(--canvas); border-radius: 8px; background: var(--deep); color: var(--paper); font-size: .9375rem; }
.ftel a:hover { color: var(--paper); text-decoration: underline; }
.agr, .fbot { color: var(--soft); font-size: .8125rem; line-height: 1.65; }
.agr { margin-top: 20px; }
.fbot { border-color: var(--mut); margin-top: 22px; padding-top: 18px; }

/* Seul le cadre des avis est arrondi ; ni iframe ni badge tiers ne sont ciblés. */
.favis { background: var(--paper); border-radius: 10px; margin: 18px 0; }

/* Les repères de maquette gardent leur contenu dans la palette proposée. */
.filler { background: var(--soft); color: var(--ink); border-color: var(--bronze); border-radius: 8px; }
.brouillon { background: var(--cool); color: var(--deep); border-color: var(--deep); border-radius: 8px; }
.aconf { background: var(--soft); color: var(--ink); }
.ph { background: var(--soft); color: var(--mut); border-color: var(--mut); border-radius: var(--radius); }
.ph figcaption { color: var(--mut); }

/* Le focus conserve ses 3 px, avec une version blanche sur les surfaces sombres. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.topbar a:focus-visible, .foot a:focus-visible { outline-color: var(--paper); }

/* Seules les couleurs et ombres changent au survol, sans déplacement du contenu. */
.btn, .topbar .cta, .pastille, .carte, .guidebloc .cols a { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }

/* La bande de confiance conserve une marge extérieure avant le petit écran. */
@media (max-width: 1180px) {
  /* Le cadre ne vient pas toucher les bords de la fenêtre. */
  .conf { margin-left: 16px; margin-right: 16px; }
}

/* Les composants suivent la grille existante à une colonne sous 900 px. */
@media (max-width: 900px) {
  /* La colonne de conseil reprend sa position naturelle après le contenu. */
  .grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .aside { position: static; }
  /* Les preuves et services retrouvent des espacements plus courts. */
  .preuves, .reassur, .guidebloc .cols { gap: 12px; }
}

/* Les ajustements mobiles préservent le contenu et les cibles de 44 px. */
@media (max-width: 640px) {
  /* L'en-tête se répartit naturellement sans masquer les cinq liens ni les appels. */
  .headin { gap: 6px 16px; padding-top: 12px; padding-bottom: 12px; }
  .nav { width: 100%; gap: 0 12px; font-size: .875rem; }
  .tels { width: 100%; margin-left: 0; gap: 8px; }
  .pastille { flex: 1 1 160px; justify-content: center; }
  .topbar { padding: 10px 16px; }
  /* Le contenu garde 16 px de marge, sans gonfler l'espace avant les sessions. */
  .grid { padding-top: 22px; padding-bottom: 32px; }
  main h1 { font-size: 1.75rem; line-height: 1.2; }
  /* La photographie et son texte forment deux surfaces successives sur mobile. */
  .hero .photo img { height: 220px; border-radius: var(--radius) var(--radius) 0 0; }
  .hero .txt { position: static; max-width: none; margin: 0; padding: 22px 20px; border-radius: 0 0 var(--radius) var(--radius); }
  .hero h1 { font-size: 1.75rem; line-height: 1.2; }
  .hero p { font-size: .9375rem; }
  /* Les cadres réduisent leur retrait en conservant la hiérarchie typographique. */
  .essentiel, .visio, main ul.textes { padding: 16px; }
  .toc, .guidebloc, .formulaire { padding: 18px; }
  .carte .corps { padding: 18px 16px; }
  .carte .dessin { right: 12px; }
  .carte .corps strong { font-size: 1.125rem; }
  /* Le sommaire conserve des lignes actionnables de 44 px. */
  .toc a { display: block; min-height: 44px; padding: 8px 0; }
  .toc li { margin-bottom: 0; }
  /* Les quatre colonnes de sessions restent présentes avec un défilement de secours. */
  th, td { padding: 10px 8px; }
  .sessions th, .sessions td { padding: 10px 6px; font-size: .875rem; }
  .sessions td:nth-child(1), .sessions td:nth-child(2) { overflow-wrap: anywhere; }
  .sessions .btn.petit { padding: 8px 10px; font-size: .875rem; }
  /* Les schémas respectent leurs règles existantes de passage sur une colonne. */
  .schema { padding: 16px; }
  .schema-carte .carte-modele { padding: 12px 10px 8px; }
  .schema-carte th, .schema-carte td { padding-left: 6px; padding-right: 6px; }
  /* Les blocs de confiance et le pied restent lisibles sur toute la largeur utile. */
  .conf { padding: 18px; }
  .fcols { gap: 24px; }
  .foot { padding-top: 32px; }
}

/* Les préférences de mouvement réduit désactivent les transitions ajoutées. */
@media (prefers-reduced-motion: reduce) {
  /* Aucun effet animé n'est nécessaire à la compréhension des actions. */
  .btn, .topbar .cta, .pastille, .carte, .guidebloc .cols a { transition: none; }
}

/* Samy 22/10/2026 : correction de l'en-tete du theme (teleph. sur la meme ligne que le menu : 185 -> 133 px ; menu mobile sur 2 lignes a 390 px) */
@media (min-width: 1200px) { .headin { column-gap: 12px } .nav { column-gap: 8px } }
@media (max-width: 640px) { .nav { column-gap: 10px } }


/* Samy 22/10/2026 : le logo « la coche dans le verre » (07C) remplace le carre « LB » */
.logo .mark { width: 48px; height: 48px; background: none; border-radius: 0; display: block; flex: 0 0 48px }

/* Samy 22/10 : les sessions en cartes -- type de stage (dessin + nom + duree), date en pave, ville et departement, prix, bouton (demande de Samy) */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.sessions-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px }
.sessions-liste .session { --tc: #243B4A; --tf: #E8EEF2; display: grid; grid-template-columns: 196px 58px minmax(0, 1fr) auto auto; align-items: center; column-gap: 16px; margin: 0; padding: 0 14px 0 0; overflow: hidden; background: #fff; border: 1px solid #E4DCD2; border-radius: 12px; box-shadow: 0 1px 2px rgba(37, 39, 34, .05); transition: border-color .15s ease, box-shadow .15s ease }
.sessions-liste .session:hover { border-color: #CDBBA6; box-shadow: 0 4px 14px rgba(37, 39, 34, .08) }
/* une couleur par formation, contrastes texte/fond : 9,97 · 6,23 · 5,30 · 5,26 */
.sessions-liste .t2 { --tc: #9D2945; --tf: #F6E8EB }
.sessions-liste .t3 { --tc: #2E6B62; --tf: #E4F0ED }
.sessions-liste .t4 { --tc: #7A5A37; --tf: #F2EADF }
.session-type { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--tf); border-right: 3px solid var(--tc); color: var(--tc) }
.session-type svg { flex: 0 0 42px; width: 42px; height: 42px; fill: none; stroke: var(--tc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.session-type svg .pe-d-plein { fill: var(--tc); fill-opacity: .2; stroke: none }
.session-type svg .pe-d-reflet { stroke-opacity: .5 }
.session-type-nom { display: flex; flex-direction: column; font: 700 .875rem/1.25 var(--disp), sans-serif }
.session-type-nom small { font: 500 .8125rem/1.3 var(--body), sans-serif; margin-top: 3px }
.session-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; padding: 6px 0 7px; border-radius: 9px; background: var(--deep); color: #fff; line-height: 1.1; text-align: center }
.session-date .j { font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85 }
.session-date .n { font: 700 1.375rem/1.15 var(--disp), sans-serif }
.session-date .m { font-size: .75rem; color: #F3D9C2 }
.session-lieu { display: flex; flex-direction: column; min-width: 0; padding: 12px 0; line-height: 1.35 }
.session-lieu strong { font: 700 1.0625rem/1.3 var(--disp), sans-serif; color: var(--ink) }
.session-lieu span { font-size: .875rem; color: #5E5A53 }
.session-lieu .session-periode { color: #80603D; margin-top: 2px }
.session-prix { font: 700 1.1875rem/1 var(--disp), sans-serif; color: var(--ink); white-space: nowrap }
.sessions-liste .btn.petit { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center }
.session-periode .court { display: none }
@media (max-width: 640px) {
  /* en mobile, plus simple (Samy 22/10) : l'icone en petit carre, la ville, les dates sur une ligne, le departement ; prix et bouton a droite */
  .sessions-liste .session { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "type lieu prix" "type lieu btn"; column-gap: 12px; row-gap: 6px; padding: 12px }
  .session-type { grid-area: type; align-self: start; width: 48px; height: 48px; padding: 0; justify-content: center; border: 0; border-radius: 10px }
  .session-type svg { flex-basis: 32px; width: 32px; height: 32px }
  .session-type-nom, .session-date { display: none }
  .session-lieu { grid-area: lieu; align-self: center; padding: 0 }
  .session-lieu strong { font-size: 1rem; overflow-wrap: anywhere }
  .session-lieu .session-periode { order: 1; margin: 1px 0; color: var(--ink) }
  .session-lieu > span:not(.session-periode) { order: 2; font-size: .8125rem }
  .session-periode .long { display: none }
  .session-periode .court { display: inline }
  .session-prix { grid-area: prix; justify-self: end; align-self: end; font-size: 1.0625rem }
  .sessions-liste .btn.petit { grid-area: btn; justify-self: end; align-self: start }
}

/* Samy 22/10 : en-tete -- plus d'air entre les liens du menu ; le lien de la page en cours reste grenat, sans soulignement */
.nav a.on { text-decoration: none }
/* sur une seule ligne, logo + 5 liens + 2 telephones laissent 10 px entre les liens : le menu passe sur sa propre ligne, sous le logo */
@media (min-width: 1024px) {
  .headin { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo tels" "nav nav"; align-items: center; row-gap: 4px; column-gap: 24px }
  .logo { grid-area: logo }
  .tels { grid-area: tels; justify-self: end; width: auto; margin-left: 0 }
  .nav { grid-area: nav; width: auto; column-gap: 30px; font-size: .9375rem }
}

/* Samy 22/10 : colonne « Une question ? » -- sans filets, plus de padding, prix a droite de chaque formation */
.aside { padding: 24px 24px 26px }
.aside h3 { margin: 0 0 6px }
.aside .intro { margin: 0 0 14px }
.aside .reg { border-bottom: 0; padding: 0; margin: 0 }
.aside .reg a { min-height: 40px }
.aside h3.aside-formations { margin-top: 22px; margin-bottom: 8px }
.aside .liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 0 }
.aside .liste li a { line-height: 1.45 }
.aside .liste li .mut { white-space: nowrap }
.aside .cta { margin-top: 20px }

/* Samy 22/10 : colonne « Une question ? » en deux tons -- haut bleu-gris avec icone telephone ; formations avec leur dessin et leur couleur */
.aside { padding: 0; overflow: hidden }
.aside-q { padding: 22px 24px 18px; background: var(--cool); border-bottom: 1px solid #DCE4E8 }
.aside-f { padding: 20px 24px 24px }
.aside .reg { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0 12px 0 6px; background: var(--paper); border-radius: 10px }
.aside .reg:last-child { margin-bottom: 0 }
.aside .reg > span:nth-child(2) { flex: 1 1 auto; color: var(--deep); font-weight: 500 }
.aside .reg a { min-height: 44px }
.reg-ico { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff }
.reg-ico svg { fill: currentColor; width: 16px; height: 16px }
.aside h3.aside-formations { margin-top: 0 }
.aside .liste li { --tc: #243B4A; --tf: #E8EEF2; display: block; padding: 4px 0 }
.aside .liste .t2 { --tc: #9D2945; --tf: #F6E8EB }
.aside .liste .t3 { --tc: #2E6B62; --tf: #E4F0ED }
.aside .liste .t4 { --tc: #7A5A37; --tf: #F2EADF }
.liste-ico { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: var(--tf) }
.liste-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--tc); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.liste-ico svg .pe-d-plein { fill: var(--tc); fill-opacity: .2; stroke: none }
.liste-ico svg .pe-d-reflet { stroke-opacity: .5 }
.aside .liste li a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none }
.liste-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35 }
.liste-txt .nom { font: 600 .875rem/1.35 var(--disp), sans-serif }
.liste-txt .det { font-size: .8125rem; font-weight: 600; color: var(--tc) }
.liste-txt .det .prix { color: inherit; font-weight: 700 }
.aside .liste li a:hover .nom { color: var(--tc) }

/* Samy 23/10 : remarques de Nicolas reportees sur bar.com (MISSION-SECONDAIRE/PILOTAGE.md, A6) */
/* N2 (19/10) « agrandir le header pour mieux voir le telephone » : icone, prenom, numero en gros */
.pastille { gap: 8px; align-items: center; padding: 8px 16px }
.pastille svg { flex: 0 0 18px; width: 18px; height: 18px; fill: currentColor }
.pastille .pn { font-weight: 500; color: var(--deep) }
.pastille .pt { font: 700 1.25rem/1.2 var(--disp), sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap }
.burger { display: none }
/* sous 1024 px : logo et bouton « Menu » sur une ligne, les deux numeros cote a cote, le menu replie */
@media (max-width: 1023px) {
  .headin { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo burger" "tels tels" "nav nav"; align-items: center; row-gap: 10px; column-gap: 12px }
  .logo { grid-area: logo }
  .tels { grid-area: tels; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 0 }
  .nav { grid-area: nav; width: 100% }
  .js .burger { grid-area: burger; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--deep); border-radius: 8px; background: var(--paper); color: var(--deep); font: 600 .875rem/1 var(--disp), sans-serif; cursor: pointer }
  .burger svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
  .js .nav { display: none }
  .js .nav.ouvert { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 6px }
  .js .nav.ouvert a { min-height: 48px; font-size: 1rem }
}
@media (max-width: 640px) {
  /* le bandeau sombre garde seulement son bouton */
  .topbar > span { display: none }
  .topbar { padding: 6px 16px }
  .pastille { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 52px; padding: 6px 12px }
  .pastille svg { display: none }
  .pastille .pn { font-size: .75rem; line-height: 1.25 }
  .pastille .pt { font-size: 1.0625rem }
  /* le badge Avis Garantis flottant recouvrait le texte ; le cadre d'avis reste dans le pied de page.
     Le script du widget injecte apres nous « .agJsWidget { display: block !important } » : selecteur plus precis */
  html body div.agJsWidget { display: none !important }
}
/* N17 (20/10) « dire partout ou c'est possible que la formation peut etre en visio » : une ligne dans la colonne */
.aside-visio { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; background: var(--paper); border-radius: 10px; font-size: .8125rem; line-height: 1.45; color: var(--deep) }
.aside-visio svg { flex: 0 0 22px; width: 22px; height: 22px; fill: var(--deep) }
/* regle de pe.fr (20/10) : la formation de la page en cours n'est pas cliquable */
.aside .liste li .ici { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 -8px; padding: 0 8px; border-radius: 10px; background: var(--tf); color: var(--ink) }
.conf-bloc.ici { cursor: default }
/* Samy 23/10 : agrement comme pe.com -- le numero de l'arrete en bouton plein, lien vers la liste officielle de la prefecture */
.preuves a.agr-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--paper); font-weight: 700; font-size: .875rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere }
.preuves a.agr-btn:hover { background: var(--accent-hover); color: var(--paper) }
.agr a { color: inherit; text-decoration: underline; text-underline-offset: .2em }
/* Samy 23/10 : « 99 % de satisfaction » dans le bandeau du haut, comme pe.fr (ordinateur ; masque en mobile avec la phrase) */
.topbar .satis { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .28); white-space: nowrap }
.topbar .satis strong { font-weight: 700 }
/* entre 641 et 1023 px, la phrase passait sur 2 lignes : on garde « 99 % » et le bouton sur une ligne */
@media (min-width: 641px) and (max-width: 1023px) { .topbar > span:first-child { display: none } .topbar .satis { padding-left: 0; border-left: 0 } }
/* Samy 23/10 : places restantes sous 5 sur les cartes de sessions (production, lib/bar2.php ; libelle repris du moteur) */
.session-places { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 700; color: var(--accent) }
/* Samy 23/10 : a 320 px, les deux numeros cote a cote depassaient de 9 px : colonnes qui peuvent retrecir, numero un peu plus petit */
@media (max-width: 360px) { .tels { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pastille { padding: 6px 10px } .pastille .pt { font-size: 1rem } }
/* Samy 23/10 : prix barre du pack (lib/bar2.php ; desactive tant que Nicolas n'a pas donne son accord) */
.prix-barre { display: block; color: var(--mut); font-size: .8125rem; font-weight: 500; text-align: right }
/* Samy 23/10 : « pourquoi le tableau ne va pas sur toute la largeur ? » -- les cartes de sessions s'arretaient a 68 caracteres
   (regle des paragraphes « main li ») et la liste a 760 px : elles prennent toute la largeur du contenu, partout */
.sessions { max-width: none }
.sessions-liste .session { max-width: none }
/* Samy 23/10 : « des fois les H1 sont trop gros […] comme sur les sites principaux, surtout sur mobile ». Mesure du 23/10 :
   pe.fr = H1 30 px sur ordinateur, 20 px sur telephone, H2 26 / 18 px ; bar.com etait a 40 px et 28 px (4 lignes sur l'accueil).
   Titres ramenes a une echelle proche des sites principaux, un cran au-dessus pour la police de bar.com. */
main h1 { font-size: 2rem; line-height: 1.2 }
.hero h1 { font-size: 2.25rem; line-height: 1.15 }
main h2 { font-size: 1.5rem }
main h3 { font-size: 1.125rem }
@media (max-width: 1023px) {
  main h1 { font-size: 1.625rem }
  .hero h1 { font-size: 1.75rem }
  main h2 { font-size: 1.3125rem }
}
@media (max-width: 640px) {
  main h1 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 12px }
  .hero h1 { font-size: 1.5rem; line-height: 1.2 }
  main h2 { font-size: 1.1875rem; margin-top: 26px }
  main h3 { font-size: 1.0625rem }
  .sessions-titre { font-size: 1.0625rem }
}
/* Samy 23/10 (tests mobile) : 5 tableaux du guide depassaient de leur cadre a 320 et 390 px (on les faisait defiler de cote) : texte et marges
   reduits sur telephone, ils tiennent dans la largeur */
@media (max-width: 640px) { .tbl table { font-size: .8125rem } .tbl th, .tbl td { padding: 7px 8px; hyphens: auto; overflow-wrap: anywhere } }
/* Samy 23/10 (tests mobile) : sur telephone, la photo de l'accueil (220 px) repoussait le titre sous la ligne de flottaison : 150 px */
@media (max-width: 640px) { .hero .photo img { height: 150px } }