:root {
  --bleu: #0e3e8a;        /* bleu du logo TSR Formation */
  --bleu-fonce: #0a2d66;
  --bleu-vif: #2f7de1;
  --rouge: #c8102e;       /* rouge du logo, contraste AA sur blanc */
  --rouge-fonce: #a00d25;
  --nuit: #0b1626;
  --nuit-2: #13233b;
  --texte: #24292f;
  --gris: #57606a;
  --trait: #dde3ea;
  --fond: #f2f5f9;
  --blanc: #fff;
  --rayon: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--texte); background: var(--nuit); }
main { display: block; background: var(--blanc); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }
a:focus-visible, .bouton:focus-visible, .tuile:focus-visible { outline: 3px solid var(--bleu-vif); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; color: var(--nuit); margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
.contenu { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section.gris { background: var(--fond); }
.texte { max-width: 760px; }
.evitement { position: absolute; left: -9999px; top: 0; background: var(--blanc); padding: 8px 16px; z-index: 30; }
.evitement:focus { left: 8px; top: 8px; }
.ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
.surtitre { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); }
.surtitre::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.titre { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.titre .surtitre::after { content: ""; width: 28px; height: 2px; background: currentColor; }
.titre p:not(.surtitre) { color: var(--gris); font-size: 1.05rem; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: 10px; background: var(--rouge); color: #fff; padding: 14px 26px; border-radius: var(--rayon); border: 2px solid var(--rouge); text-decoration: none; font-weight: 700; letter-spacing: .02em; transition: background .2s, border-color .2s, color .2s; }
.bouton:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.bouton.contour { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.bouton.contour:hover { background: #fff; border-color: #fff; color: var(--nuit); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }

/* En-tete : logo blanc et menu en majuscules, pose sur l'image a l'accueil */
.entete { background: var(--nuit); color: #fff; position: relative; z-index: 20; }
.accueil .entete { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(rgba(5,10,20,.78), rgba(5,10,20,0)); }
.entete .contenu { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 18px; padding-bottom: 18px; }
.logo img { width: 210px; }
.entete-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.joindre { display: flex; gap: 22px; margin: 0; font-size: .85rem; }
.joindre a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); text-decoration: none; }
.joindre a:hover { color: #fff; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; }
.menu a { display: block; padding: 8px 9px; color: #fff; text-decoration: none; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: rgba(255,255,255,.6); }
.menu a[aria-current="page"] { border-bottom-color: var(--rouge); }

/* Bandeau d'accueil : diaporama en fondu, sans script */
.hero { position: relative; overflow: hidden; background: var(--nuit); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-accueil { min-height: min(92vh, 860px); padding: 170px 0 120px; }
.diaporama, .hero-fond { position: absolute; inset: 0; }
.diaporama img, .hero-fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diaporama img { opacity: 0; animation: fondu 24s infinite; }
.diaporama img:nth-child(1) { animation-delay: -1s; }
.diaporama img:nth-child(2) { animation-delay: 5s; }
.diaporama img:nth-child(3) { animation-delay: 11s; }
.diaporama img:nth-child(4) { animation-delay: 17s; }
@keyframes fondu {
  0% { opacity: 0; transform: scale(1.08); }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,12,24,.9) 0%, rgba(6,12,24,.62) 50%, rgba(6,12,24,.25) 100%), linear-gradient(0deg, rgba(6,12,24,.65), rgba(6,12,24,0) 45%); }
.hero-texte { position: relative; z-index: 2; width: 100%; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.7rem); max-width: 15em; margin: 0; letter-spacing: -.02em; }
.hero .accroche { font-size: clamp(1.1rem, 2vw, 1.35rem); color: rgba(255,255,255,.88); max-width: 36em; margin: 18px 0 0; }
.hero .surtitre { color: #fff; }
.hero .surtitre::before { background: var(--rouge); }
.hero-accueil .actions { margin-top: 34px; }
.reperes { position: absolute; z-index: 2; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; gap: 8px; }
.reperes span { width: 34px; height: 3px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.reperes span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; animation: repere 24s infinite linear; }
.reperes span:nth-child(1)::after { animation-delay: -1s; }
.reperes span:nth-child(2)::after { animation-delay: 5s; }
.reperes span:nth-child(3)::after { animation-delay: 11s; }
.reperes span:nth-child(4)::after { animation-delay: 17s; }
@keyframes repere { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 25.01%, 100% { transform: scaleX(0); } }

/* Bandeau des pages internes */
.hero-page { min-height: 360px; padding: 64px 0 56px; }
.hero-page.sans-image { min-height: 280px; background: linear-gradient(120deg, var(--bleu-fonce), var(--nuit) 70%); }
.hero-page.sans-image::after { background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px); }
.hero-page h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.ariane { font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 26px; }
.ariane a { color: #fff; }

/* Atouts, a cheval sur le bandeau */
.atouts { background: var(--blanc); }
.atouts ul { list-style: none; margin: -56px 0 0; padding: 0; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--blanc); border-radius: var(--rayon); box-shadow: 0 18px 40px rgba(11,22,38,.14); }
.atouts li { padding: 26px 24px; border-left: 1px solid var(--trait); }
.atouts li:first-child { border-left: 0; }
.atouts strong { display: block; color: var(--bleu); font-size: 1.1rem; line-height: 1.3; }
.atouts li::before { content: ""; display: block; width: 26px; height: 3px; background: var(--rouge); margin-bottom: 12px; }
.atouts span { color: var(--gris); font-size: .92rem; }

/* Presentation */
.presentation .contenu { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.citation { margin: 0; padding: 44px 40px; background: var(--bleu); color: #fff; border-radius: var(--rayon); position: relative; }
.citation::before { content: "“"; position: absolute; top: -8px; left: 28px; font: 700 6rem/1 Georgia, serif; color: var(--rouge); }
.citation blockquote { margin: 0; font-size: 1.3rem; line-height: 1.5; font-style: italic; }
.citation blockquote p { margin: 0; }
.citation figcaption { margin-top: 18px; font-weight: 700; color: rgba(255,255,255,.8); }
.citation figcaption::before { content: "— "; }

/* Centres : image et texte en alternance */
.rangee { display: grid; grid-template-columns: 1fr 1fr; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: 0 10px 30px rgba(11,22,38,.08); }
.rangee + .rangee { margin-top: 32px; }
.rangee.inverse .rangee-image { order: 2; }
.rangee-image img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.rangee-texte { padding: 44px 48px; align-self: center; }
.rangee-texte h3 { font-size: 1.7rem; }
.rangee-texte p:not(.surtitre):not(.adresse) { color: var(--gris); }
.adresse { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-weight: 600; color: var(--nuit); }
.adresse .ico { color: var(--rouge); margin-top: .2em; }

/* Formations : tuiles photo */
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tuile { position: relative; display: flex; flex-direction: column; min-height: 440px; border-radius: var(--rayon); overflow: hidden; color: #fff; text-decoration: none; background: var(--nuit); box-shadow: 0 10px 30px rgba(11,22,38,.12); }
.tuile-image { position: absolute; inset: 0; }
.tuile-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tuile:hover .tuile-image img { transform: scale(1.06); }
.tuile-picto { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 64px; background: linear-gradient(140deg, var(--bleu), var(--nuit)); }
.tuile-picto .picto { width: 120px; height: 120px; color: rgba(255,255,255,.18); }
.tuile-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,12,24,.94) 8%, rgba(6,12,24,.35) 55%, rgba(6,12,24,0)); }
.tuile-texte { position: relative; z-index: 1; margin-top: auto; padding: 28px; }
.tuile h3 { color: #fff; font-size: 1.5rem; margin-bottom: .4em; }
.tuile-desc { display: block; color: rgba(255,255,255,.85); font-size: .95rem; }
.lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--rouge); padding-bottom: 3px; }
.tuile:hover .lien .ico { transform: translateX(4px); }
.lien .ico { transition: transform .2s; }

/* Engagement */
.engagement { background: var(--bleu); color: #fff; padding: 52px 0; }
.engagement .contenu { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.engagement p { margin: 0; padding-left: 22px; border-left: 3px solid var(--rouge); }
.engagement span { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.engagement strong { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; }

/* Qualiopi */
.qualiopi .contenu { display: flex; align-items: center; gap: 48px; }
.qualiopi-apercu img { width: 200px; border: 1px solid var(--trait); box-shadow: 0 10px 30px rgba(11,22,38,.12); transform: rotate(-2deg); transition: transform .3s; }
.qualiopi-apercu:hover img { transform: rotate(0); }
.qualiopi p:not(.surtitre) { color: var(--gris); max-width: 46em; }

/* Contact */
.contact { background: var(--nuit); color: #fff; }
.contact .contenu { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.contact h2, .contact h3 { color: #fff; }
.contact .surtitre { color: #ff8a98; }  /* rouge eclairci : contraste AA sur fond sombre */
.contact-intro p:not(.surtitre):not(.actions) { color: rgba(255,255,255,.8); }
.contact-intro .actions { margin-top: 28px; }
.contact-centres { display: grid; gap: 18px; }
.contact-centres > div { background: var(--nuit-2); border-radius: var(--rayon); padding: 24px 28px; border-left: 3px solid var(--rouge); }
.contact-centres h3 { margin-bottom: .3em; }
.contact .adresse { color: rgba(255,255,255,.88); margin: 0; font-weight: 400; }

/* Appel en bas des pages */
.appel { background: var(--nuit); color: #fff; padding: 56px 0; }
.appel .contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.appel h2 { color: #fff; margin-bottom: .2em; }
.appel p { margin: 0; color: rgba(255,255,255,.8); }

/* Pages de formation */
.ou { display: flex; gap: 12px; align-items: flex-start; background: var(--fond); border-left: 4px solid var(--rouge); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 16px 20px; margin: 0 0 40px; }
.ou .ico { color: var(--rouge); margin-top: .25em; }
.intro { font-size: 1.08rem; margin-bottom: 16px; }
.sous-titre { font-size: 1.6rem; margin: 56px 0 24px; padding-bottom: 12px; border-bottom: 2px solid var(--trait); }
.colonnes-2, .colonnes-3 { display: grid; gap: 24px; }
.colonnes-2 { grid-template-columns: repeat(2, 1fr); }
.colonnes-3 { grid-template-columns: repeat(3, 1fr); }
.bloc { background: var(--fond); border-radius: var(--rayon); padding: 28px; border-top: 3px solid var(--bleu); }
.bloc h2 { font-size: 1.2rem; }
.bloc h3 { font-size: 1.08rem; color: var(--bleu); }
.bloc h3 + ul + h3 { margin-top: 1.4em; }
.listes ul, .disciplines { list-style: none; padding: 0; margin: 0; }
.listes li, .disciplines li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.listes li::before, .disciplines li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--rouge); transform: rotate(45deg); }
.disciplines { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px 24px; }
.disciplines li { background: var(--fond); border-radius: var(--rayon); padding: 18px 20px 18px 44px; margin: 0; font-weight: 600; color: var(--nuit); }
.disciplines li::before { left: 20px; top: 1.6em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Certificat */
.certificat { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.fiche { margin: 24px 0 28px; border-top: 1px solid var(--trait); }
.fiche div { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.fiche dt { color: var(--gris); }
.fiche dd { margin: 0; font-weight: 700; color: var(--nuit); }
.apercu-certificat img { border: 1px solid var(--trait); box-shadow: 0 14px 34px rgba(11,22,38,.14); margin: 0 auto; }
.legal h2 { font-size: 1.25rem; margin-top: 36px; }
.legal h2:first-child { margin-top: 0; }

/* Pied de page */
.pied { background: #070e19; color: rgba(255,255,255,.72); font-size: .95rem; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.pied-marque img { width: 190px; margin-bottom: 18px; }
.pied h2 { color: #fff; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 4px 0; color: #fff; }
.pied li span { color: rgba(255,255,255,.6); }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.copyright { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: .85rem; }

/* En-tete sur deux lignes quand le menu ne tient plus a cote du logo */
@media (max-width: 1120px) {
  .entete .contenu { flex-direction: column; align-items: flex-start; }
  .entete-droite { align-items: flex-start; width: 100%; }
  .menu ul { justify-content: flex-start; margin-left: -9px; }
  .hero-accueil { padding-top: 230px; }
}

/* Tablette */
@media (max-width: 980px) {
  .atouts ul { grid-template-columns: repeat(2, 1fr); }
  .atouts li:nth-child(3) { border-left: 0; }
  .atouts li:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .presentation .contenu, .contact .contenu, .certificat { grid-template-columns: 1fr; gap: 36px; }
  .tuiles, .colonnes-3 { grid-template-columns: 1fr 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 760px) {
  .contenu { padding: 0 18px; }
  .section { padding: 60px 0; }
  .logo img { width: 170px; }
  .joindre { display: none; }
  .entete .contenu { padding-top: 14px; padding-bottom: 10px; gap: 10px; }
  .menu ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -18px; padding: 0 7px; width: calc(100% + 36px); }
  .menu ul::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; padding: 8px 11px; }
  .hero-accueil { min-height: 0; padding: 190px 0 96px; }
  .reperes { bottom: 60px; }
  .atouts ul { margin-top: -40px; grid-template-columns: 1fr; }
  .atouts li { border-left: 0; border-top: 1px solid var(--trait); padding: 18px 22px; }
  .atouts li:first-child { border-top: 0; }
  .rangee, .tuiles, .colonnes-2, .colonnes-3, .engagement .contenu { grid-template-columns: 1fr; }
  .rangee.inverse .rangee-image { order: 0; }
  .rangee-image img { min-height: 0; aspect-ratio: 8 / 5; }
  .rangee-texte { padding: 28px 24px; }
  .tuile { min-height: 360px; }
  .qualiopi .contenu { flex-direction: column; align-items: flex-start; gap: 28px; }
  .citation { padding: 40px 26px 30px; }
  .fiche div { grid-template-columns: 1fr; gap: 2px; }
  .bouton { padding: 13px 20px; }
  .pied-grille { grid-template-columns: 1fr; gap: 28px; }
}

/* Animations coupees si l'utilisateur l'a demande */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .diaporama img { animation: none; }
  .diaporama img:first-child { opacity: 1; }
  .reperes { display: none; }
  .tuile-image img, .qualiopi-apercu img, .lien .ico { transition: none; }
}