/* Pages intérieures : même univers que l'accueil (noir, rouge rayé, crème), en version plus lisible pour les textes longs. */
:root {
  --noir: #111214;
  --noir-2: #1a1b1f;
  --rouge: #b3121c;
  --rouge-vif: #e2343b;
  --creme: #f1ebe6;
  --blanc: #ffffff;
  --gris: #a9a5a6;
  --texte: #dcd7d7;
  --encre: #232327;
  --f-titre: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-label: "Oswald", "Arial Narrow", sans-serif;
  --f-texte: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --largeur: 1120px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--noir); color: var(--blanc); font-family: var(--f-texte); font-size: 16px; line-height: 1.7; overflow-x: hidden; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 3px; }
.band { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); position: relative; }
.wrap { max-width: var(--largeur); margin-inline: auto; }
.label { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .3em; font-size: .75rem; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; text-transform: uppercase; line-height: .98; margin: 0; text-wrap: balance; }
.r { color: var(--rouge-vif); }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(17,18,20,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.top img { height: 44px; width: auto; }
.top nav { display: flex; align-items: center; gap: 24px; }
.top nav a { text-decoration: none; font-family: var(--f-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--gris); }
.top nav a:hover, .top nav a[aria-current] { color: var(--blanc); }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; padding: 14px 22px; border-radius: 999px; border: 2px solid transparent; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-rouge { background: var(--rouge-vif); color: var(--blanc) !important; }
.btn-rouge:hover { background: var(--rouge); }
.btn-ligne { border-color: rgba(255,255,255,.4); color: var(--blanc); }
.top .btn { padding: 10px 18px; font-size: .8rem; }

.fil { padding-block: 18px 0; font-size: .82rem; color: var(--gris); }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.fil li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--blanc); }

.entete { padding-block: clamp(30px, 6vw, 70px); background: radial-gradient(ellipse at 70% 0%, #2a1416 0%, var(--noir) 60%); }
.entete .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 5vw, 60px); align-items: center; }
.entete .txt { min-width: 0; }
.entete .label { color: var(--rouge-vif); display: block; margin-bottom: 18px; }
.entete h1 { font-size: clamp(2.6rem, 6.5vw, 5.2rem); }
.entete p.chapo { font-size: 1.12rem; color: var(--texte); max-width: 52ch; margin: 22px 0 28px; }
.entete .vis { border-radius: 24px; overflow: hidden; aspect-ratio: 1 / 1; max-width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.entete .vis img { width: 100%; height: 100%; object-fit: cover; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.contenu { padding-block: clamp(40px, 7vw, 90px); }
.contenu .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(30px, 5vw, 70px); align-items: start; }
.texte { min-width: 0; }
.texte section + section { margin-top: 56px; }
.texte h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 18px; }
.texte p { color: var(--texte); max-width: 68ch; margin: 0 0 16px; }
.texte ul.liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.texte ul.liste li { background: var(--noir-2); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 16px 18px; color: var(--texte); min-width: 0; }
.texte ul.liste b { display: block; color: var(--blanc); font-weight: 600; margin-bottom: 4px; }
.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: e; }
.etapes li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.etapes li::before { counter-increment: e; content: counter(e); font-family: var(--f-titre); font-size: 1.6rem; width: 52px; height: 52px; border-radius: 50%; background: var(--rouge); display: grid; place-items: center; line-height: 1; }
.etapes b { display: block; font-weight: 600; }
.etapes span { color: var(--texte); }
.reals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.reals figure { margin: 0; background: var(--noir-2); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.reals img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f4f4f4; }
.reals figcaption { padding: 12px 14px; font-size: .88rem; color: var(--texte); }
.reals figcaption b { display: block; color: var(--blanc); font-family: var(--f-titre); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .01em; }
.lien-reals { display: inline-block; margin-top: 16px; font-family: var(--f-label); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; color: var(--rouge-vif); }
.faq details { border-bottom: 1px solid rgba(255,255,255,.1); padding-block: 16px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rouge-vif); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin: 12px 0 0; }

aside.encart { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: grid; gap: 14px; }
.carte-devis { background: var(--rouge); background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 30px, rgba(0,0,0,.05) 30px 60px); border-radius: 20px; padding: 24px; }
.carte-devis h2 { font-size: 1.9rem; margin-bottom: 10px; }
.carte-devis p { margin: 0 0 18px; color: #ffe3e4; font-size: .95rem; }
.carte-devis .btn { width: 100%; justify-content: center; background: var(--blanc); color: var(--rouge) !important; }
.carte-devis .tel { margin-top: 14px; font-size: .9rem; color: #ffe3e4; }
.carte-devis .tel b { color: var(--blanc); display: block; font-size: 1.1rem; }
.autres { background: var(--noir-2); border-radius: 20px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.07); }
.autres .label { color: var(--gris); display: block; margin-bottom: 10px; font-size: .68rem; }
.autres ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.autres a { text-decoration: none; color: var(--texte); font-size: .95rem; }
.autres a:hover { color: var(--rouge-vif); }

.appel { background: var(--creme); color: var(--encre); padding-block: clamp(50px, 7vw, 80px); text-align: center; }
.appel h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
.appel h2 .r { color: var(--rouge); }
.appel p { max-width: 52ch; margin: 16px auto 26px; }
.appel .actions { justify-content: center; }
.appel .btn-ligne { border-color: var(--encre); color: var(--encre); }

.pied { background: var(--rouge); text-align: center; padding-block: 44px 30px; }
.pied p.slogan { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2.6rem); margin: 0; line-height: 1; }
.liens-pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px auto 0; max-width: 900px; }
.liens-pied a { color: #ffe3e4; text-decoration: none; font-family: var(--f-label); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.liens-pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied p.mini { margin: 16px 0 0; font-size: .8rem; color: #ffd0d2; }

/* Contact */
.coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.coord { background: var(--noir-2); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 20px; min-width: 0; }
.coord .label { color: var(--rouge-vif); font-size: .68rem; display: block; margin-bottom: 6px; }
.coord strong { font-size: 1.2rem; display: block; overflow-wrap: anywhere; }
.coord strong a { text-decoration: none; }
.coord p { margin: 6px 0 0; color: var(--gris); font-size: .9rem; }
.a-completer { display: inline-block; background: #3a2a10; color: #ffcf70; border: 1px dashed #ffcf70; border-radius: 8px; padding: 2px 8px; font-size: .85rem; font-weight: 600; }

@media (max-width: 900px) {
  .contenu .wrap { grid-template-columns: 1fr; }
  aside.encart { position: static; }
  .reals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .top nav a:not(.btn):not(.nav-formations) { display: none; }
  .top nav { gap: 16px; }
  .top nav a.nav-formations { font-size: .78rem; letter-spacing: .1em; }
  .entete .wrap { grid-template-columns: 1fr; }
  .entete .vis { max-width: 320px; }
  .texte ul.liste, .coords { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .reals { grid-template-columns: 1fr; }
  .top img { height: 36px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* Réseaux sociaux et numéros du pied de page */
.reseaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px auto 0; }
.reseaux .rs { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.35); color: #fff; transition: background .2s, color .2s, transform .2s; }
.reseaux .rs:hover { background: #fff; color: #b3121c; transform: translateY(-3px); }
.reseaux svg { width: 21px; height: 21px; }
.contacts-pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 16px 0 0; font-weight: 600; font-size: .95rem; }
.contacts-pied span { color: #ffd0d2; }
.contacts-pied a { color: #fff; text-decoration: none; margin-left: 6px; }
.contacts-pied a:hover { text-decoration: underline; }

/* Nos formations : sessions en cours et à venir */
.sessions { padding-block: clamp(40px, 7vw, 80px) 0; scroll-margin-top: 90px; }
.sessions .tete-sessions { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 30px; }
.sessions .tete-sessions .label { color: var(--rouge-vif); display: block; margin-bottom: 12px; }
.sessions h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
.sessions .tete-sessions p { color: var(--texte); max-width: 46ch; margin: 0; }
.sessions h3.groupe { font-family: var(--f-label); font-weight: 600; letter-spacing: .2em; font-size: .95rem; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sessions h3.groupe::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gris); }
.sessions h3.groupe.direct::before { background: var(--rouge-vif); box-shadow: 0 0 0 0 rgba(226,52,59,.6); animation: pulse 1.8s infinite; }
.sessions .groupe + .grille-sessions { margin-bottom: 44px; }
.grille-sessions { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.session { background: var(--noir-2); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.session .mini { position: relative; display: block; aspect-ratio: 4 / 5; background: #222; }
.session .mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.session .badge { position: absolute; top: 12px; right: 12px; font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; padding: 6px 10px; border-radius: 999px; background: var(--noir); color: var(--blanc); }
.session .badge.direct { background: var(--rouge-vif); }
.session .corps { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.session .date { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--rouge-vif); }
.session h4 { font-family: var(--f-titre); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; line-height: 1.02; margin: 0; }
.session p { color: var(--texte); font-size: .92rem; margin: 0; }
.session .infos { color: var(--gris); font-size: .85rem; }
.session .btn { margin-top: auto; justify-content: center; }
.session .btn[aria-disabled="true"] { background: #3a3b40; pointer-events: none; }
.sessions .aucune { color: var(--gris); margin: 0 0 44px; }
.provisoire { border: 2px dashed #ffcf70; border-radius: 16px; padding: 12px 16px; margin-bottom: 26px; color: #ffcf70; background: #3a2a10; font-size: .9rem; font-weight: 600; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(226,52,59,0); } 100% { box-shadow: 0 0 0 0 rgba(226,52,59,0); } }
.session .prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.session .prix strong { font-family: var(--f-titre); font-weight: 400; font-size: 1.55rem; line-height: 1; color: var(--rouge-vif); letter-spacing: .01em; }
.session .prix small { font-family: var(--f-label); font-weight: 600; font-size: .78rem; letter-spacing: .1em; }
.session .prix span { color: var(--gris); font-size: .85rem; }
.sessions .glisser { display: none; }
@media (max-width: 900px) { .grille-sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobile : les formations défilent sur le côté (swipe) */
@media (max-width: 760px) {
  .grille-sessions { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 6px; scroll-padding-inline: 16px; }
  .grille-sessions::-webkit-scrollbar { display: none; }
  .grille-sessions .session { flex: 0 0 82%; max-width: 340px; scroll-snap-align: start; }
  .grille-sessions .session:only-child { flex-basis: 100%; max-width: none; }
  .sessions .glisser { display: flex; align-items: center; gap: 8px; margin: -6px 0 12px; color: var(--gris); font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
  .sessions .glisser::after { content: "\2192"; color: var(--rouge-vif); font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sessions h3.groupe.direct::before { animation: none; } }