/* =========================================================================
   components.css — En-tête, navigation, pied de page, boutons, cartes, filets.
   Rappel charte : aucune box-shadow, aucun dégradé, icônes en trait fin
   monochromes, boutons à libellé MAJUSCULES espacées + flèche « → ».
   ========================================================================= */

/* --- Boutons ---------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  padding: 0.85em 1.4em;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-accent-strong);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.bouton::after { content: "→"; font-weight: 400; }
.bouton--plein {
  background-color: var(--color-accent-strong);
  color: var(--color-text-on-dark);
}
.bouton--plein:hover,
.bouton--plein:focus-visible { background-color: transparent; color: var(--color-accent-strong); }
.bouton--contour { background-color: transparent; color: var(--color-accent-strong); }
.bouton--contour:hover,
.bouton--contour:focus-visible { background-color: var(--color-accent-strong); color: var(--color-text-on-dark); }
/* Variante sur fond sombre */
.section--sombre .bouton { border-color: var(--color-text-on-dark); color: var(--color-text-on-dark); }
.section--sombre .bouton--plein { background-color: var(--color-text-on-dark); color: var(--color-accent-strong); }
.section--sombre .bouton--plein:hover,
.section--sombre .bouton--plein:focus-visible { background-color: transparent; color: var(--color-text-on-dark); }

/* Lien texte avec flèche (sans bouton) */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2em;
  color: var(--color-accent-strong);
}
.lien-fleche::after { content: "→"; }

/* --- Icônes en trait fin (line icons) --------------------------------- */
.icone { width: 1.4em; height: 1.4em; stroke: currentColor; stroke-width: 1.4; fill: none; flex: none; }

/* =========================================================================
   EN-TÊTE
   ========================================================================= */
.site-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-accent-strong);          /* header sombre, même teinte que le footer */
  border-bottom: 1px solid var(--color-accent-strong);   /* filet invisible : hauteur ~93px inchangée */
}

/* Desktop : 3 colonnes équilibrées (gauche | logo | droite).
   Les deux colonnes 1fr étant égales, le logo (colonne auto) reste CENTRÉ.
   Le bouton « Espace pro » est poussé à l'extrémité droite (margin-left:auto)
   et sort ainsi du rythme des 3 colonnes, sans décentrer le logo. */
.site-entete__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
  min-height: 92px;
  padding-block: var(--space-1);
}

/* Colonne gauche : liens collés au logo (alignés à droite de leur cellule) */
.nav-principale--gauche { justify-self: end; }

/* Colonne centrale : logo agrandi, point focal centré, cliquable vers / */
.site-entete__logo { justify-self: center; display: inline-flex; align-items: center; }
.site-entete__logo img { height: 56px; width: auto; }

/* Cellule droite : nav droite collée au logo + Espace pro à l'extrémité + hamburger */
.site-entete__droite {
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.entete-espace-pro {
  margin-left: auto;                          /* à l'extrême droite */
  white-space: nowrap;
  border-color: var(--color-text-on-dark);    /* bouton « ghost » clair sur le header sombre */
  color: var(--color-text-on-dark);
}
.entete-espace-pro:hover,
.entete-espace-pro:focus-visible {
  background-color: var(--color-text-on-dark);
  color: var(--color-accent-strong);
}

/* --- Listes de liens (colonnes desktop) ------------------------------ */
.nav-principale__liste {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
}
.nav-principale__lien {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-on-dark);
  padding: 0.5em 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;                 /* aucun libellé ne retombe sur deux lignes */
}
.nav-principale__lien:hover { border-bottom-color: var(--color-accent-label); }
.nav-principale__lien[aria-current="page"] { border-bottom-color: var(--color-text-on-dark); }

/* --- Rubrique « Développement » : accent dev clair sur le header sombre ------
   L'élément porte data-theme="dev" (posé dans la macro nav). Sur fond sombre,
   on utilise la variante CLAIRE de l'accent dev : --color-accent-label vaut
   #9FC1DA sous [data-theme="dev"] (défini dans tokens.css). Le sélecteur composé
   l'emporte sur la couleur de base des liens (desktop ET mobile). */
.nav-principale__lien.lien-dev,
.nav-mobile__lien.lien-dev { color: var(--color-accent-label); }
.lien-dev::before {                     /* petite pastille sobre en accent dev clair */
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.42em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--color-accent-label);
  vertical-align: 0.08em;
}

/* --- Menu mobile (panneau déroulant, masqué en desktop) -------------- */
.nav-mobile { display: none; }
.nav-mobile__liste { list-style: none; }

/* --- Bouton hamburger (mobile) --------------------------------------- */
.hamburger {
  display: none;                 /* affiché seulement en mobile (voir media query) */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--color-text-on-dark);   /* clair sur header sombre */
  border-radius: var(--border-radius);
  cursor: pointer;
  flex: none;
}
.hamburger__trait { display: block; height: 1.5px; background-color: var(--color-text-on-dark); transition: transform 0.2s ease, opacity 0.2s ease; }
.hamburger[aria-expanded="true"] .hamburger__trait:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__trait:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__trait:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Comportement responsive (< 1024px : menu hamburger) ------------- */
@media (max-width: 1023px) {
  .site-entete { position: relative; }         /* ancre le panneau mobile */

  /* En-tête mobile : logo à gauche, Espace pro + hamburger à droite */
  .site-entete__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-2);
    min-height: 72px;
  }
  .site-entete__logo img { height: 40px; }

  /* Les deux colonnes desktop laissent place au menu mobile */
  .nav-principale--gauche,
  .nav-principale--droite { display: none; }

  /* Espace pro + hamburger doivent tenir avec le logo, même sur petit écran
     (~360px). Le bouton reste transparent/bordure fine, mais compact. */
  .site-entete__droite { gap: var(--space-1); }
  .entete-espace-pro { margin-left: 0; padding: 0.6em 0.95em; font-size: 0.72rem; }
  .hamburger { display: flex; }

  /* Panneau déroulant : liste complète des rubriques (ordre gauche → droite) */
  .nav-mobile {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background-color: var(--color-accent-strong);          /* panneau sombre, comme le header */
    border-bottom: 1px solid rgba(245, 242, 234, 0.18);    /* filet clair discret (comme le footer) */
    display: none;
  }
  .nav-mobile[data-ouvert="true"] { display: block; }
  .nav-mobile__liste {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
  }
  .nav-mobile__liste > li { width: 100%; border-top: 1px solid rgba(245, 242, 234, 0.18); }
  .nav-mobile__liste > li:first-child { border-top: 0; }
  .nav-mobile__lien {
    display: block;
    padding: var(--space-2) 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text-on-dark);
  }
}

/* =========================================================================
   CARTES (formations, blocs d'info) — filet fin, jamais d'ombre
   ========================================================================= */
.carte {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--border-radius);
  background-color: transparent;
}
.carte__titre { font-family: var(--font-display); font-size: 1.5rem; }
.carte__meta { font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-secondary); }
.carte__pied { margin-top: auto; padding-top: var(--space-2); }

/* Bloc transverse (financement, accessibilité) */
.bloc-transverse { padding: var(--space-4); border: var(--border-hairline); border-radius: var(--border-radius); }

/* Liste de définitions pour les fiches formation (structure RNQ) */
.fiche-dl { display: grid; gap: 0; }
.fiche-dl > div { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-top: var(--border-hairline); }
.fiche-dl > div:first-child { border-top: 0; }
@media (min-width: 720px) { .fiche-dl > div { grid-template-columns: 220px 1fr; gap: var(--space-3); } }
.fiche-dl dt { font-size: 0.76rem; text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 600; color: var(--color-accent-strong); }
.fiche-dl dd { margin: 0; color: var(--color-text-secondary); }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.site-pied { background-color: var(--color-accent-strong); color: var(--color-text-on-dark); padding-block: var(--space-5); }
.site-pied a { color: var(--color-text-on-dark); }
.site-pied__grille { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .site-pied__grille { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-pied__logo img { height: 44px; width: auto; }
.site-pied__titre { font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent-label); margin-bottom: var(--space-2); }
.site-pied__liens { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.site-pied__liens a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-pied__liens a:hover { border-bottom-color: var(--color-accent-label); }
.site-pied__bas { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(245,242,234,0.18); font-size: 0.8rem; color: var(--color-accent-label); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: space-between; }
.qualiopi-emplacement { border: 1px dashed var(--color-accent-label); border-radius: var(--border-radius); padding: var(--space-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent-label); display: inline-block; text-decoration: none; }

/* =========================================================================
   MOTIFS DÉCORATIFS DISCRETS (1 à 2 par page maximum)
   ========================================================================= */
.texte-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}
.motif { color: var(--color-accent-label); opacity: 0.9; }        /* teinte des SVG décoratifs */

/* Emplacement photo (aucune image inventée dans cette version) */
.photo-emplacement {
  border: 1px dashed #C3BEAE;
  border-radius: var(--border-radius);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

/* Portrait de l'intervenant (page À propos) */
.photo-portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--border-radius);
  border: 1px solid #C3BEAE;
}

/* Page « Bientôt disponible » */
.bientot { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-3); }

/* En-tête de page (titre + chapeau) */
.entete-page { padding-block: var(--space-5) var(--space-4); }
.entete-page h1 { max-width: 20ch; }

/* =========================================================================
   HERO ACCUEIL — une seule colonne centrée, motif décoratif en arrière-plan.
   (Scopé à la hero de l'accueil ; n'affecte aucune autre section.)
   ========================================================================= */
.hero__contenu {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
/* Le texte passe au-dessus du motif d'arrière-plan */
.hero__contenu > :not(.hero__motif) { position: relative; z-index: 1; }
.hero__contenu .lead { margin-inline: auto; }        /* centre le sous-titre (max-width 60ch) */
.hero__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: none;
  margin-top: var(--space-3);
}
/* Motif : centré derrière le texte, très discret (pas d'ombre, pas de couleur vive).
   Placé après .motif pour que cette opacité l'emporte. */
.hero__motif {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Dimensionné par la HAUTEUR (logo « tête » en portrait 737×1224) pour
     conserver l'empreinte verticale du motif précédent (~520px) sans le
     déformer ni déborder de la hero ; la largeur suit le ratio réel. */
  width: auto;
  height: min(520px, 70vh);
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* =========================================================================
   FICHES FORMATION & HUB — badge, blocs résumé, listes, accordéons <details>.
   (Scopé aux formations ; n'affecte ni le header, ni la hero, ni les eyebrows.)
   ========================================================================= */

/* Badge « Certification ICDL · RS… » — contour fin, couleurs de la palette */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 600;
  color: var(--color-accent-strong);
  border: var(--border-hairline);
  border-radius: var(--border-radius);
  padding: 0.4em 0.75em;
}

/* Blocs du résumé visible : séparés par un filet fin, espacement généreux */
.fiche-bloc + .fiche-bloc {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}
.fiche-bloc h2 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin-bottom: var(--space-2); }
.fiche-note { font-style: italic; color: var(--color-text-secondary); margin-bottom: var(--space-2); }

/* Listes à puces (prérequis, objectifs) */
.liste-puces {
  list-style: disc;
  padding-left: 1.3em;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}
.liste-puces li { max-width: 70ch; }

/* Programme détaillé (liste numérotée) */
.liste-programme {
  list-style: decimal;
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}
.liste-programme li { max-width: 74ch; }
.liste-programme strong { color: var(--color-text); }

/* Ligne tarif sur les cartes du hub */
.carte__tarif { font-size: 0.85rem; font-weight: 500; color: var(--color-text); }

/* --- Accordéons <details>/<summary> (natifs, navigation clavier native) --- */
.accordeons { border-top: var(--border-hairline); margin-top: var(--space-3); }
.accordeon { border-bottom: var(--border-hairline); }
.accordeon > summary {
  list-style: none;                 /* retire le triangle par défaut */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
}
.accordeon > summary::-webkit-details-marker { display: none; }  /* Safari / anciens Chrome */
.accordeon > summary::after {                     /* signe discret « + » (fermé) */
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  color: var(--color-accent-strong);
}
.accordeon[open] > summary::after { content: "–"; }             /* « – » (ouvert) */
.accordeon > summary:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 3px; }
.accordeon__corps { padding: 0 0 var(--space-3); color: var(--color-text-secondary); }
.accordeon__corps > :first-child { margin-top: 0; }

/* --- Certification Qualiopi dans le pied de page ----------------------
   Logo officiel dans son cartouche blanc (fichier 72 dpi, fond blanc intégré,
   non recadré / non recoloré). Taille au-dessus du minimum réglementaire
   (23×10 mm ≈ 90×40 px) ; les marges tiennent lieu de zone de protection. */
.footer-qualiopi { margin-top: var(--space-4); }
.qualiopi-logo {
  display: block;
  height: 60px;                 /* ratio 1,866 → ~112 px de large (au-dessus de 90×40 px) */
  width: auto;
  margin: var(--space-3) 0 var(--space-2);   /* zone de protection autour du logo */
}
.qualiopi-mention {
  max-width: 42ch;
  margin: 0;
  font-size: 0.64rem;           /* mention à taille égale/inférieure à « processus certifié » */
  line-height: 1.45;
  color: var(--color-accent-label);
}

/* --- Pages légales longues (CGV, Règlement intérieur) : sommaire latéral sticky ---
   Desktop (≥ 1024 px, même point de rupture que le header) : deux colonnes,
   le « Sommaire » suit le défilement (position: sticky) sous le header — lui-même
   sticky, ~92 px de haut. S'il dépasse la hauteur de l'écran, il défile en interne.
   Mobile (< 1024 px) : disposition inchangée (bloc empilé, sommaire inline, non sticky). */
@media (min-width: 1024px) {
  .doc-legal {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  .doc-legal__filet { display: none; }        /* séparateur horizontal inutile en 2 colonnes */
  .doc-legal__aside {
    position: sticky;
    top: 108px;                               /* header sticky (~92 px) + marge de sécurité */
    max-height: calc(100vh - 128px);          /* si plus haut que l'écran : scroll interne */
    overflow-y: auto;
  }
  .doc-legal__aside .sommaire { margin: 0; }
  .doc-legal__main { max-width: 74ch; }       /* confort de lecture */
}