/* =====================================================================
   excelhance.fr — feuille de style commune
   Une seule source pour toutes les pages du site.
   Toute modification de charte se fait ici, et nulle part ailleurs.
   ===================================================================== */


/* =====================================================================
   1. JETONS DE DESIGN
   ---------------------------------------------------------------------
   Le thème clair est défini sur :root. Le thème sombre est redéclaré
   deux fois : sous media query pour le réglage système, et sous
   [data-theme="dark"] pour un choix explicite. Aucune couleur ne doit
   être écrite en dur ailleurs dans ce fichier.
   ===================================================================== */

:root {
  --ground:      #FAFBF8;   /* fond de page */
  --surface:     #F1F3EE;   /* fond des encarts */
  --ink:         #141A16;   /* texte principal */
  --muted:       #5B675F;   /* texte secondaire */
  --rule:        #DCE0D8;   /* filets et bordures */
  --rule-strong: #BFC6BB;   /* bordures de champs */
  --accent:      #1D6547;   /* vert de la charte */
  --accent-ink:  #145037;   /* vert des liens */
  --accent-soft: #E5EFE8;   /* fond vert clair */
  --shadow:      0 1px 0 rgba(20, 26, 22, .04);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --step--1: 0.82rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  1.6rem;
  --step-3:  2.1rem;
  --step-4:  3.1rem;

  --gutter:  clamp(1.25rem, 5vw, 3.5rem);
  --measure: 62ch;
}

/* Thème sombre suivant le réglage du système, sauf choix explicite inverse */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0F1411;
    --surface:     #171E1A;
    --ink:         #E9EDE7;
    --muted:       #98A69C;
    --rule:        #262F29;
    --rule-strong: #3A463E;
    --accent:      #55B98A;
    --accent-ink:  #7FD0A8;
    --accent-soft: #172E24;
    --shadow:      0 1px 0 rgba(0, 0, 0, .3);
  }
}

/* Thème sombre choisi explicitement */
:root[data-theme="dark"] {
  --ground:      #0F1411;
  --surface:     #171E1A;
  --ink:         #E9EDE7;
  --muted:       #98A69C;
  --rule:        #262F29;
  --rule-strong: #3A463E;
  --accent:      #55B98A;
  --accent-ink:  #7FD0A8;
  --accent-soft: #172E24;
  --shadow:      0 1px 0 rgba(0, 0, 0, .3);
}


/* =====================================================================
   2. BASE
   ===================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  text-wrap: balance;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 600; }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* Une adresse e-mail longue est insécable : sans cela elle élargit la
     page entière sur un écran étroit. */
  overflow-wrap: break-word;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Étiquette en petites capitales monospace, utilisée dans toutes les pages */
.label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.label--accent { color: var(--accent); }


/* =====================================================================
   3. GABARITS DE PAGE
   ===================================================================== */

/* Gabarit large : page d'accueil */
.page {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}

/* Gabarit étroit : pages de texte suivi (mentions légales) */
.page--texte { max-width: 46rem; padding: 0 clamp(1.25rem, 5vw, 2.5rem) 4rem; }

/* Gabarit centré : confirmation, pages de retour du formulaire */
body.centre {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

body.centre main {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.centre h1 { font-size: var(--step-3); }


/* =====================================================================
   4. EN-TÊTE ET PIED DE PAGE
   ===================================================================== */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.75rem 0 0;
}

.masthead--rule { padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); }

.masthead__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}


/* Menu principal — n'apparaît que lorsqu'au moins une rubrique est publiée */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  align-items: baseline;
}

.nav a {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  text-decoration: none;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: var(--ink); }

.nav a.nav__actif { color: var(--ink); border-bottom-color: var(--accent); }

/* Rubrique à sous-menu — s'ouvre au survol sur les appareils pointeurs,
   au clic sur le chevron partout, et au clavier par le focus. */
.nav__groupe { position: relative; display: flex; align-items: baseline; gap: .25rem; }

.nav__bascule {
  background: none;
  border: 0;
  padding: .25rem;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
  line-height: 0;
}

.nav__bascule svg { width: .68rem; height: .68rem; display: block; }
.nav__bascule:hover { color: var(--ink); }
.nav__bascule[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__sous {
  position: absolute;
  top: 100%;
  right: 0;
  margin: .45rem 0 0;
  padding: .35rem 0;
  list-style: none;
  min-width: 15rem;
  background: var(--ground);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 20px rgba(20, 26, 22, .10);
  z-index: 20;

  /* Masqué par visibility plutôt que par display : l'ouverture peut ainsi
     être animée, et les liens restent hors du parcours clavier tant que le
     panneau est fermé. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.35rem);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

/* Comble l'espace entre la rubrique et le panneau : sans cela, le survol
   se perd en descendant vers le sous-menu. */
.nav__sous::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.5rem;
  height: .5rem;
}

/* Le panneau reste ouvert tant qu'un de ses liens a le focus, mais le focus
   sur le bouton lui-même n'ouvre rien : sinon la touche Échap ne pourrait
   jamais refermer le menu, le focus revenant sur le bouton. */
.nav__sous[data-ouvert],
.nav__sous:focus-within {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

@media (hover: hover) {
  .nav__groupe:hover .nav__sous {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__sous { transition: none; transform: none; }
}

.nav__sous a {
  display: block;
  padding: .5rem 1.1rem;
  border-bottom: 0;
  color: var(--muted);
  white-space: nowrap;
}

.nav__sous a:hover { color: var(--ink); background: var(--surface); }

/* Lien d'action en bas de carte : doit se voir comme une action, pas
   comme un lien de bas de paragraphe. */
.lien-action {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  padding-top: .4rem;
}

.lien-action:hover { text-decoration: underline; text-underline-offset: 4px; }
.lien-action span { transition: transform .15s ease; }
.lien-action:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .lien-action span { transition: none; }
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding-top: 2.5rem;
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}


/* =====================================================================
   5. BOUTONS
   ===================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.4rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ground);
  cursor: pointer;
}

.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn--ghost {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--rule-strong);
}

.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

.btn--seul { align-self: flex-start; margin-top: .5rem; }


/* =====================================================================
   6. SECTIONS DE LA PAGE D'ACCUEIL
   ===================================================================== */

.band {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3.75rem 0;
  border-top: 1px solid var(--rule);
}

.band__head {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-width: var(--measure);
}

.band__head p.lede { color: var(--muted); max-width: var(--measure); }

.hero {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 3.25rem 0 3.75rem;
}

.hero h1 { max-width: 17ch; }
.hero__lede { font-size: var(--step-1); max-width: var(--measure); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  padding-top: .5rem;
}

/* Bandeau de fiche — motif de cellules de tableur */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.facts > div {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--rule);
}

.facts > div:last-child { border-right: 0; }

.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  line-height: 1.4;
}

/* Grille de cellules */
.cells {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.cell {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.6rem 1.5rem;
  background: var(--ground);
}

.cell p { color: var(--muted); }

.cell ul {
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: var(--step--1);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}

.cell li { padding-left: 1.1rem; position: relative; line-height: 1.45; }

.cell li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .45rem;
  height: 1px;
  background: var(--accent);
}

/* Déroulé numéroté */
.steps {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 14rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 1.4rem .25rem;
  background: var(--ground);
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  padding-top: .2rem;
}

.step p { color: var(--muted); }

/* Liste de points dans une étape de programme */
.liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  color: var(--muted);
}

.liste li { padding-left: 1.1rem; position: relative; line-height: 1.5; }

.liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .45rem;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 46rem) {
  .step { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .5rem 1rem; }
  /* Tout ce qui n'est pas le numéro se range dans la seconde colonne.
     Viser uniquement les paragraphes laissait les blocs de liste tomber
     dans la colonne du numéro, large de 3,5 rem : un mot par ligne. */
  .step > *:not(.step__num) { grid-column: 2; }
}

/* Cadre administratif */
/* Six entrées : la largeur minimale force trois colonnes, donc deux
   rangées pleines. Avec un minimum plus faible, la grille passait à
   quatre colonnes et laissait deux cellules vides en bas. */
.frame {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.frame div {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
}

.frame p { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }



/* ---------- Distinction mise en avant ---------- */

.credential {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--accent);
  background: var(--surface);
  max-width: var(--measure);
}

.credential strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -.01em;
}

.credential span { color: var(--muted); font-size: var(--step--1); }


/* ---------- Portrait et bloc biographique ---------- */

.portrait { display: block; width: 100%; height: auto; }

/* Dans une page de texte suivi, le portrait ne doit pas s'étirer au-delà
   de la définition de la source : il deviendrait flou. */
.prose .portrait { max-width: 22rem; }

.bio {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 46rem) {
  .bio { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .bio .portrait { max-width: 15rem; }
}

.bio__texte { display: flex; flex-direction: column; gap: .9rem; max-width: var(--measure); }
.bio__texte p { color: var(--muted); }

/* =====================================================================
   7. CONTACT ET FORMULAIRE
   ===================================================================== */

.contact {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: start;
  padding: 3.5rem 0 1rem;
  border-top: 2px solid var(--ink);
}

@media (max-width: 52rem) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}

.contact__aside { display: flex; flex-direction: column; gap: 1.5rem; }

.contact__direct {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.4rem 1.5rem;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
}

.contact__line { display: flex; flex-direction: column; gap: .2rem; }

.contact__line a,
.contact__line span.valeur {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
}

form { display: flex; flex-direction: column; gap: 1.1rem; }

.champ { display: flex; flex-direction: column; gap: .35rem; }

.champ__duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem;
}

label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .01em;
}

.optionnel { color: var(--muted); font-weight: 500; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  padding: .65rem .8rem;
  width: 100%;
}

textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }

.consentement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
}

.consentement label {
  font-weight: 400;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
}

.consentement input { margin-top: .25rem; }

/* Champ piège anti-robot : hors écran, jamais masqué par display:none
   pour rester rempli par les robots qui exécutent peu de CSS */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* =====================================================================
   8. TEXTE SUIVI — mentions légales, futures pages de contenu
   ---------------------------------------------------------------------
   Les marges de paragraphes et de titres ne s'appliquent que dans .prose,
   pour ne pas perturber les sections composées de la page d'accueil.
   ===================================================================== */

/* Interligne plus aéré : ces pages se lisent en continu */
.prose { line-height: 1.65; }

.prose h1 { font-size: 2.3rem; margin: 2.5rem 0 .5rem; }
.prose h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; margin: 2.75rem 0 .25rem; }
.prose h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .1rem; }
.prose p  { margin: .85rem 0; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin: .4rem 0; }

.prose .chapo { color: var(--muted); }

.prose .note {
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  color: var(--muted);
}

/* Liste de définitions en encart — identité de l'éditeur, hébergeur */
.prose dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: .55rem 1.5rem;
  margin: 1.25rem 0;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.prose dt {
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  color: var(--muted);
}

.prose dd { margin: 0; }

@media (max-width: 34rem) {
  .prose dl { grid-template-columns: minmax(0, 1fr); gap: .1rem 0; padding: 1.1rem 1.2rem; }
  .prose dt { margin-top: .75rem; }
  .prose dl > dt:first-of-type { margin-top: 0; }
}

.prose footer { margin-top: 3.5rem; padding-top: 1.75rem; }


/* =====================================================================
   9. ENCART D'INFORMATION — page de confirmation, messages d'erreur
   ===================================================================== */

.encart {
  padding: 1.2rem 1.4rem;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  color: var(--ink);
}

.encart--alerte {
  background: transparent;
  border-style: dashed;
  border-color: var(--rule-strong);
}

:where(body.centre) p { color: var(--muted); }
body.centre .encart { color: var(--ink); }

:where(body.centre) ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  color: var(--muted);
}


/* =====================================================================
   10. ACCESSIBILITÉ
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}