/* CER Goulay – charte du réseau CER (maquette CER_auto-ecole_site) */
:root {
  --anthracite: #2f2f2d;
  --corail: #ec634c;
  --corail-fonce: #d24f39;
  --creme: #f4f4ed;
  --beige: #f7d9a4;
  --gris: #707070;
  --ligne: #e3e3da;
  --rayon: 22px;
  --rayon-s: 14px;
  --ombre: 0 10px 30px rgba(47, 47, 45, .08);
  --ombre-forte: 0 18px 44px rgba(47, 47, 45, .16);
  --max: 1220px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--anthracite);
  background: var(--creme);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--anthracite); color: #fff; padding: 8px 14px; border-radius: 99px; z-index: 100; }
.skip:focus { left: 8px; }
.center { text-align: center; }
.muted { color: var(--gris); }
.small { font-size: .85rem; }
:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; }

/* ---------- Titres CER : gras italique, fin en corail ---------- */
.t-cer { font-weight: 800; font-style: italic; font-size: clamp(1.45rem, 3.2vw, 2.2rem); letter-spacing: -.01em; }
.t-cer em { color: var(--corail); font-style: italic; }
.t-xl { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.t-clair { color: #fff; }
.sous-titre { font-weight: 700; font-size: 1.15rem; margin: 2.2em 0 1em; display: flex; align-items: center; gap: 12px; }
.sous-titre::after { content: ""; flex: 1; height: 2px; background: var(--ligne); }
.lead { font-size: 1.08rem; }
.lead-c { max-width: 640px; margin: 0 auto 2em; text-align: center; color: var(--gris); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 24px 13px 14px; border-radius: 99px; border: 2px solid transparent;
  font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.2;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--anthracite); color: #fff; }
.btn-dark svg { background: var(--corail); }
.btn-dark:hover { box-shadow: var(--ombre-forte); }
.btn-line { background: #fff; color: var(--anthracite); border-color: var(--anthracite); }
.btn-line svg { background: var(--creme); }
.btn-line:hover { background: var(--anthracite); color: #fff; }
.btn-line:hover svg { background: var(--corail); }
.btn-line-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-line-light svg { background: var(--corail); }
.btn-line-light:hover { background: #fff; color: var(--anthracite); }
.btn-sm { padding: 8px 18px 8px 10px; font-size: .85rem; }
.btn-sm svg { width: 22px; height: 22px; }
.btn-lg { padding: 15px 30px 15px 16px; font-size: 1.02rem; }
.banniere-sombre .btn-dark { background: #fff; color: var(--anthracite); }
.lien { background: none; border: 0; padding: 0; color: var(--corail); font-weight: 700; text-decoration: underline; }
.lien-fort { color: var(--anthracite); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.lien-fort:hover { color: var(--corail); }
.lien-fleche { color: var(--corail); font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(244, 244, 237, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .3s; }
body.scrolle .site-header { box-shadow: 0 4px 22px rgba(47, 47, 45, .1); }
.header-inner { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.logo img { width: 128px; height: auto; }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.main-nav a { display: block; padding: 9px 15px; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background .2s, color .2s; }
.main-nav a:hover { background: #fff; }
.main-nav a[aria-current="page"] { background: var(--corail); color: #fff; }
.nav-contact { display: none; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.btn-pill-line { border: 2px solid var(--anthracite); background: transparent; border-radius: 99px; padding: 9px 18px; font-weight: 700; font-size: .88rem; white-space: nowrap; transition: background .2s, color .2s; }
.btn-pill-line:hover { background: var(--anthracite); color: #fff; }
.agence-pill { display: flex; flex-direction: column; background: var(--anthracite); color: #fff; text-decoration: none; border-radius: 99px; padding: 7px 20px; line-height: 1.25; }
.agence-pill span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.agence-pill strong { font-size: .95rem; white-space: nowrap; }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--anthracite); flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.menu-toggle span:not(.sr) { width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .hide-md { display: none; }
}
@media (max-width: 1020px) {
  .menu-toggle { display: flex; }
  .header-inner { min-height: 66px; }
  .header-cta { margin-left: auto; }
  .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--creme); padding: 8px 16px 20px; box-shadow: 0 14px 24px rgba(47, 47, 45, .12); display: none; }
  .main-nav.open { display: block; animation: deroule .3s var(--ease); }
  .main-nav ul { flex-direction: column; }
  .main-nav a { padding: 13px 18px; font-size: 1rem; }
  .nav-contact { display: block; }
}
@media (max-width: 520px) {
  .logo img { width: 104px; }
  .agence-pill { padding: 6px 14px; }
  .agence-pill span { display: none; }
  .agence-pill strong { font-size: .85rem; }
}
@keyframes deroule { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Sections & cartes ---------- */
.section { padding: 56px 0; }
.section-tight { padding: 22px 0; }
@media (min-width: 900px) { .section { padding: 76px 0; } }
.carte { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); }
.pad { padding: 28px; }
.carte-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.carte-tete img { width: 54px; }
.carte-tete h3 { margin: 0; }
.grille-2, .grille-3, .grille-4 { display: grid; gap: 22px; }
@media (min-width: 700px) { .grille-2 { grid-template-columns: repeat(2, 1fr); } .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } .grille-4 { grid-template-columns: repeat(4, 1fr); } }

/* puces beiges de la maquette */
.puces { list-style: none; padding: 0; margin: 0 0 1.2em; }
.puces li { position: relative; padding: 5px 0 5px 34px; }
.puces li::before { content: ""; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--beige) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 16.2-4-4L4 13.7l5.5 5.5L20 8.7l-1.5-1.5z' fill='%232f2f2d'/%3E%3C/svg%3E") center / 15px no-repeat; }
.puces.petites li { font-size: .92rem; padding-left: 30px; }
.puces.petites li::before { width: 19px; height: 19px; background-size: 13px; }

/* ---------- Héros (panneau blanc arrondi) ---------- */
.hero-wrap { padding: 18px 0 10px; }
.hero-panneau { background: #fff; border-radius: 30px; box-shadow: var(--ombre); display: grid; overflow: hidden; }
.hero-texte { padding: 34px 24px 30px; }
.hero-sous { font-size: 1.05rem; margin-bottom: .6em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.hero-photo { position: relative; min-height: 300px; overflow: hidden; }
.hero-photo img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; }
.photo-cta { position: absolute; right: 18px; bottom: 18px; width: 118px; height: 118px; border-radius: 50%; border: 0; background: var(--corail); color: #fff; font-weight: 700; font-size: .82rem; line-height: 1.25; box-shadow: var(--ombre-forte); animation: pulse 2.8s ease-in-out infinite; }
.photo-cta:hover { background: var(--anthracite); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 99, 76, .45); } 50% { box-shadow: 0 0 0 16px rgba(236, 99, 76, 0); } }
@media (min-width: 900px) {
  .hero-panneau { grid-template-columns: 1.05fr 1fr; min-height: 520px; }
  .hero-texte { padding: 56px 50px; align-self: center; }
  .hero-photo { min-height: 100%; margin: 14px; border-radius: 24px; }
}
.page-panneau { grid-template-columns: 1fr; min-height: 0 !important; }
.page-panneau .hero-texte { padding: 36px 26px; }
.page-illu { display: none; }
@media (min-width: 900px) {
  .page-panneau { grid-template-columns: 1fr 260px; }
  .page-panneau .hero-texte { padding: 48px 50px; }
  .page-illu { display: flex; align-items: flex-end; justify-content: center; padding: 20px 30px 0; background: linear-gradient(180deg, #fff, var(--creme)); }
  .page-illu img { max-height: 210px; }
}
.breadcrumb { font-size: .82rem; color: var(--gris); margin-bottom: 14px; }
.breadcrumb a { color: var(--gris); }

/* bandeau de confiance + note Google */
.confiance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 6px 0; }
.confiance-txt { margin: 0; font-weight: 600; }
.confiance-txt em { font-weight: 800; font-style: italic; color: var(--corail); }
.note-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 99px; padding: 8px 20px 8px 8px; box-shadow: var(--ombre); flex-wrap: wrap; line-height: 1.15; }
.note-logo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.note-src { font-size: .72rem; }
.note-val { font-size: 1.7rem; font-weight: 800; }
.note-sur { font-size: .9rem; font-weight: 700; margin-left: -6px; }
.note-sur small { font-weight: 500; font-size: .66rem; color: var(--gris); }
.note-nb { font-size: .75rem; color: var(--gris); }
.etoiles { color: #f5b301; display: inline-flex; }
.etoiles svg { width: 16px; height: 16px; }
.section .note-badge { display: flex; width: max-content; max-width: 100%; margin: 0 auto 28px; }

/* ---------- Tuiles formations (photo + titre + flèche) ---------- */
.titre-perso { display: flex; align-items: center; gap: 18px; }
.titre-perso img { width: 86px; }
.titre-perso h2 { margin: 0; }
.tuile-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--ombre); isolation: isolate; }
.tuile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); z-index: -2; }
.tuile-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(47, 47, 45, 0) 35%, rgba(47, 47, 45, .88)); z-index: -1; }
.tuile-txt { position: absolute; left: 20px; right: 70px; bottom: 18px; display: flex; flex-direction: column; gap: 3px; }
.tuile-txt strong { font-size: 1.2rem; font-style: italic; font-weight: 800; line-height: 1.15; }
.tuile-txt > span { font-size: .85rem; opacity: .92; }
.tuile-fleche { position: absolute; right: 16px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--corail); display: grid; place-items: center; transition: transform .35s var(--ease), background .3s, color .3s; }
.tuile-fleche svg { width: 22px; height: 22px; }
.tuile-photo:hover img { transform: scale(1.07); }
.tuile-photo:hover .tuile-fleche { transform: translateX(4px) rotate(-45deg); background: #fff; color: var(--corail); }
.badge-corail { display: inline-block; vertical-align: middle; background: var(--corail); color: #fff; font-style: normal; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 99px; }

/* ---------- Bannières ---------- */
.banniere-cpf { display: grid; gap: 22px; padding: 26px; align-items: center; overflow: hidden; }
.cpf-img { width: 100%; border-radius: var(--rayon-s); aspect-ratio: 16 / 10; object-fit: cover; }
.cpf-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cpf-pied img { height: 46px; width: auto; }
@media (min-width: 860px) { .banniere-cpf { grid-template-columns: 360px 1fr; padding: 28px 44px 28px 28px; } }
.banniere-sombre { background: var(--anthracite); color: #fff; border-radius: var(--rayon); display: grid; overflow: hidden; }
.banniere-sombre > div { padding: 34px 28px; }
.banniere-sombre img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.prix-clair { font-size: 2rem; font-weight: 800; font-style: italic; color: var(--beige); }
@media (min-width: 860px) { .banniere-sombre { grid-template-columns: 1.2fr 1fr; } .banniere-sombre > div { padding: 48px; } }

/* ---------- Galerie ---------- */
.galerie { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.galerie figure { margin: 0; position: relative; border-radius: var(--rayon-s); overflow: hidden; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.galerie figure:hover img { transform: scale(1.06); }
.galerie figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(47, 47, 45, .82); color: #fff; font-size: .75rem; font-weight: 600; padding: 5px 10px; border-radius: 99px; max-width: calc(100% - 20px); opacity: 0; transform: translateY(6px); transition: .35s var(--ease); }
.galerie figure:hover figcaption { opacity: 1; transform: none; }
.g-large { grid-column: span 2; grid-row: span 2; }
.g-wide { grid-column: span 2; }
@media (min-width: 860px) { .galerie { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; } }

/* ---------- Avis ---------- */
.avis-section { background: #fff; }
.avis-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 360px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; scrollbar-width: none; }
.avis-rail::-webkit-scrollbar { display: none; }
.avis-card { scroll-snap-align: start; background: var(--creme); border-radius: var(--rayon); padding: 24px; display: flex; flex-direction: column; }
.avis-card header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.avis-card header strong { display: block; }
.avis-card header small { color: var(--gris); font-size: .75rem; }
.avis-card p { font-size: .93rem; flex: 1; }
.avis-tag { align-self: flex-start; background: var(--beige); border-radius: 99px; padding: 4px 12px; font-size: .75rem; font-weight: 700; }
.rail-nav { display: flex; justify-content: center; gap: 10px; margin: 6px 0 14px; }
.rail-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--anthracite); background: #fff; font-size: 1.2rem; font-weight: 700; transition: background .2s, color .2s; }
.rail-btn:hover { background: var(--anthracite); color: #fff; }

/* ---------- Agences ---------- */
.agence-card { overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.agence-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.agence-photo { aspect-ratio: 16 / 10; overflow: hidden; }
.agence-photo img { width: 100%; height: 100%; object-fit: cover; }
.agence-photo-vide { background: var(--beige); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 12px; }
.agence-photo-vide img { height: 72%; width: auto; object-fit: contain; }
.agence-photo-vide span { font-size: .75rem; font-weight: 700; padding: 0 10px 10px; text-align: center; }
.agence-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.agence-corps h3 { font-style: italic; font-weight: 800; margin-bottom: .4em; }
.agence-corps h4 { margin: 1.2em 0 .4em; font-size: .9rem; }
.agence-addr { display: flex; gap: 8px; font-size: .92rem; }
.agence-addr svg { color: var(--corail); margin-top: 3px; }
.agence-corps .btn { align-self: flex-start; margin-top: auto; }
.agrement { font-size: .72rem; color: var(--gris); margin: 12px 0 0; }
.map { margin-top: 16px; border-radius: var(--rayon-s); overflow: hidden; aspect-ratio: 16 / 9; }
.map iframe { width: 100%; height: 100%; border: 0; }
.hours { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hours th, .hours td { padding: 5px 0; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.hours th { font-weight: 600; padding-right: 12px; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 26px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1.6fr; align-items: start; } .faq-grid > h2 { position: sticky; top: 110px; } }
.faq details { background: #fff; border-radius: var(--rayon-s); margin-bottom: 12px; box-shadow: var(--ombre); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { width: 32px; height: 32px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; flex: none; transition: transform .3s var(--ease), background .3s; }
.faq details[open] .faq-plus { transform: rotate(45deg); background: var(--corail); color: #fff; }
.faq-r { padding: 0 22px 16px; color: #4a4a47; }
.faq-r ul { padding-left: 20px; margin: 0; }

/* ---------- Certifications ---------- */
.certifs-section { background: #fff; }
.certifs { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 60px; margin-top: 26px; }
.certifs figure { margin: 0; text-align: center; }
.certifs img { height: 92px; width: auto; margin: 0 auto 8px; }
.certifs figcaption { font-size: .78rem; color: var(--gris); font-weight: 600; }

/* ---------- Page formation ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 6px 6px 6px 18px; margin: 22px 0 6px; box-shadow: var(--ombre); }
.bascule span { font-weight: 700; font-size: .9rem; margin-right: 6px; }
.bascule a { padding: 8px 18px; border-radius: 99px; text-decoration: none; font-weight: 700; font-size: .9rem; border: 2px solid var(--anthracite); }
.bascule a[aria-current="page"] { background: var(--anthracite); color: #fff; }
.formules { display: grid; gap: 22px; margin-top: 30px; align-items: stretch; }
@media (min-width: 760px) { .formules.deux { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .formules:not(.un):not(.deux) { grid-template-columns: repeat(3, 1fr); } }
.formules.un { max-width: 520px; }
.formule { position: relative; background: #fff; border-radius: var(--rayon); padding: 30px 26px 26px; box-shadow: var(--ombre); border: 3px solid transparent; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.formule:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); }
.formule.vedette { border-color: var(--corail); }
.formule h3 { font-weight: 500; font-size: 1.05rem; }
.formule h3 strong { font-weight: 800; font-style: italic; font-size: 1.3rem; }
.formule-prix { font-size: 2.3rem; font-weight: 800; font-style: italic; line-height: 1; margin: .1em 0 .3em; }
.formule-prix small { display: block; font-size: .85rem; font-weight: 600; font-style: normal; color: var(--gris); margin-top: 8px; }
.formule-note { font-size: .82rem; color: var(--gris); margin-bottom: .6em; }
.formule .puces { margin-top: 10px; }
.formule .btn { margin-top: auto; align-self: flex-start; }
.pastille { position: absolute; top: -18px; right: 18px; background: var(--corail); color: #fff; border-radius: 99px; padding: 6px 14px; font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center; box-shadow: var(--ombre); }

.deroule { display: grid; gap: 24px; }
.deroule-intro { background: var(--anthracite); color: #fff; border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.deroule-intro h3 { font-style: italic; font-weight: 800; font-size: 1.4rem; }
.deroule-intro img { width: 110px; align-self: flex-end; }
.deroule-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 270px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.etape-carte { scroll-snap-align: start; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.etape-img { position: relative; aspect-ratio: 4 / 3; }
.etape-img img { width: 100%; height: 100%; object-fit: cover; }
.etape-img span { position: absolute; left: 14px; bottom: -18px; width: 44px; height: 44px; border-radius: 50%; background: var(--corail); color: #fff; font-weight: 800; font-style: italic; display: grid; place-items: center; border: 3px solid #fff; }
.etape-carte p { padding: 28px 18px 18px; margin: 0; font-size: .92rem; }
@media (min-width: 900px) { .deroule { grid-template-columns: 260px minmax(0, 1fr); } }

.volant { display: grid; gap: 24px; padding: 30px; align-items: center; margin-top: 24px; overflow: hidden; }
.volant h3 { font-weight: 700; font-size: 1.25rem; }
.volant h3 em { font-style: italic; font-weight: 800; color: var(--corail); }
.volant img { border-radius: var(--rayon-s); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 860px) { .volant { grid-template-columns: 1fr 1fr; padding: 40px 48px; } }
.volant-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding: 22px; margin-top: 18px; }
.volant-cta img { width: 70px; }

/* ---------- Tarifs ---------- */
.table-scroll { overflow-x: auto; border-radius: var(--rayon); box-shadow: var(--ombre); background: #fff; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 13px 18px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: middle; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table thead th { background: var(--anthracite); color: #fff; font-size: .85rem; }
.price-table th[scope="row"] { font-weight: 600; }
.price-table th[scope="row"] a { font-weight: 800; font-style: italic; text-decoration: none; display: block; }
.price-table th[scope="row"] a:hover { color: var(--corail); }
.price-table .muted { font-size: .82rem; font-weight: 500; }
.price-table .num { text-align: right; font-weight: 700; white-space: nowrap; }
.price-table tbody tr:hover { background: #fbfbf7; }
.compare { min-width: 520px; }
@media (max-width: 640px) {
  .compare { min-width: 0; }
  .price-table th, .price-table td { padding: 11px 12px; font-size: .9rem; }
  .price-table thead th { white-space: normal; }
}
.note { font-size: .85rem; color: var(--gris); margin-top: 14px; }
.autres { list-style: none; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .autres { grid-template-columns: repeat(2, 1fr); } }
.autres li { background: #fff; border-radius: var(--rayon-s); padding: 14px 20px; display: flex; justify-content: space-between; gap: 14px; align-items: center; box-shadow: var(--ombre); }
.autres strong { white-space: nowrap; }
.prose h2 { font-size: 1.2rem; margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }

/* ---------- Formulaires ---------- */
.obl { font-size: .78rem; color: var(--gris); margin-bottom: 10px; }
.champs { display: grid; gap: 12px; margin-bottom: 12px; }
@media (min-width: 560px) { .champs { grid-template-columns: 1fr 1fr; } }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--anthracite);
  border: 2px solid var(--ligne); background: #fff; border-radius: 99px; padding: 13px 20px;
  transition: border-color .2s;
}
textarea { border-radius: 20px; resize: vertical; margin-bottom: 12px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--anthracite); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--gris); margin: 6px 0 14px; }
.consent input { margin-top: 3px; accent-color: var(--corail); width: 18px; height: 18px; flex: none; }
.etape-titre { font-weight: 700; display: block; margin-bottom: 10px; }
.choix { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; display: inline-flex; }
.puce input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.puce span { padding: 7px 14px; border-radius: 99px; border: 2px solid var(--ligne); background: #fff; font-size: .82rem; font-weight: 600; transition: .2s; }
.puce input:checked + span { background: var(--anthracite); border-color: var(--anthracite); color: #fff; }
.puce input:focus-visible + span { outline: 3px solid var(--corail); outline-offset: 2px; }
.form-status { margin: 0; font-weight: 600; font-size: .9rem; }
.form-status.ok { color: #1f7a4a; }
.form-status.err { color: var(--corail-fonce); }
.tiroir-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }
.tiroir-pied .form-status { flex: 1; min-width: 180px; }

.contact-panneau { padding: 30px 22px; gap: 34px; }
@media (min-width: 960px) { .contact-panneau { grid-template-columns: 1fr 1.2fr; padding: 50px; } }
.contact-illu { width: 90px; margin-bottom: 14px; }
.contact-agences { list-style: none; padding: 0; margin: 0 0 20px; font-size: .9rem; }
.contact-agences li { display: flex; gap: 8px; padding: 6px 0; }
.contact-agences svg { color: var(--corail); margin-top: 3px; }
.form-contact { background: var(--creme); border-radius: var(--rayon); padding: 26px 22px; min-width: 0; }
@media (min-width: 560px) { .form-contact { padding: 30px; } }

/* ---------- Tiroirs latéraux (maquette « être rappelé », « pièces à fournir ») ---------- */
.tiroir { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.tiroir[hidden] { display: none; }
.tiroir-fond { position: absolute; inset: 0; background: rgba(47, 47, 45, .55); animation: fondu .3s; }
.tiroir-panneau { position: relative; width: min(640px, 100%); height: 100%; overflow-y: auto; background: #fff; padding: 34px 18px 40px; animation: glisse .4s var(--ease); overscroll-behavior: contain; }
@media (min-width: 560px) { .tiroir-panneau { padding: 44px 44px 50px; border-radius: 30px 0 0 30px; } }
.tiroir-x { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--creme); display: grid; place-items: center; }
.tiroir-x:hover { background: var(--anthracite); color: #fff; }
.tiroir-tete { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; padding-right: 40px; }
.tiroir-tete img { width: 70px; flex: none; }
.tiroir-tete h2 { font-size: 1.45rem; margin-bottom: .3em; }
.tiroir-tete p { font-size: .9rem; color: var(--gris); margin: 0; }
#td-titre { padding-right: 40px; font-size: 1.4rem; }
.etape { display: flex; gap: 12px; margin-bottom: 18px; }
.etape > div { flex: 1; min-width: 0; }
.num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--corail); color: #fff; font-weight: 800; font-style: italic; display: grid; place-items: center; font-size: .82rem; }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.creneaux fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.creneaux legend { font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.creneaux .puce { margin: 0 4px 4px 0; }
.creneaux .puce span { padding: 5px 11px; font-size: .76rem; }
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tuile { position: relative; background: var(--creme); border: 2px solid transparent; border-radius: var(--rayon-s); padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: .78rem; transition: .2s; min-width: 0; }
.tuile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.tuile img, .tuile-autre { height: 40px; width: auto; max-width: 100%; }
.tuile-autre { width: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; color: var(--corail); }
.tuile:has(input:checked) { border-color: var(--anthracite); background: #fff; }
.tuile:has(input:focus-visible) { outline: 3px solid var(--corail); outline-offset: 2px; }
.doc-bloc { display: flex; align-items: center; gap: 14px; background: var(--creme); border-radius: var(--rayon-s); padding: 12px 18px; margin: 18px 0 14px; }
.doc-bloc img { width: 60px; }
.doc-bloc h3 { margin: 0; font-style: italic; font-weight: 800; }
body.tiroir-ouvert { overflow: hidden; }
@keyframes glisse { from { transform: translateX(100%); } }
@keyframes fondu { from { opacity: 0; } }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--anthracite); color: #fff; padding: 54px 0 110px; border-radius: 40px 40px 0 0; }
@media (min-width: 900px) { .site-footer { padding-bottom: 30px; } }
.atouts-titre { text-align: center; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.atouts { list-style: none; padding: 0; margin: 22px 0 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.atouts li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; font-weight: 700; font-size: .9rem; }
.atouts svg { width: 64px; height: 64px; background: #fff; border-radius: 50%; padding: 10px; }
@media (min-width: 760px) { .atouts { grid-template-columns: repeat(4, 1fr); } }
.footer-grid { display: grid; gap: 30px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 34px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .footer-grid { grid-template-columns: 1.2fr .8fr 1.3fr 1fr; } }
.footer-logo { width: 140px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-agence { font-weight: 700; }
.footer-agence a { font-size: 1.3rem; text-decoration: none; color: var(--beige); }
.footer-mail { opacity: .85; font-size: .9rem; word-break: break-all; }
.footer-links, .footer-agences { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.footer-links li { padding: 4px 0; }
.footer-links a { text-decoration: none; opacity: .85; }
.footer-links a:hover { opacity: 1; color: var(--corail); }
.footer-agences li { padding: 0 0 10px; opacity: .85; }
.footer-agences a { text-decoration: none; }
.footer-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.suivez { margin: 18px 0 8px; font-weight: 700; font-size: .85rem; }
.socials a { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--anthracite); display: inline-grid; place-items: center; transition: background .2s, color .2s; }
.socials a:hover { background: var(--corail); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .15); margin: 30px 0 0; padding-top: 18px; font-size: .78rem; opacity: .7; }

/* ---------- Barre mobile ---------- */
.mobile-bar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: flex; gap: 8px; background: var(--anthracite); border-radius: 99px; padding: 6px; box-shadow: var(--ombre-forte); }
.bar-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px; border-radius: 99px; border: 0; background: transparent; color: #fff; text-decoration: none; font-weight: 700; font-size: .88rem; }
.bar-primary { background: var(--corail); }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* ---------- Animations ---------- */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
.js .revele.vu { opacity: 1; transform: none; }
.apparait { animation: monte .9s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes monte { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revele { opacity: 1; transform: none; }
}
.grille-2 > *, .grille-3 > *, .grille-4 > * { min-width: 0; }
@media (max-width: 640px) {
  .pad { padding: 20px 16px; }
  .pad .price-table th, .pad .price-table td { padding: 9px 6px; font-size: .86rem; }
  .price-table th[scope="row"] { overflow-wrap: anywhere; }
}
@media (max-width: 640px) { .pad .price-table .num { white-space: normal; min-width: 5.2em; } }

/* =========================================================
   Effets « wow » (dans la charte CER)
   ========================================================= */
/* barre de progression de lecture */
.progression { position: fixed; top: 0; left: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--corail), var(--beige)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); z-index: 90; }

/* titres héros : les mots montent un à un */
.titre-anime .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .08em; margin-bottom: -.08em; }
.titre-anime .mot > span { display: inline-block; animation: motMonte .9s var(--ease) both; animation-delay: calc(120ms + var(--i) * 70ms); }
@keyframes motMonte { from { transform: translateY(110%) rotate(4deg); opacity: 0; } }
.titre-anime em { background: linear-gradient(var(--beige), var(--beige)) no-repeat 0 92% / 0 28%; animation: surligne 1s var(--ease) 1s forwards; }
@keyframes surligne { to { background-size: 100% 28%; } }

/* surlignage beige des titres de section quand ils apparaissent */
.section .t-cer em { background: linear-gradient(var(--beige), var(--beige)) no-repeat 0 92% / 0 26%; transition: background-size 1s var(--ease) .35s; }
.section .t-cer.vu em, .section .vu .t-cer em { background-size: 100% 26%; }

/* photo du héros : dévoilement en volet + bulles flottantes */
.devoile { animation: volet 1.3s var(--ease) .2s both; }
@keyframes volet { from { clip-path: inset(0 0 0 100% round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
.devoile img { animation: zoomSort 2.2s var(--ease) .2s both; }
@keyframes zoomSort { from { scale: 1.25; } }
.bulle { position: absolute; background: #fff; border-radius: 18px; padding: 10px 16px; font-size: .78rem; line-height: 1.3; box-shadow: var(--ombre-forte); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; animation: bulleEntre .8s var(--ease) both, flotte 5s ease-in-out infinite; }
.bulle strong { font-size: 1.3rem; font-weight: 800; font-style: italic; color: var(--corail); }
.bulle .etoiles svg { width: 13px; height: 13px; }
.bulle-1 { top: 20px; left: 18px; animation-delay: 1.1s, 1.9s; display: block; }
.bulle-2 { top: 96px; right: 16px; animation-delay: 1.4s, 2.6s; }
@keyframes bulleEntre { from { opacity: 0; transform: translateY(18px) scale(.85); } }
@keyframes flotte { 50% { translate: 0 -10px; } }
@media (max-width: 520px) { .bulle-2 { top: auto; bottom: 150px; right: auto; left: 18px; } }

/* bandeau chiffres + route où roule la voiture CER */
.chiffres { position: relative; background: var(--anthracite); color: #fff; border-radius: var(--rayon); padding: 34px 22px 70px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 14px; overflow: hidden; }
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(5, 1fr); padding: 40px 40px 78px; } }
.chiffre { text-align: center; }
.chiffre strong { display: block; font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; font-style: italic; color: var(--corail); line-height: 1.05; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: .8rem; opacity: .85; }
.route { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #232321; }
.route-ligne { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--beige) 0 26px, transparent 26px 52px); animation: defile 1.2s linear infinite; }
@keyframes defile { to { background-position: -52px 0; } }
.voiture { position: absolute; bottom: 8px; left: 0; width: 92px; height: auto; transform: translateX(var(--x, 0px)); transition: transform .25s linear; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }

/* ruban défilant aux couleurs CER */
.ruban { background: var(--corail); color: #fff; overflow: hidden; transform: rotate(-1.6deg); margin: 34px -10px 0; padding: 14px 0; box-shadow: var(--ombre); }
.ruban-piste { display: flex; width: max-content; animation: ruban 38s linear infinite; }
.ruban span { white-space: nowrap; font-weight: 800; font-style: italic; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
.ruban i { font-style: normal; color: var(--anthracite); margin: 0 18px; }
@keyframes ruban { to { transform: translateX(-50%); } }

/* galerie : volets à l'apparition */
.js .galerie figure.revele { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 14px); transition: clip-path 1s var(--ease) var(--d, 0ms); }
.js .galerie figure.revele.vu { clip-path: inset(0 0 0 0 round 14px); }

/* inclinaison 3D au survol (tuiles, formules) */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tuile-photo.tilt, .formule.tilt { transition: transform .2s ease-out, box-shadow .35s, opacity .8s var(--ease) var(--d, 0ms); }
.tuile-photo .reflet, .formule .reflet { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 55%); opacity: 0; transition: opacity .3s; }
.tilt:hover .reflet { opacity: 1; }

/* boutons : reflet qui traverse */
.btn-dark { position: relative; overflow: hidden; }
.btn-dark::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.btn-dark:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  .titre-anime .mot > span, .devoile, .devoile img, .bulle { animation: none !important; opacity: 1; }
  .titre-anime em, .section .t-cer em { background-size: 100% 26% !important; }
  .ruban-piste { animation: none !important; }
  .js .galerie figure.revele { clip-path: none; }
}
@media (max-width: 899px) { .chiffre:nth-child(5):last-of-type, .chiffres > .chiffre:nth-of-type(5) { grid-column: span 2; } }
.ruban-zone { overflow: hidden; padding: 30px 0 10px; } .ruban-zone .ruban { margin: 0 -10px; }