/* ABCEOS : feuille de style unique du site. Direction « Nuit », retenue le 30/09/2026 :
   fonds nuit dominants, jaune comme lumière. La version claire précédente est archivée dans
   livrables/site-web/abceos/2026-09-30_abceos_style-lumiere-v1.css.
   Couleurs mesurées sur le logo : violet #554294, jaune #FBBA16.
   Contrastes (WCAG 2.1), recalculés le 30/09/2026 :
     texte #e9e5f5 sur nuit 14,26:1 ; sur violet foncé 11,83:1 ;
     texte secondaire #cfc8e6 sur nuit 10,96:1 ; sur violet foncé 9,09:1 ;
     jaune sur nuit 10,18:1 ; sur violet foncé 8,45:1 ; nuit sur bouton jaune 10,18:1 ;
     filet de champ #8b7fc8 sur nuit 5,01:1 (seuil de 3:1 pour un composant) ;
     violet #554294 sur nuit 2,18:1, donc jamais de texte violet sur fond sombre. */

/* Polices hébergées sur le site (licence OFL, fichiers de licence dans assets/fonts/), aucun appel à un service tiers.
   Jeu de caractères latin de Google Fonts, téléchargé le 28/09/2026. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500-italique.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Couleurs de la marque */
  --violet: #554294;
  --violet-fonce: #2b2150;
  --nuit: #1a1433;
  --jaune: #fbba16;
  --jaune-clair: #ffd666;
  --blanc: #ffffff;
  /* Rôles, direction Nuit */
  --fond: var(--nuit);            /* fond de page */
  --fond-alterne: #221a3f;        /* sections alternées, bandeau de confiance */
  --fond-profond: #120e24;        /* pied de page */
  --surface: var(--violet-fonce); /* cartes, tableaux, encadrés, formulaire */
  --ligne: #3d3170;               /* filets décoratifs */
  --ligne-champ: #8b7fc8;         /* bord des champs, 5,01:1 sur nuit */
  --texte-fort: var(--blanc);     /* titres */
  --encre: #e9e5f5;               /* texte courant */
  --gris: #cfc8e6;                /* texte secondaire */
  --teinte-jaune: rgba(251, 186, 22, .08); /* fond des encadrés d'alerte */
  --rayon: 14px;
  --largeur: 1120px;
  --titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --texte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
}

::selection { background: var(--jaune); color: var(--nuit); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--jaune); text-underline-offset: 3px; }
a:hover { color: var(--jaune-clair); }

:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--titre); font-weight: 500; line-height: 1.15; color: var(--texte-fort); margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }

.wrap { width: min(var(--largeur), 100% - 32px); margin-inline: auto; }

.lien-evitement {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--jaune); color: var(--nuit); font-weight: 600; padding: 10px 16px; border-radius: 8px;
}
.lien-evitement:focus { left: 16px; }

/* En-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 20, 51, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne);
}
.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.logo img { width: 150px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; color: var(--encre); font-weight: 500; font-size: .98rem; }
.nav a:hover { color: var(--jaune); }
.nav a[aria-current="page"] { color: var(--texte-fort); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; }
.bouton-menu { display: none; }

/* Boutons */
.bouton {
  display: inline-block; padding: 13px 24px; border-radius: 999px; min-height: 44px;
  font-weight: 600; text-decoration: none; border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.bouton-principal, .bouton-jaune { background: var(--jaune); color: var(--nuit); }
.bouton-principal:hover, .bouton-jaune:hover { background: var(--jaune-clair); color: var(--nuit); }
.bouton-contour, .bouton-contour-clair { border-color: var(--gris); color: var(--texte-fort); }
.bouton-contour:hover, .bouton-contour-clair:hover { background: var(--texte-fort); border-color: var(--texte-fort); color: var(--nuit); }
.bouton[aria-disabled="true"], .bouton:disabled { background: var(--surface); border-color: var(--ligne); color: var(--gris); cursor: not-allowed; }
.nav .bouton { color: var(--nuit); padding: 9px 18px; }
.nav .bouton:hover { color: var(--nuit); }

/* Sections */
.section { padding: 88px 0; }
.section-douce { background: var(--fond-alterne); border-block: 1px solid var(--ligne); }
.section-nuit { background: var(--violet-fonce); position: relative; overflow: hidden; }
.section-nuit::after {
  content: ""; position: absolute; left: -160px; bottom: -200px; width: 420px; height: 420px;
  border-radius: 50%; border: 56px solid var(--violet); opacity: .3; pointer-events: none;
}
.section-nuit > .wrap { position: relative; z-index: 1; }
.surtitre {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--jaune); margin-bottom: 14px;
}
.chapo { font-size: 1.2rem; color: var(--gris); max-width: 720px; }

/* Accueil */
.hero { background: var(--nuit); padding: 104px 0 96px; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 460px; height: 460px;
  border-radius: 50%; border: 70px solid var(--violet); opacity: .35; pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; right: 150px; top: 250px; width: 120px; height: 120px;
  border-radius: 50%; border: 18px solid var(--jaune); opacity: .55; pointer-events: none;
}
.hero h1 { max-width: 780px; }
.hero h1 em { font-style: italic; color: var(--jaune); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero > .wrap { position: relative; z-index: 1; }

.bandeau-confiance { border-block: 1px solid var(--ligne); background: var(--fond-alterne); }
.bandeau-confiance ul { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bandeau-confiance li { font-weight: 600; font-size: .95rem; color: var(--texte-fort); padding-left: 16px; border-left: 3px solid var(--jaune); }

.grille { display: grid; gap: 22px; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }

.carte {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: 28px; display: flex; flex-direction: column;
}
.carte p { color: var(--gris); }
.carte .lien-suite { margin-top: auto; font-weight: 600; text-decoration: none; }
.carte .lien-suite:hover { text-decoration: underline; }
.carte .lien-suite::after { content: " →"; }
.section-nuit .carte { background: var(--nuit); }

/* Formules */
.formule { position: relative; }
.formule .prix { font-family: var(--titre); font-size: 2.6rem; color: var(--jaune); line-height: 1; margin: 6px 0 16px; }
.formule .prix small { font-family: var(--texte); font-size: .95rem; color: var(--gris); }
/* Prix affichés hors taxes uniquement depuis le 01/10/2026 ; .ttc ne porte plus qu'une précision (formule, modalité). */
.formule .ttc { font-size: .9rem; color: var(--gris); margin: -12px 0 16px; }
.formule ul { padding-left: 1.1em; margin: 0 0 20px; color: var(--encre); }
.formule li { margin-bottom: 6px; }
.formule-vedette { border: 2px solid var(--jaune); }
.pastille {
  position: absolute; top: -13px; left: 24px; background: var(--jaune); color: var(--nuit);
  font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}

/* Étapes */
.etapes { counter-reset: etape; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.etapes li { counter-increment: etape; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 24px 20px; }
.etapes li::before {
  content: counter(etape); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--jaune); color: var(--nuit); font-weight: 700; margin-bottom: 12px;
}
.etapes h3 { font-size: 1.2rem; }
.etapes p { color: var(--gris); font-size: .95rem; margin: 0; }

/* Encadrés */
.encadre { border-radius: var(--rayon); padding: 26px 28px; background: var(--surface); border: 1px solid var(--ligne); border-left: 5px solid var(--ligne-champ); }
.encadre-jaune { border-color: rgba(251, 186, 22, .35); border-left-color: var(--jaune); background: var(--teinte-jaune); }
.encadre h3 { margin-bottom: .4em; }
.encadre ul { margin: 0; padding-left: 1.2em; }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
caption { text-align: left; padding: 18px 20px 0; font-weight: 700; color: var(--texte-fort); }
th, td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
thead th { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
td.montant, th.montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.montant { color: var(--texte-fort); }
tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq details { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px 22px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--texte-fort); min-height: 28px; }
.faq summary::marker { color: var(--jaune); }
.faq details[open] summary { margin-bottom: 10px; }
.faq details p:last-child { margin-bottom: 0; }

/* Formulaire */
.formulaire { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 32px; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-weight: 600; color: var(--texte-fort); margin-bottom: 6px; }
.champ .aide { font-weight: 400; color: var(--gris); font-size: .9rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 44px; font: inherit; color: var(--encre); padding: 12px 14px;
  border: 1px solid var(--ligne-champ); border-radius: 10px; background: var(--nuit);
}
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { border-color: var(--jaune); outline-offset: 1px; }
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--jaune); border-width: 2px; }
.champ :user-invalid { border-color: var(--jaune); border-width: 2px; }
.champ textarea { min-height: 140px; resize: vertical; }
.mention-rgpd { font-size: .88rem; color: var(--gris); margin-top: 18px; }
.alerte { font-size: .92rem; background: var(--teinte-jaune); border: 1px solid rgba(251, 186, 22, .55); border-left: 4px solid var(--jaune); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }

/* Pages de texte (légal) */
.page-texte { max-width: 820px; }
.page-texte h2 { font-size: 1.7rem; margin-top: 1.6em; }
.page-texte h3 { font-size: 1.25rem; margin-top: 1.2em; }
.page-texte dl { display: grid; grid-template-columns: 220px 1fr; gap: 8px 20px; }
.page-texte dt { font-weight: 600; color: var(--texte-fort); }
.page-texte dd { margin: 0; }
.maj { color: var(--gris); font-size: .95rem; }

.entete-page { background: var(--nuit); padding: 72px 0 60px; border-bottom: 1px solid var(--ligne); position: relative; overflow: hidden; }
.entete-page::after {
  content: ""; position: absolute; right: -90px; top: -150px; width: 340px; height: 340px;
  border-radius: 50%; border: 52px solid var(--violet); opacity: .3; pointer-events: none;
}
.entete-page > .wrap { position: relative; z-index: 1; }
.entete-page .chapo { color: var(--gris); }

/* Élément restant à compléter avant mise en ligne : visible exprès (texte #5a4300 sur #ffe9a8, 7,81:1). */
.a-completer { background: #ffe9a8; color: #5a4300; padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* Pied de page */
.pied { background: var(--fond-profond); color: var(--gris); padding: 64px 0 28px; font-size: .95rem; border-top: 1px solid var(--ligne); }
.pied a { color: var(--encre); }
.pied a:hover { color: var(--jaune); }
.pied .colonnes { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.pied img { width: 150px; margin-bottom: 16px; }
.pied h2 { font-family: var(--texte); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jaune); margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 8px; }
.pied address { font-style: normal; }
.pied-bas { border-top: 1px solid var(--ligne); margin-top: 40px; padding-top: 20px; font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* Adaptation écran */
@media (max-width: 1180px) {
  .hero::before { display: none; } /* l'anneau jaune ne doit jamais passer sous le texte */
}
@media (max-width: 960px) {
  .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .bandeau-confiance ul { grid-template-columns: repeat(2, 1fr); }
  .pied .colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .bouton-menu {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: inherit; font-weight: 600;
    background: none; border: 1px solid var(--ligne-champ); border-radius: 999px; padding: 8px 16px; color: var(--encre); cursor: pointer;
  }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 72px; background: var(--nuit); border-bottom: 1px solid var(--ligne); }
  .nav.ouvert { display: block; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 16px 20px; }
  .nav li { width: 100%; }
  .nav a { display: block; padding: 12px 0; }
  .nav .bouton { display: inline-block; margin-top: 8px; padding: 11px 22px; }
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero { padding: 72px 0 64px; }
  .hero::before { display: none; }
  .grille-2, .grille-3, .grille-4, .etapes, .bandeau-confiance ul, .pied .colonnes { grid-template-columns: 1fr; }
  .page-texte dl { grid-template-columns: 1fr; }
  .page-texte dd { margin-bottom: 10px; }
  .formulaire { padding: 22px; }
}

.insecable { white-space: nowrap; }