/* ==========================================================================
   CHARTE DESIGN SYSTEM RAYONIS - FEUILLE DE STYLE FINALE (v2)
   Accessibilité : WCAG 2.2 (AAA Texte courant / AA UI & Composants)
   Police : Atkinson Hyperlegible Next
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES CSS (PALETTE OFFICIELLE & SYSTEME)
   -------------------------------------------------------------------------- */
:root {
  /* Police de caractères */
  --font-family-main: 'Atkinson Hyperlegible Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Rampe Teal (Texte principal & Structure) */
  --teal-2: #f3fbf9;   /* Fond teinté clair & fond de badge */
  --teal-9: #12a594;   /* Accent vif décoratif */
  --teal-11: #008573;  /* Survol bouton & anneau de focus clavier */
  --teal-12: #0d3d38;  /* Couleur principale : Titres, paragraphes & boutons pleins */

  /* Rampe Tomato (Éléments interactifs secondaires) */
  --tomato-2: #fff8f7;  /* Fond clair badge Tomato */
  --tomato-9: #e54d2e;  /* Couleur secondaire : Boutons d'action */
  --tomato-12: #5c271f; /* Ombre portée des boutons & texte de badge */

  /* Rampe Amber (Survol & Badges) */
  --amber-2: #fefbe9;   /* Fond clair badge Amber */
  --amber-9: #ffc53d;   /* Couleur secondaire : Survol des boutons */
  --amber-12: #4f3422;  /* Texte pour badges Amber */

  /* Rampe Red (Usage EXCLUSIF aux erreurs) */
  --red-9: #e5484d;    /* Bordures des champs en erreur */
  --red-12: #641723;   /* Texte des messages d'erreur */

  /* Rampe Sage (Neutres & Structure) */
  --sage-2: #f7f9f8;   /* Fond neutre de page et des cartes */
  --sage-7: #cbcfcd;   /* Bordures décoratives des cartes */
  --sage-9: #868e8b;   /* Bordures fonctionnelles des champs */

  /* Texte courant (Contraste 7:1 à 13:1 sur fond blanc/sage-2) */
  --text-main: #444444;

  /* Espacements & Rayons */
  --spacing-unit: 8px;
  --radius-badge: 6px;
  --radius-input: 0px; /* Coins nets obligatoires pour les formulaires */

  /* Alias pour le menu mobile */
  --border-color: var(--sage-7);
  --nav-menu-bg: rgba(255, 255, 255, 0.98);

  /* Hauteur de la navbar fixe : valeur de repli, mesurée et ajustée
     dynamiquement par scripts/Header.js une fois le header chargé */
  --navbar-height: 68px;
}

/* --------------------------------------------------------------------------
   2. REINITIALISATION & REGLES GLOBALES D'ACCESSIBILITE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* Support du zoom texte 200% */
  scroll-behavior: smooth;
  overflow-x: hidden; /* Filet de sécurité : jamais de scroll horizontal,
                         même en cas de débordement sous-pixel résiduel */
}

body {
  font-family: var(--font-family-main);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5; /* Minimum 1.5 pour l'accessibilité */
  color: var(--text-main);
  background-color: var(--sage-2);
  -webkit-font-smoothing: antialiased;
  /* Réserve la place occupée par le menu, désormais fixe */
  padding-top: var(--navbar-height);
}

/* Eviter le noir pur (#000000) et forcer le contraste AAA */
p, li, span, label, td {
  color: var(--text-main);
}

/* Empêche le menu fixe de recouvrir la cible d'un lien d'ancre (#hero, etc.) */
[id] {
  scroll-margin-top: var(--navbar-height);
}
main {
  display: grid;
  place-items: center;
  padding: 0rem 6rem;
}

/* Par défaut, un item de grille ne peut pas rétrécir sous la largeur
   minimale de son contenu (ex. une rangée de boutons qui ne s'enroule
   pas) : ça pousse toute la section hors de l'écran sur mobile plutôt
   que de la faire rétrécir. min-width:0 supprime ce plancher. */
main > * {
  min-width: 0;
}
@media (max-width: 800px) {
 main {
  display: grid;
  place-items: center;
  padding: 0rem 0.5rem;
  gap: 1.5rem;
  width: 100%;
}}
section {
  display: grid;
  place-items: center;
}

/* Lien d'évitement (Skip link pour RGAA / Navigation clavier) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--teal-12);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  text-decoration: none;
  font-weight: 700;
  clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--amber-9);
}

/* Anneau de Focus Clavier Explicite (100% des éléments interactifs) */
:focus-visible {
  outline: 3px solid var(--teal-11) !important;
  outline-offset: 3px !important;
}
/* ==========================================================================
   NAVIGATION MOBILE & BURGER (CORRECTIFS)
   ========================================================================== */

/* Alignement du bouton burger à droite */
.nav-right-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Bouton Hamburger */
.nav-toggle {
  display: none; /* Masqué sur Desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 102; /* Toujours au-dessus du menu */
}

.nav-toggle span {
  width: 100%;
  height: 2.5px;
  background-color: var(--text-main);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Transformation des barres en "X" quand le menu est ouvert */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* Adaptations écrans Mobiles et Tablettes (<= 900px) */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex; /* Affiché sur Mobile */
  }

  .nav-menu {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--navbar-height)); /* Occupe tout l'écran vertical */
    background: var(--nav-menu-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 2rem;
    gap: 1.5rem;
    
    /* Animation d'ouverture fluide */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 100;
  }

  /* État ouvert du menu */
  .nav-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-link {
    font-size: 1.1rem;
    width: 100%;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border-color);
  }

  .btn-nav {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
  }

  /* Correctifs Responsive Global */
  .layer {
    padding: 4rem 1.25rem 3rem 1.25rem;
  }

  .cards-wrapper {
    flex-direction: column;
    gap: 1.5rem;
  }

  .process-cycle-wrapper {
    display: none !important; /* Masque le SVG complexe sur mobile */
  }

  .process-mobile-list {
    display: flex !important;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
  }

  .contact-container {
    width: 100%;
    padding: 0 1rem;
  }
}
/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE (Atkinson Hyperlegible Next)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--teal-12);
  line-height: 1.25;
  margin-bottom: 1rem;
}

/* H1 : Extrabold 800 */
h1 {
  font-weight: 800;
  font-size: 2.25rem;
}

/* Sous-titres & H2 / H3 : Medium 500 */
h2 {
  font-weight: 500;
  font-size: 1.75rem;
}

h3 {
  font-weight: 500;
  font-size: 1.35rem;
}

p {
  margin-bottom: 1rem;
}

strong {
  font-weight: 700;
}

/* Restaure l'espace réservé aux puces, supprimé par le reset global
   (* { padding: 0 }) : sans ça, le marqueur "outside" se retrouve
   positionné hors du conteneur au lieu d'être en retrait du texte. */
ul, ol {
  padding-left: 1.25rem;
}

/* Interdiction des blocs complets en majuscules ou italique */
.no-all-caps {
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   4. BOUTONS & ELEMENTS INTERACTIFS ("Coins Pixels" 1 marche de 8px)
   -------------------------------------------------------------------------- */
.btn,  button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* Zone tactile minimale 44x44px */
  min-width: 44px;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-family-main);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  
  /* Signature Visuelle : Pixel Corner (1 marche de 8px) */
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0, 
    calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}
.card-footer{
  display:grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--sage-7);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  gap: 0.75rem;
}
.btn-card{
  place-self: center;
}

/* Bouton Principal (Teal 12) */
.btn-primary, .btn-main {
  background-color: var(--teal-12);
  color: #ffffff;
}

.btn-primary:hover, .btn-main:hover {
  background-color: var(--teal-11);
  color: #ffffff;
}

/* Bouton Secondaire (Tomato 9 avec ombre Tomato 12) */
.btn-secondary, .submit-btn, .btn-nav, .btn-card {
  background-color: var(--tomato-9);
  color: #ffffff;
  box-shadow: inset 0 -4px 0 var(--tomato-12);
}

/* Survol Secondaire : Transition vers Amber 9 */
.btn-secondary:hover, .submit-btn:hover, .btn-nav:hover, .btn-card:hover {
  background-color: var(--amber-9);
  color: var(--amber-12);
  box-shadow: inset 0 -4px 0 var(--amber-12);
}

/* --------------------------------------------------------------------------
   5. CARTES UI ("Coins Pixels" 3 marches de 8px & Bordures d'escalier)
   -------------------------------------------------------------------------- */

.services-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  background-color: var(--sage-2);
} 
   /* Conteneur / Enveloppe permettant de dessiner la bordure le long du clip-path */
.cards-wrapper, .card-wrapper, .cards-grid {
  filter: 
    drop-shadow(1px 0 0 var(--sage-7)) 
    drop-shadow(-1px 0 0 var(--sage-7)) 
    drop-shadow(0 1px 0 var(--sage-7)) 
    drop-shadow(0 -1px 0 var(--sage-7));
}

.card, .card-item {
  display: grid;
  background-color: #ffffff;
  border: none; /* Désactivation du border rectangulaire tronqué */
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  height: 100%;
  
  /* Signature Visuelle : Pixel Corner Cards (3 marches de 8px = 24px) */
  clip-path: polygon(
    0 24px, 8px 24px, 8px 16px, 16px 16px, 16px 8px, 24px 8px, 24px 0,
    calc(100% - 24px) 0, calc(100% - 24px) 8px, calc(100% - 16px) 8px, calc(100% - 16px) 16px, calc(100% - 8px) 16px, calc(100% - 8px) 24px, 100% 24px,
    100% calc(100% - 24px), calc(100% - 8px) calc(100% - 24px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%,
    24px 100%, 24px calc(100% - 8px), 16px calc(100% - 8px), 16px calc(100% - 16px), 8px calc(100% - 16px), 8px calc(100% - 24px), 0 calc(100% - 24px)
  );

  /* Fallback drop-shadow individuel si la carte n'est pas dans un wrapper */
  filter: 
    drop-shadow(1px 0 0 var(--sage-7)) 
    drop-shadow(-1px 0 0 var(--sage-7)) 
    drop-shadow(0 1px 0 var(--sage-7)) 
    drop-shadow(0 -1px 0 var(--sage-7));
}
/* --------------------------------------------------------------------------
   6. process stape
   -------------------------------------------------------------------------- */

.process-grid-container {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
}

/* Grille 3 Colonnes x 5 Lignes */
.process-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 120px minmax(240px, 1fr);
  grid-template-rows: auto 60px auto 80px auto;
  gap: 0.75rem;
  align-items: center;
  justify-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Placement Ligne 1 --- */
.step-1     { grid-column: 1 / span 3; grid-row: 1; place-self: center; } /* Centré en haut */

/* --- Placement Ligne 2 --- */
.arrow-5-1  { grid-column: 1; grid-row: 2; } /* Diagonale ↗ */
.arrow-1-2  { grid-column: 3; grid-row: 2; } /* Diagonale ↘ */

/* --- Placement Ligne 3 --- */
.step-5     { grid-column: 1; grid-row: 3; } /* Gauche */
.step-2     { grid-column: 3; grid-row: 3; } /* Droite */

/* --- Placement Ligne 4 --- */
.arrow-4-5     { grid-column: 1; grid-row: 4; } /* Flèche ↑ */
.process-center { grid-column: 2; grid-row: 4; } /* Rond central */
.arrow-2-3     { grid-column: 3; grid-row: 4; } /* Flèche ↓ */

/* --- Placement Ligne 5 --- */
.step-4     { grid-column: 1; grid-row: 5; } /* Gauche */
.arrow-3-4  { grid-column: 2; grid-row: 5; } /* Flèche ← */
.step-3     { grid-column: 3; grid-row: 5; } /* Droite */

/* --- Style des Cartes (WCAG & Charte Rayonis) ---
   Même bordure "coins pixels" que les cartes de la section Services :
   même découpe (3 marches de 8px) et même technique de bordure via
   drop-shadow. Important : filter (drop-shadow) et clip-path ne peuvent
   PAS cohabiter sur le même élément (le clip-path rogne aussi l'ombre) —
   d'où la séparation en deux couches, comme .card-wrapper > .card. */
.process-card {
  filter:
    drop-shadow(1px 0 0 var(--sage-7))
    drop-shadow(-1px 0 0 var(--sage-7))
    drop-shadow(0 1px 0 var(--sage-7))
    drop-shadow(0 -1px 0 var(--sage-7));
}

.process-card-shape {
  background: #ffffff;
  padding: 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
  max-width: 360px;

  clip-path: polygon(
    0 24px, 8px 24px, 8px 16px, 16px 16px, 16px 8px, 24px 8px, 24px 0,
    calc(100% - 24px) 0, calc(100% - 24px) 8px, calc(100% - 16px) 8px, calc(100% - 16px) 16px, calc(100% - 8px) 16px, calc(100% - 8px) 24px, 100% 24px,
    100% calc(100% - 24px), calc(100% - 8px) calc(100% - 24px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%,
    24px 100%, 24px calc(100% - 8px), 16px calc(100% - 8px), 16px calc(100% - 16px), 8px calc(100% - 16px), 8px calc(100% - 24px), 0 calc(100% - 24px)
  );
}

.process-card .process-step {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
  border-radius: 50%;
  background-color: var(--teal-2);
  color: var(--teal-12);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-card .step-content strong {
  display: block;
  font-size: 0.95rem;
  color: var(--teal-12);
  margin-bottom: 0.25rem;
}

.process-card .step-content p {
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0;
  color: var(--text-main);
}

/* --- Style des Flèches --- */
.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height:120px;
}

.arrow-svg {
  width: 60px;
  height: 60px;
}

/* --- Macaron Central --- */
.process-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--teal-2);
  border: 2px solid var(--teal-9);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  text-align: center;
  padding: 0.5rem;
}

.center-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--teal-12);
  letter-spacing: 1px;
}

.center-sub {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--teal-9);
  margin-top: 2px;
}

/* --- Adaptation Mobile (Pile verticale fluide) --- */
@media (max-width: 800px) {
  .process-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .process-arrow, .process-center {
    display: none;
  }
}
/* --------------------------------------------------------------------------
   6. BADGES (Arrondis légers 6px & Paires de couleurs uniques)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--radius-badge);
}

/* Badge Teal */
.badge-teal {
  background-color: var(--teal-2);
  color: var(--teal-12);
}

/* Badge Tomato */
.badge-tomato {
  background-color: var(--tomato-2);
  color: var(--tomato-12);
}

/* Badge Amber */
.badge-amber {
  background-color: var(--amber-2);
  color: var(--amber-12);
}

/* --------------------------------------------------------------------------
   7. FORMULAIRES & GESTION DES ERREURS (3 Canaux)
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.form-group label {
  font-weight: 700;
  margin-bottom: 0.375rem;
  color: var(--teal-12);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  height: 44px;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-family-main);
  font-size: 1rem;
  color: var(--text-main);
  background-color: #ffffff;
  border: 1px solid var(--sage-9);
  border-radius: var(--radius-input); /* Coins nets (0px) */
  transition: border-color 0.2s ease;
}

textarea {
  height: auto;
  min-height: 120px;
}

/* État d'Erreur : Signalement par 3 canaux (Bordure + Icône + Message) */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea,
input[aria-invalid="true"] {
  border: 2px solid var(--red-9) !important;
  background-color: #fff8f8;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--red-12); /* Usage exclusif Red-12 */
}

/* Icône d'erreur SVG en pseudo-élément */
.error-message::before {
  content: "⚠";
  font-weight: bold;
  color: var(--red-9);
}

/* Message de confirmation/erreur global du formulaire (réponse de l'API) */
.form-feedback {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.form-feedback:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.form-feedback--success {
  background-color: var(--teal-2);
  color: var(--teal-12);
}

.form-feedback--error {
  background-color: #fff8f8;
  color: var(--red-12);
}

/* --------------------------------------------------------------------------
   8. EN-TETE & NAVIGATION (Header Rayonis)
   -------------------------------------------------------------------------- */
.main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 150; /* Sous la popup de contact (200), au-dessus du reste */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: #ffffff;
  border-bottom: 1px solid var(--sage-7);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--teal-12);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 1px;
}

.nav-logo img {
  width: 28px;
  height: 28px;
}

.nav-logo:hover,
.nav-logo:focus-visible {
  color: var(--teal-11);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  color: var(--teal-12);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}

.nav-link:hover {
  color: var(--teal-11);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. EN-TETE DU LOGO (Wordmark vs Sceau)
   -------------------------------------------------------------------------- */
.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-subtext {
  font-size: 2rem;
  font-weight: 500;
  color: var(--teal-12);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   10. SECTIONS PRINCIPALES (Hero, Services, Process, Contact, Pied de page)
   -------------------------------------------------------------------------- */

/* Conteneur générique des sections "layer" (Process & Contact) */
.layer {
  width: 100%;
  max-width: 1200px;
  padding: 4rem 2rem;
}

/* --- Hero --- */
.hero-container {
  width: 100%;
  max-width: 900px;
  padding: 4rem 1rem 2rem;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.hero-description {
  max-width: 700px;
  text-align: left;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.logo-image {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* --- Services --- */
.services-container {
  width: 100%;
  max-width: 1200px;
  padding: 3rem 0;
  text-align: center;
}

.card-lead {
  margin-bottom: 1rem;
}

.card-price {
  font-weight: 700;
  color: var(--teal-12);
  font-size: 1.1rem;
}

.card-price span {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-main);
}

/* --- Process --- */
.process-container {
  text-align: center;
}

/* --- Contact (formulaire chargé dans la popup, voir section 12) --- */
.contact-form {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

/* --- Pied de page --- */
.main-footer {
  width: 100%;
  background-color: var(--teal-12);
  padding: 0.5rem 2rem;
}

.main-footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.3fr;
  gap: 2rem;
  align-items: start;
  text-align: left;
}

/* Colonne du milieu : l'adresse mail et le copyright, centrés
   horizontalement et verticalement (align-self:center) pour rester
   lisibles même si les colonnes voisines sont plus hautes. Encore un peu
   de hauteur de pied de page gagnée : ces lignes n'ont plus besoin
   d'être répétées sous la colonne de marque ou dans la colonne de
   droite. */
.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 0.5rem;
  text-align: center;
}

/* Colonne de droite : liens à l'horizontale, infos légales juste en
   dessous — réunis dans une seule colonne pour garder le pied de page
   compact (l'ancienne colonne de liens empilés verticalement occupait
   une hauteur disproportionnée). */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.footer-brand .footer-logo img {
  width: 32px;
  height: 32px;
}

.footer-tagline {
  color: var(--teal-2);
  font-size: 0.9rem;
  max-width: 320px;
  margin-bottom: 0.75rem;
}

/* Filet de sécurité : joignable même si la popup de contact (JS) est
   indisponible (JavaScript désactivé, échec de chargement, etc.) */
.footer-contact {
  margin-bottom: 0;
}

.footer-contact a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--amber-9);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  text-decoration: underline;
}

/* Séparateurs "|" entre les liens : purement visuels, masqués aux
   lecteurs d'écran (aria-hidden dans le HTML) pour ne pas polluer la
   liste de liens du <nav>. */
.footer-nav span {
  color: rgba(255, 255, 255, 0.35);
}

.footer-legal {
  text-align: right;
}

.footer-legal p {
  color: var(--teal-2);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.footer-legal abbr {
  color: #ffffff;
}

.footer-copyright {
  color: var(--teal-2);
  font-size: 0.8rem;
  margin-bottom: 0 !important;
  opacity: 0.85;
}

/* Bande repliable du pied de page : masquée par défaut (attribut
   "hidden" dans le HTML), n'apparaît qu'en mode diaporama (voir plus
   bas) où l'espace vertical est compté pour tout faire tenir dans un
   seul écran. Le reste du temps, .footer-container est visible en
   entier normalement — voir la règle de repli complémentaire plus bas. */
.footer-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: none;
  border: none;
  /* appearance:none retire le style natif du <button> sur certains
     navigateurs mobiles, qui peut sinon imposer sa propre teinte de
     texte et rendre "color" ci-dessous invisible sur le fond foncé. */
  appearance: none;
  -webkit-appearance: none;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 0;
  cursor: pointer;
}

.footer-toggle:hover,
.footer-toggle:focus-visible {
  color: var(--amber-9);
}

.footer-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.footer-toggle[aria-expanded="true"] .footer-toggle-icon {
  transform: rotate(180deg);
}

@media (max-width: 700px) {
  .main-footer .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-tagline {
    max-width: none;
    margin: 0 auto;
  }

  .footer-brand .footer-logo {
    justify-content: center;
  }

  .footer-center {
    justify-content: center;
  }

  .footer-right {
    align-items: center;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
  }

  .footer-legal {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   12. POPUP CONTACT (composant ContactModal)
   -------------------------------------------------------------------------- */

/* Fond semi-opaque plein écran */
.contact-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(13, 61, 56, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 200;
}

.contact-modal-overlay[hidden] {
  display: none;
}

/* Boîte de dialogue */
.contact-modal {
  background-color: #ffffff;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  animation: contact-modal-in 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal {
    animation: none;
  }
}

@keyframes contact-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--teal-12);
  position: sticky;
  top: 0;
}

.contact-modal-title {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 1.1rem;
}

/* Bouton fermer : toujours visible, contraste fort, icône + texte
   (jamais une icône seule, pour rester clair pour tout le monde) */
.contact-modal-close {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 1.1rem;
  background-color: var(--amber-9);
  color: var(--amber-12);
  border: none;
  font-family: var(--font-family-main);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.contact-modal-close:hover,
.contact-modal-close:focus-visible {
  background-color: #ffffff;
  color: var(--teal-12);
}

.contact-modal-close span {
  font-size: 1.1rem;
}

.contact-modal-body {
  padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   13. BIBLIOTHEQUE D'ARTICLES (composant ArticleLibrary, page Journal de bord)
   -------------------------------------------------------------------------- */
.journal-container {
  width: 100%;
  max-width: 1200px;
  padding: 3rem 2rem;
  text-align: center;
}

/* Sur mobile uniquement, les marges gauche/droite des cartes (héritées
   du padding horizontal ci-dessus) sont réduites de moitié. */
@media (max-width: 700px) {
  .journal-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  text-align: left;
}

/* Bordure identique aux cartes de la section Services : même découpe
   "coins pixels" (3 marches de 8px) et même technique de bordure via
   drop-shadow sur .card-wrapper (le clip-path empêche un border classique). */
.article-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: #ffffff;
  border: none;
  position: relative;
  height: 100%;
  overflow: hidden; /* Fait suivre l'image la découpe des coins */

  clip-path: polygon(
    0 24px, 8px 24px, 8px 16px, 16px 16px, 16px 8px, 24px 8px, 24px 0,
    calc(100% - 24px) 0, calc(100% - 24px) 8px, calc(100% - 16px) 8px, calc(100% - 16px) 16px, calc(100% - 8px) 16px, calc(100% - 8px) 24px, 100% 24px,
    100% calc(100% - 24px), calc(100% - 8px) calc(100% - 24px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%,
    24px 100%, 24px calc(100% - 8px), 16px calc(100% - 8px), 16px calc(100% - 16px), 8px calc(100% - 16px), 8px calc(100% - 24px), 0 calc(100% - 24px)
  );
}

/* Emplacement réservé à l'image de l'article. Tant qu'aucune image réelle
   n'est fournie (ou si elle échoue à charger), affiche un repère visuel
   neutre plutôt qu'une icône d'image cassée. */
.article-image {
  aspect-ratio: 16 / 9;
  background-color: var(--teal-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-image--empty {
  position: relative;
}

.article-image--empty::before {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url("assets/favicon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.35;
}

.article-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-title {
  font-size: 1.05rem;
  margin: 0.5rem 0 0;
}

.article-excerpt {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.article-date {
  font-size: 0.8rem;
  color: var(--sage-9);
}

/* Pousse le bouton "Lire l'article" en bas, aligné d'une carte à l'autre
   quelle que soit la longueur de l'extrait */
.article-body .card-footer {
  margin-top: auto;
}

.article-grid-error {
  grid-column: 1 / -1;
  color: var(--red-12);
  text-align: center;
}

.article-show-all {
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   14. PAGE ARTICLE (composant ArticlePage, gabarit article.html)
   -------------------------------------------------------------------------- */
.article-detail-container {
  width: 100%;
  max-width: 760px;
  padding: 3rem 2rem 4rem;
  text-align: left;
}

.article-detail-back {
  margin-bottom: 1.5rem;
}

.article-detail-back a {
  color: var(--teal-12);
  font-weight: 700;
  text-decoration: none;
}

.article-detail-back a:hover,
.article-detail-back a:focus-visible {
  text-decoration: underline;
}

.article-detail-header .article-date {
  display: block;
  margin: 0.75rem 0 1.5rem;
}

.article-detail-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 2rem;
}

.article-detail-content p {
  margin-bottom: 1.25rem;
}

.article-not-found {
  text-align: center;
}

/* --- Bascule Texte continu / Diaporama --- */
.article-view-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.article-view-toggle[hidden] {
  display: none;
}

/* --- Diaporama (composant Slideshow) ---
   Même bordure "coins pixels" que les cartes services/articles : même
   découpe (3 marches de 8px) et même technique de bordure via drop-shadow
   sur un conteneur séparé du clip-path (voir .card-wrapper). */
.article-slideshow-mount {
  filter:
    drop-shadow(1px 0 0 var(--sage-7))
    drop-shadow(-1px 0 0 var(--sage-7))
    drop-shadow(0 1px 0 var(--sage-7))
    drop-shadow(0 -1px 0 var(--sage-7));
}

.slideshow {
  background-color: #ffffff;
  padding: 1rem;

  clip-path: polygon(
    0 24px, 8px 24px, 8px 16px, 16px 16px, 16px 8px, 24px 8px, 24px 0,
    calc(100% - 24px) 0, calc(100% - 24px) 8px, calc(100% - 16px) 8px, calc(100% - 16px) 16px, calc(100% - 8px) 16px, calc(100% - 8px) 24px, 100% 24px,
    100% calc(100% - 24px), calc(100% - 8px) calc(100% - 24px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%,
    24px 100%, 24px calc(100% - 8px), 16px calc(100% - 8px), 16px calc(100% - 16px), 8px calc(100% - 16px), 8px calc(100% - 24px), 0 calc(100% - 24px)
  );
}

.slide-progress {
  height: 4px;
  background-color: var(--sage-7);
  margin-bottom: 2rem;
}

.slide-progress-fill {
  height: 100%;
  background-color: var(--teal-9);
}

.slideshow-slides {
  min-height: 180px;
  display: flex;
  /* flex-start plutôt que center : avec le bloc catégorie/titre/date
     répété en haut de chaque diapositive, un contenu qui dépasse la
     hauteur disponible et un centrage vertical poussent ce bloc hors de
     la zone visible par défaut (le scroll ne montre pas le haut du
     contenu en premier). Un alignement en haut garantit qu'il reste
     toujours immédiatement visible. */
  align-items: flex-start;
  margin-bottom: 1.5rem;
  overflow: hidden;
  touch-action: pan-y; /* Autorise le scroll vertical de la page tout en
                          laissant le geste horizontal au swipe des diapos */
  transition: height 0.25s ease;
}

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

  body.slideshow-mode #footerContent {
    transition: none;
  }
}

.slide {
  width: 100%; /* Sans ça, un contenu sans texte (juste l'image) n'a rien
                  pour dériver sa largeur et s'effondre. */
  font-size: 1.15rem;
  line-height: 1.5;
}

/* Titre de diapositive : sur un petit écran, le diaporama tient
   désormais dans un seul écran (voir body.slideshow-mode) et l'espace
   vertical y est compté — un h2 à taille fixe (1.75rem par défaut,
   site-wide) peut alors occuper une bonne moitié de la diapo à lui
   seul. clamp() le fait rétrécir proportionnellement à la largeur
   d'écran sur mobile, sans rien changer sur desktop où le minimum du
   clamp (basé sur vw) ne peut de toute façon pas dépasser 1.75rem. */
.slide h2 {
  font-size: clamp(1.15rem, 5vw, 1.75rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.slide-subtitle {
  font-size: 1rem;
  color: var(--sage-9);
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
}

.slide ul,
.article-detail-content ul {
  margin-bottom: 1.25rem;
}

.slide li,
.article-detail-content li {
  margin-bottom: 0.5rem;
}

.slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--sage-7);
  padding-top: 0.625rem;
}

.slideshow-controls .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Desktop uniquement : les boutons Précédent/Suivant gagnent un peu plus
   d'espace intérieur, et leur texte est explicitement forcé en blanc
   pour une meilleure lisibilité sur le fond rouge/tomate. */
@media (min-width: 701px) {
  .slideshow-prev,
  .slideshow-next {
    padding: 0.75rem 2rem;
    color: #ffffff;
  }
}

.slideshow-counter {
  font-weight: 700;
  color: var(--teal-12);
  font-variant-numeric: tabular-nums;
}

/* Sur mobile, la place est comptée (voir body.slideshow-mode) : les
   boutons Précédent/Suivant perdent leur libellé texte et deviennent de
   petits boutons carrés, juste le chevron — la flèche seule reste assez
   explicite à côté du compteur "X / Y". */
@media (max-width: 700px) {
  .slideshow-btn-label {
    display: none;
  }

  .slideshow-prev,
  .slideshow-next {
    width: 44px; /* Zone tactile carrée, min-height:44px hérité de .btn */
    padding: 0.25rem; /* Réduit pour laisser plus de place au chevron */
  }

  .slideshow-prev span[aria-hidden="true"],
  .slideshow-next span[aria-hidden="true"] {
    font-size: 1.75rem;
    color: #ffffff;
  }
}
.slideshow-btn{
    color: #ffffff !Important;
}
/* --- En-tête du diaporama --- À gauche : une croix pour fermer le
   diaporama et revenir au journal de bord. À droite : le bouton "Vue
   texte continu". Sur mobile, la place est comptée (voir CSS
   body.slideshow-mode) : titre/catégorie/date n'apparaissent pas ici,
   uniquement incrustés sur la 1ère diapositive (l'image, qui leur sert
   d'arrière-plan — voir .slide-cover-* plus bas). Sur desktop
   uniquement, une colonne centrale (voir plus bas, ratio 10/80/10) les
   affiche aussi ici, au-dessus de la barre de progression. */
.slideshow-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.slideshow-header-left {
  flex-shrink: 0;
}

.slideshow-header-center {
  display: none;
}

.slideshow-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--sage-2);
  color: var(--teal-12);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.slideshow-close:hover,
.slideshow-close:focus-visible {
  background-color: var(--teal-2);
}

.slideshow-header-right {
  flex: 1 1 auto;
  display: flex;
}

.slideshow-header-right .slideshow-exit {
  width: 100%;
}

/* Colonne centrale de l'en-tête (titre/catégorie/date), desktop
   uniquement : grille à 3 colonnes de ratio 10/80/10 au lieu du flex
   mobile ci-dessus (bouton "Vue texte continu" étiré sur toute la
   largeur), pour laisser 80% de la largeur, au centre, à ces
   informations. */
@media (min-width: 701px) {
  .slideshow-header {
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
  }

  .slideshow-header-center {
    display: block;
    text-align: center;
    min-width: 0; /* Autorise le texte à se réduire/passer à la ligne
                     plutôt que de forcer la grille à s'élargir */
  }

  .slideshow-header-right {
    justify-content: flex-end;
  }

  .slideshow-header-right .slideshow-exit {
    width: auto;
  }
}

.slideshow-header-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--teal-12);
  margin-bottom: 0.25rem;
}

.slideshow-header-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.slideshow-header-meta .article-date {
  font-size: 0.85rem;
  color: var(--sage-9);
}

/* --- Diapositive de couverture (1ère diapositive) --- L'image de
   l'article remplit toute la diapo en arrière-plan ; titre, catégorie et
   date sont incrustés en bas sur un dégradé (même teinte que la marque)
   pour rester lisibles quelle que soit l'image. */
.slide.slide--cover {
  height: 100%;
  padding: 0;
}

.slide-cover-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  background-color: var(--sage-2); /* Repli visuel si l'image ne charge pas */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.slide-cover-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-cover-scrim {
  position: relative; /* Reste au-dessus de l'image, positionnée en absolute */
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(to top, rgba(13, 61, 56, 0.92), rgba(13, 61, 56, 0.55) 65%, transparent);
}

.slide-cover-scrim .badge {
  margin-bottom: 0.5rem;
}

.slide-cover-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.slide-cover-scrim .article-date {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

/* Le bloc retour/titre/catégorie/date est désormais dans l'en-tête du
   diaporama (une seule fois, voir ci-dessus), sur desktop ET mobile : les
   éléments équivalents affichés normalement en vue continue n'ont donc
   plus besoin d'un emplacement séparé au-dessus du diaporama, où ils
   feraient doublon. Masqués visuellement — pas display:none — pour que
   la section garde un nom accessible valide via
   aria-labelledby="articleDetailTitle". */
body.slideshow-mode .article-detail-back,
body.slideshow-mode .article-detail-header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Mode plein écran, mobile ET desktop (.slideshow-mode posée sur
   <body>) --- Le menu + le diaporama + le pied de page tiennent dans un
   seul écran, sans scroll de page : seule la diapositive elle-même
   défile en interne si son contenu dépasse l'espace disponible.
   Slideshow.js ne pilote plus lui-même la hauteur du conteneur (plus de
   saut à corriger entre diapositives) : ces règles CSS s'en chargent
   entièrement, à toutes les tailles d'écran. Sur mobile, le pied de page
   est en plus repliable (voir .footer-toggle / #footerContent plus bas)
   pour ne pas trop rogner l'espace laissé au diaporama. */
body.slideshow-mode {
  height: 100vh;
  /* 100vh sur mobile compte la hauteur totale de l'écran, barre
     d'adresse/navigation du navigateur comprise, même quand celle-ci est
     visible et grignote l'espace réellement disponible — d'où un léger
     scroll de page résiduel. 100dvh (hauteur de viewport "dynamique")
     correspond à l'espace réellement visible à l'instant présent ; les
     navigateurs qui ne le connaissent pas ignorent simplement cette
     ligne et gardent le repli 100vh ci-dessus. */
  height: 100dvh;
  /* Repli de secours : sur une fenêtre inhabituellement basse, mieux
     vaut un léger scroll de page que du contenu invisible (voir le
     min-height plus bas, qui garantit toujours une diapositive
     visible). Sur une fenêtre de taille normale, tout tient déjà dans
     l'écran et cette règle ne se déclenche jamais. */
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

body.slideshow-mode #footerMount {
  flex-shrink: 0;
}

body.slideshow-mode main {
  /* Passe de grid à flex ici : une ligne de grille sans hauteur
     explicite ne donne rien de concret à .article-detail-container
     pour résoudre son height:100%, qui retombe alors sur la hauteur du
     contenu et déborde sous le pied de page. Un conteneur flex donne
     une hauteur bien définie à son enfant. */
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

body.slideshow-mode .article-detail-container {
  /* Laisse le diaporama utiliser toute la largeur disponible : sinon
     "60vw"/"80vw" doivent "s'échapper" des 760px max via un hack de
     centrage peu fiable (voir plus bas). Sans contrainte de largeur
     ici, un simple margin:0 auto suffit à centrer correctement.
     Le padding horizontal (2rem, hérité de la règle de base) est aussi
     remis à zéro : sinon il réduit la largeur réellement disponible
     pour .article-slideshow-mount sans que celui-ci (qui calcule sa
     largeur en vw, indépendamment de son parent) n'en tienne compte,
     ce qui le fait déborder d'un côté et casse le centrage. */
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
}

body.slideshow-mode .article-slideshow-mount {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

body.slideshow-mode .slideshow {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

body.slideshow-mode .slide-progress,
body.slideshow-mode .slideshow-header,
body.slideshow-mode .slideshow-controls {
  flex-shrink: 0;
}

body.slideshow-mode .slideshow-slides {
  flex: 1 1 auto;
  min-height: 240px; /* Garantit toujours une zone de contenu visible,
                         même sur une fenêtre très basse */
  overflow-y: auto;
}

/* Pied de page repliable en mode diaporama : par défaut une toute
   petite bande "Pied de page ⌄" (voir .footer-toggle), le contenu
   complet (#footerContent) étant réduit à hauteur 0 et masqué. Un tap
   sur la bande le déplie (Footer.js bascule aria-expanded et fixe une
   max-height en JS, mesurée sur le contenu réel, pour une animation
   fluide sans "faux plafond" arbitraire). */
body.slideshow-mode .footer-toggle {
  display: flex;
}

body.slideshow-mode #footerContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

/* --- Largeur de la carte diaporama : 60% de l'écran sur grand desktop,
   80% sur desktop/tablette plus étroit, 100% (comportement par défaut,
   cf. .article-detail-container) sur mobile. Un simple margin:0 auto
   suffit à centrer sur le viewport, puisque .article-detail-container
   n'a plus de max-width en mode diaporama (voir plus haut) — un ancien
   hack "left:50% + margin négatif en vw" calculait le "50%" par rapport
   au parent (760px) et le "vw" par rapport au viewport : les deux
   références ne correspondaient pas, d'où un centrage faux. --- */
@media (min-width: 1200px) {
  .article-slideshow-mount {
    width: 60vw;
    margin: 0 auto;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .article-slideshow-mount {
    width: 80vw;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   15. INFOBULLES (composant Tooltip)
   -------------------------------------------------------------------------- */

/* Affordance visuelle : indique qu'un terme a une explication au survol.
   S'applique à tous les <abbr>/<dfn> avec ou sans "title" restant (le
   composant Tooltip retire "title" pendant l'affichage de sa propre bulle). */
abbr,
dfn {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--teal-9);
  text-underline-offset: 2px;
}

.tooltip-bubble {
  position: absolute;
  z-index: 300; /* Toujours au-dessus, y compris de la popup de contact (200) */
  max-width: 260px;
  padding: 0.5rem 0.75rem;
  background-color: var(--teal-12);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none; /* Ne doit jamais intercepter le survol/clic */
}

.tooltip-bubble[hidden] {
  display: none;
}

/* Petite flèche pointant vers le mot survolé */
.tooltip-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}

.tooltip-bubble:not(.tooltip-bubble--bottom)::after {
  top: 100%;
  border-top-color: var(--teal-12);
}

.tooltip-bubble--bottom::after {
  bottom: 100%;
  border-bottom-color: var(--teal-12);
}

/* --------------------------------------------------------------------------
   16. UTILITAIRES
   -------------------------------------------------------------------------- */

/* Masque visuellement sans retirer du flux d'accessibilité (lecteurs d'écran) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================\n   FIN DU FICHIER CSS RAYONIS v2\n   ========================================================================== */