/* Auto-école Bugatti 3 : tout ce qui est sous le premier écran (le premier écran est dans src/styles/critique.css, en ligne).
   Fond blanc dominant, anthracite #2F3434 des enseignes 2026, rouge du « 3 » du logo #B5181B réservé aux actions, aux mots clés et à la ligne de route.
   Titres Montserrat 600 (le « AUTO ÉCOLE » du logo et des vitrines), texte et interface Open Sans (les flyers). Rayon 4 px partout.
   Les jetons et le bouton sont repris ici : la page de connexion de l'admin charge cette feuille seule. */
:root{
  --accent:#B5181B;--accent-fonce:#961316;--rouge-nuit:#FF7A7C;
  --ink:#2F3434;--noir:#161818;--text:#2F3434;--muted:#5E6464;
  --paper:#FFFFFF;--band:#F5F5F3;--line:#E3E4E1;--line-fort:#CFD2CF;--line-dark:rgba(255,255,255,.16);--on-dark:#C9CDCD;
  --display:'Montserrat',system-ui,sans-serif;--ui:'Open Sans',system-ui,sans-serif;--body:'Open Sans',system-ui,sans-serif;
  --r:4px;--gutter:clamp(16px,5vw,64px);
  --paper-2:#E3E4E1;--cream:#F5F5F3;--wine:#B5181B;--green-ink:#2F3434;
}
body{font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 24px;border-radius:var(--r);background:var(--accent);color:#fff;font-family:var(--ui);font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em;line-height:1.2;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px var(--accent);transition:background .2s,color .2s,box-shadow .2s;text-align:center;text-decoration:none}
.btn:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn:disabled{opacity:.6;cursor:default}

/* Titres de section */
.title.petit{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.head .lead{margin-top:0}
.note{font-size:.92rem;color:var(--muted)}
.puces{list-style:none;display:grid;gap:10px}
.puces li{position:relative;padding-left:22px;color:var(--text)}
.puces li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.puces b{font-weight:600}

/* Pourquoi Bugatti 3 : quatre arguments en ligne, filets verticaux */
.args{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.args li{padding:6px clamp(18px,2.2vw,32px);border-left:1px solid var(--line-fort);display:flex;flex-direction:column;gap:12px}
.args li:first-child{border-left:0;padding-left:0}
.args h3{font-size:1.3rem}
.args p{color:var(--muted);font-size:.98rem}
.args .lien{margin-top:auto;padding-top:6px;align-self:flex-start}

/* Nos formations : liste à filets, prix alignés à droite */
.formations-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:start}
.formations-intro{position:sticky;top:110px}
.formations-intro .lead{margin-bottom:28px}
.citation{margin:0 0 28px;padding-top:18px;position:relative;max-width:46ch}
.citation::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--accent)}
.citation p{color:var(--ink);font-size:1.06rem;line-height:1.55}
.citation p::before{content:"«\00A0"}
.citation p::after{content:"\00A0»"}
.citation footer{margin-top:8px;font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prix-liste{list-style:none;border-top:1px solid var(--ink)}
.prix-liste li{border-bottom:1px solid var(--line-fort)}
.prix-liste a,.prix-liste .sans-lien{display:grid;grid-template-columns:1fr auto 18px;grid-template-areas:"nom prix chevron" "detail prix chevron";column-gap:20px;align-items:center;padding:16px 0;min-height:68px}
.prix-liste .nom{grid-area:nom;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.3}
.prix-liste .detail{grid-area:detail;font-size:.88rem;color:var(--muted);line-height:1.45}
.prix-liste .detail:empty{display:none}
.prix-liste .prix{grid-area:prix;font-family:var(--ui);font-weight:600;font-size:1.06rem;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.prix-liste .prix small{font-weight:400;font-size:.82rem;color:var(--muted)}
.prix-liste .chevron{grid-area:chevron;color:var(--accent);font-size:1.5rem;line-height:1;transition:transform .25s}
.prix-liste a:hover .nom{color:var(--accent)}
.prix-liste a:hover .chevron{transform:translateX(4px)}
.formations-liste .note{margin-top:18px}
.formations-liste .note+.note{margin-top:8px}

/* Les agences : trois blocs égaux à filet */
.agences-section .head{max-width:760px}
.agence-nom a{transition:color .2s}
.agence-nom a:hover{color:var(--accent)}
.agence-note b{color:var(--ink);font-weight:600}
.agence-note:hover span{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.agence-adresse{color:var(--text)}
.agence-tel a{border-bottom:2px solid transparent;transition:border-color .2s}
.agence-tel a:hover{border-bottom-color:var(--accent)}
.agence-tel .ou{font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--muted);margin:0 4px}
.agence-mail a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-fort);text-underline-offset:4px;overflow-wrap:anywhere}
.agence-mail a:hover{text-decoration-color:var(--accent)}
.agence-horaires{background:var(--band);border-radius:var(--r);padding:16px 18px}
.agence>.agence-horaires{flex:1}
.agence-horaires h3{font-size:1rem;margin-bottom:10px}
.agence-horaires ul{list-style:none;display:grid;gap:4px}
.agence-horaires li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;font-size:.92rem;padding:3px 0}
.agence-horaires li span:first-child{color:var(--muted)}
.agence-horaires li span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.agence-horaires li.aujourdhui span{color:var(--ink);font-weight:600}
.jour{font-family:var(--ui);font-weight:600;font-size:.82rem;margin-bottom:8px;color:var(--ink)}
.jour.ferme{color:var(--muted)}
.jour::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:#2E8B57;vertical-align:1px}
.jour.ferme::before{background:var(--line-fort)}
.agence-liens{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:auto;padding-top:6px}
.agence-agrement{font-size:.82rem;color:var(--muted)}
.vacances{margin-top:32px;max-width:70ch}
.agences-section:has(+.histoire){padding-bottom:clamp(48px,6vw,80px)}
.agences-section+.histoire{padding-top:clamp(48px,6vw,80px)}

/* Depuis 2011 : texte et points à gauche, photos à droite */
.histoire-grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(40px,6vw,96px);align-items:center}
.histoire-texte .lead{color:var(--text);font-size:1.04rem}
.points{list-style:none;display:grid;gap:18px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.points h3{font-size:1.08rem;margin-bottom:4px}
.points p{color:var(--muted);font-size:.96rem}
.histoire-photos{position:relative;padding-bottom:110px}
.histoire-photos figure{margin:0}
.histoire-photos .grande .pic{aspect-ratio:4/3}
.histoire-photos .petite{position:absolute;left:-48px;bottom:0;width:min(46%,300px);background:var(--paper);padding:10px 10px 0}
.histoire-photos .petite .pic{aspect-ratio:1}
.histoire-photos figcaption{font-size:.82rem;color:var(--muted);padding:8px 0 10px}
.histoire-photos .grande figcaption{text-align:right}
.pic{display:block;border-radius:var(--r);overflow:hidden;background:var(--band);position:relative}
.pic picture,.pic img{width:100%;height:100%;object-fit:cover}

/* Avis : note en grand, trois citations à filets */
.avis-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(28px,4vw,44px)}
.note-grande{display:flex;align-items:center;gap:14px;flex:none}
.note-grande b{font-family:var(--display);font-weight:600;font-size:clamp(3rem,5vw,4.2rem);line-height:1;color:var(--ink)}
.note-grande span{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
.note-grande:hover span{color:var(--ink)}
.quotes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr)}
.quotes li{padding:6px clamp(20px,2.4vw,36px);border-left:1px solid var(--line-fort);display:flex;flex-direction:column;gap:18px}
.quotes li:first-child{border-left:0;padding-left:0}
.quotes p{font-size:1.04rem;line-height:1.6;color:var(--ink)}
.quotes p::before{content:"«\00A0"}
.quotes p::after{content:"\00A0»"}
.quotes footer{margin-top:auto;font-family:var(--ui);font-weight:600;font-size:.86rem}
.avis-fiches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 32px;margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:1px solid var(--line-fort)}
.fiche{display:grid;gap:10px}
.fiche p{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:.9rem}
.fiche-liens{gap:8px 22px!important}
.avis-fiches .ville{font-family:var(--display);font-weight:600;font-size:1rem}
.avis-fiches .n{color:var(--muted)}
.avis-fiches .fiche:only-child{grid-column:1/-1}

/* FAQ : accordéon (app.js), un seul ouvert, ouverture et fermeture qui glissent */
.faq-wrap{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line-fort)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-fort);font-family:var(--body);font-weight:400;font-size:1.3rem;line-height:1;color:var(--accent);transition:transform .35s cubic-bezier(.4,0,.2,1),background .2s}
.faq details[open]:not(.ferme) summary::after{transform:rotate(45deg)}
.faq summary:hover::after{background:var(--band)}
.faq details>div{overflow:hidden}
.faq details p{padding:0 48px 22px 0;color:var(--muted);max-width:68ch}

/* Partenaires : bande fine */
.partenaires{padding-block:44px;border-top:1px solid var(--line)}
.partenaires-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.partenaires ul{list-style:none;display:flex;align-items:center;gap:clamp(28px,5vw,64px)}
.partenaires img{height:56px;width:auto;opacity:.8;transition:opacity .2s}
.partenaires a:hover img{opacity:1}

/* Pied de page quatre colonnes */
footer.site{background:var(--ink);color:#fff;padding-top:clamp(56px,7vw,88px)}
.foot{display:grid;grid-template-columns:1.2fr 1.3fr 1fr 1fr;gap:40px}
.foot h2{font-family:var(--ui);font-weight:600;text-transform:uppercase;font-size:.7rem;letter-spacing:.14em;color:var(--on-dark);margin-bottom:18px}
.foot ul{list-style:none;display:grid;gap:10px;font-size:.94rem}
.foot ul a:hover{color:var(--rouge-nuit)}
.foot-marque .brand img{height:42px}
.foot-marque p{margin-top:18px;color:var(--on-dark);font-size:.94rem;max-width:30ch}
.foot .rs{display:flex;gap:20px;margin-top:18px;font-family:var(--ui);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.foot .rs a:hover{color:var(--rouge-nuit)}
.foot-agences{gap:14px!important}
.foot-agences li{display:grid;gap:1px}
.foot-agences .ville{font-family:var(--display);font-weight:600;font-size:1rem}
.foot-agences span{color:var(--on-dark);font-size:.88rem}
.foot-agences li>a:last-child{font-size:.9rem}
.bottom{position:relative;display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:56px;padding-top:22px;padding-bottom:28px;font-size:.82rem;color:var(--on-dark)}
.bottom::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line-dark)}
.bottom nav{display:flex;gap:8px 24px;flex-wrap:wrap}
.bottom a:hover{color:#fff}

/* Page d'agence */
.agence-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,6vw,96px);align-items:start}
.agence-prepare .puces{font-size:1.06rem;gap:12px}
.prix-cle{margin-top:28px;padding:18px 20px;background:var(--band);border-radius:var(--r)}
.prix-cle b{font-weight:600;white-space:nowrap}
.liens-agence{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}
.agence-infos{display:flex;flex-direction:column;gap:14px}
.agence-infos .title{max-width:none}
.agence-infos .route{margin-bottom:14px}
.agence-photo{aspect-ratio:4/3;margin-bottom:6px}
.agence-infos .agence-adresse{font-size:1.06rem}
.agence-infos .agence-horaires{margin-top:6px}
.agence-infos .agence-horaires .note{margin-top:12px;font-size:.84rem}
.autres .route{margin-bottom:36px}

/* Prestations : onglets et tableaux */
.onglets button::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.onglets button:hover,.onglets button[aria-selected=true]{color:var(--ink)}
.onglets button[aria-selected=true]::after{transform:scaleX(1)}
.table-wrap{overflow-x:auto}
.tarifs-table{width:100%;border-collapse:collapse;font-size:.98rem}
.tarifs-table th,.tarifs-table td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.tarifs-table thead th{font-family:var(--ui);font-weight:600;text-transform:uppercase;font-size:.7rem;letter-spacing:.12em;color:var(--muted);border-bottom:1px solid var(--ink);padding-top:0}
.tarifs-table tbody th{font-weight:400;padding-right:24px}
.tarifs-table td{text-align:right;white-space:nowrap;padding-left:24px}
.tarifs-table.deux thead th+th{text-align:right;width:22%}
.tarifs-table .p{font-variant-numeric:tabular-nums}
.tarifs-table .h{display:block;font-size:.82rem;color:var(--muted)}
.tarifs-table th .h{display:inline;margin-left:8px}
.tarifs-table tfoot th,.tarifs-table tfoot td{border-top:2px solid var(--ink);border-bottom:0;padding-top:16px;font-family:var(--display);font-weight:600;font-size:1.12rem}
.forfaits{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
.forfait h3{font-size:1.2rem;margin-bottom:4px}
.forfait-desc{color:var(--muted);font-size:.92rem;margin-bottom:6px}
.forfait .tarifs-table{margin-top:10px}
.panneau-tarifs>.note{margin-top:16px}
.encart{margin-top:28px;padding:22px 24px;background:var(--band);border-radius:var(--r);max-width:760px}
.encart h3{font-size:1.16rem;margin-bottom:8px}
.encart p{color:var(--muted)}
.encart p+p{margin-top:12px}
.comprend-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.comprend-grid h3{font-size:1.2rem;margin-bottom:16px}
.plus-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.plus-grid .citation{margin-top:28px}
.bas-page{padding-block:clamp(56px,7vw,88px)}
.bas-page-in{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap}
.bas-page .actions{display:flex;gap:12px;flex-wrap:wrap}

/* Inscription */
.doc-grid{display:grid;grid-template-columns:7fr 4fr;gap:clamp(40px,6vw,96px);align-items:start}
.cases{list-style:none;display:grid;gap:12px;margin-bottom:32px}
.cases li{position:relative;padding-left:32px}
.cases li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:3px;box-shadow:inset 0 0 0 2px var(--accent)}
.cases b{font-weight:600}
.doc-liste h3{font-size:1.2rem;margin-bottom:14px}
.doc-envoi{position:sticky;top:110px;display:grid;gap:20px}
.envoi{background:var(--band);border-radius:var(--r);padding:26px 26px 24px}
.envoi .route{margin:14px 0 18px}
.envoi p{color:var(--muted);margin-bottom:16px}
.envoi .qr{width:140px;height:140px;margin-top:6px}
.ensuite h3{font-size:1.1rem;margin-bottom:6px}
.ensuite p{color:var(--muted)}

/* Examen */
.etapes span{color:var(--muted)}
.examen .encart{margin-top:20px}

/* Label qualité */
.label-agences{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);margin-bottom:clamp(48px,6vw,80px)}
.label-col h3{font-size:1.3rem;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.docs{list-style:none}
.docs li{border-bottom:1px solid var(--line)}
.docs a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;min-height:52px}
.docs a span{transition:color .2s}
.docs a:hover span{color:var(--accent)}
.docs small{flex:none;font-family:var(--ui);font-weight:600;font-size:.64rem;letter-spacing:.12em;color:var(--accent);padding:3px 7px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--accent)}
.docs.communs{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3vw,40px);border-top:2px solid var(--ink)}

/* Infos pratiques : liens utiles */
.utiles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.utiles a,.utiles div{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:2px solid var(--ink);height:100%}
.utiles b{font-family:var(--display);font-weight:600;font-size:1.1rem}
.utiles span{color:var(--muted);font-size:.94rem}
.utiles a:hover b{color:var(--accent)}

/* Fenêtre Appeler / Itinéraire (téléphone) */
.panneau{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:85vh;border:0;border-radius:12px 12px 0 0;padding:0 0 env(safe-area-inset-bottom);background:var(--paper);color:var(--text)}
.panneau::backdrop{background:rgba(14,16,16,.55)}
.panneau[open]{animation:monte .3s cubic-bezier(.4,0,.2,1)}
@keyframes monte{from{transform:translateY(100%)}to{transform:none}}
.panneau-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px 20px;border-bottom:1px solid var(--line)}
.panneau-titre{font-family:var(--display);font-weight:600;font-size:1.1rem}
.fermer{width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.fermer span,.fermer span::before{position:absolute;left:12px;top:21px;width:20px;height:2px;background:var(--ink);transform:rotate(45deg)}
.fermer span::before{content:"";left:0;top:0;transform:rotate(90deg)}
.panneau ul{list-style:none;padding:4px 20px 16px}
.panneau li{border-bottom:1px solid var(--line)}
.panneau li:last-child{border-bottom:0}
.panneau li a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;min-height:64px}
.panneau li b{font-family:var(--display);font-weight:600}
.panneau li a>span:nth-of-type(1){text-align:right;font-weight:600;color:var(--accent)}
.panneau .jour{grid-column:1/-1;margin:0;font-weight:400;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.panneau[open]{animation:none}}

.actions-404{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.actions-404 .btn{text-decoration:none}

/* Mouvement : états de départ dans critique.css (html:not(.no-gsap)), animés par app.js */

@media(max-width:1180px){.foot{grid-template-columns:1fr 1fr;row-gap:44px}}
@media(max-width:960px){
  .args{grid-template-columns:1fr 1fr;row-gap:32px}.args li:nth-child(3){border-left:0;padding-left:0}
  .formations-grid,.histoire-grid,.demande-grid,.agence-grid,.doc-grid,.examen-grid,.plus-grid,.faq-wrap{grid-template-columns:1fr}
  .formations-intro,.doc-envoi{position:static}
  .agences,.agences.deux{grid-template-columns:1fr}
  .histoire-photos{padding-bottom:0}.histoire-photos .petite{position:static;width:60%;margin-top:14px;padding:0}
  .quotes{grid-template-columns:1fr}.quotes li{border-left:0;padding:22px 0;border-top:1px solid var(--line-fort)}.quotes li:first-child{border-top:0;padding-top:0}
  .avis-fiches{grid-template-columns:1fr}
  .avis-head{flex-direction:column;align-items:flex-start}
  .label-agences,.docs.communs,.utiles,.comprend-grid,.forfaits{grid-template-columns:1fr}
  .partenaires-in{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .args{grid-template-columns:1fr}.args li{border-left:0;padding:0 0 22px;border-bottom:1px solid var(--line)}.args li:last-child{border-bottom:0}
  .foot{grid-template-columns:1fr}
  .tarifs-table{font-size:.92rem}.tarifs-table tbody th{padding-right:12px}.tarifs-table td{padding-left:12px}
  .tarifs-table th .h{display:block;margin-left:0}
  .onglets{display:grid;grid-template-columns:1fr 1fr;border-bottom:0;gap:0}
  .onglets button{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--line-fort)}.onglets button::after{left:0;right:12px}
  .bas-page .actions{flex-direction:column;align-items:stretch;width:100%}
  .faq details p{padding-right:0}
  .partenaires ul{gap:24px}.partenaires img{height:46px}
}
.agence-prepare .agence-horaires{margin-top:36px}
.agence-prepare .agence-horaires .note{margin-top:12px;font-size:.84rem}
.tarifs-table th .nom{display:block;font-family:var(--display);font-weight:600;font-size:1.04rem;margin-bottom:2px}
.tarifs-table th .nom+.h{display:block;margin-left:0}
@media(max-width:420px){.tarifs-table.deux thead th{font-size:.6rem;letter-spacing:.06em;white-space:normal;line-height:1.35}.tarifs-table.deux thead th+th{width:auto}.tarifs-table td{padding-left:8px}.tarifs-table tbody th{padding-right:8px;font-size:.9rem}.tarifs-table tfoot th,.tarifs-table tfoot td{font-size:1rem}}