/*
Theme Name:  Les Imperdables
Theme URI:   https://paindesel.org
Author:      Paindesel.org
Author URI:  https://paindesel.org
Description: Thème sur mesure pour le site Les Imperdables — Paindesel.org.
             Reproduit fidèlement le design original : hero bleu-gris foncé,
             navigation sobre, système d'onglets, cards légères, footer sombre.
             Basé sur un thème full custom (sans thème parent).
Version:     1.0.0
License:     GNU General Public License v2 ou ultérieure
Text Domain: imperdables
Tags:        custom, full-custom, éducation, pédagogie, cultures
*/

/* ============================================================
   TABLE DES MATIÈRES
   1.  Variables CSS globales (palette, typographie, espacements)
   2.  Reset & base
   3.  Typographie
   4.  Mise en page générale (layout)
   5.  En-tête & navigation
   6.  Hero section
   7.  Système d'onglets (tabs)
   8.  Cards / fiches
   9.  Sections de contenu
   10. Médiathèque (accordéon)
   11. Histoires d'Oma et Téta (liste)
   12. Boutons
   13. Formulaire de contact
   14. Pied de page (footer)
   15. Utilitaires
   16. Responsive (tablette & mobile)
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS GLOBALES
   Modifier ces valeurs suffit pour changer toute la charte graphique
   ============================================================ */
:root {
  /* --- Palette de couleurs principale --- */
  --couleur-primaire:        #2d5a6b;   /* Bleu-gris foncé — hero, accents */
  --couleur-primaire-claire: #3d7a8a;   /* Variante plus claire du primaire */
  --couleur-secondaire:      #5a7a4a;   /* Vert olive — boutons secondaires, tags */
  --couleur-secondaire-pale: #6b8f5a;   /* Variante plus claire du secondaire */
  --couleur-accent:          #8b6914;   /* Or/brun — accents tertiaires */

  /* --- Couleurs neutres --- */
  --couleur-texte:           #333333;   /* Texte principal */
  --couleur-texte-doux:      #555555;   /* Texte secondaire, descriptions */
  --couleur-texte-pale:      #888888;   /* Métadonnées, labels */
  --couleur-fond:            #ffffff;   /* Fond principal */
  --couleur-fond-claire:     #f7f7f5;   /* Fond légèrement grisé */
  --couleur-fond-section:    #eef2f0;   /* Fond de sections alternées */
  --couleur-bordure:         #e0e0e0;   /* Bordures légères */
  --couleur-bordure-forte:   #cccccc;   /* Bordures plus marquées */

  /* --- Couleurs du footer --- */
  --couleur-footer-fond:     #2a2a2a;   /* Fond du pied de page */
  --couleur-footer-texte:    #cccccc;   /* Texte dans le footer */
  --couleur-footer-titre:    #5a9db5;   /* Titres dans le footer (vert-bleu) */

  /* --- Couleurs des onglets spéciaux --- */
  --couleur-onglet-joyeuse:  #5a7a4a;   /* Joyeuse Sagesse — vert */
  --couleur-onglet-media:    #3d7a8a;   /* Médiathèque — bleu */
  --couleur-onglet-histoires:#7a6a9a;   /* Histoires — violet */

  /* --- Couleurs des cartes Médiathèque --- */
  --couleur-carte-bible:     #3d6b8a;   /* Bible hébraïque — bleu */
  --couleur-carte-nouveau:   #5a7a4a;   /* Nouveau Testament — vert */
  --couleur-carte-coran:     #8a6b3d;   /* Coran — brun/or */

  /* --- Typographie --- */
  --police-principale:       'Open Sans',sans-serif;
  --police-interface:        'Helvetica Neue', 'Arial', sans-serif;
  --police-h1:               'Raleway',sans-serif;
  --taille-base:             16px;
  --taille-petit:            0.875rem;  /* 14px */
  --taille-normal:           1rem;      /* 16px */
  --taille-moyen:            1.125rem;  /* 18px */
  --taille-grand:            1.25rem;   /* 20px */
  --taille-h1:              clamp(1.5rem, 3vw, 2.2rem);   /* 36px */
  --taille-h2:               1.75rem;   /* 28px */
  --taille-h3:               1.375rem;  /* 22px */
  --taille-h4:               1.125rem;  /* 18px */

  /* --- Espacements --- */
  --espace-xs:   0.25rem;   /*  4px */
  --espace-sm:   0.5rem;    /*  8px */
  --espace-md:   1rem;      /* 16px */
  --espace-lg:   1.5rem;    /* 24px */
  --espace-xl:   2rem;      /* 32px */
  --espace-xxl:  3rem;      /* 48px */
  --espace-xxxl: 4rem;      /* 64px */

  /* --- Largeur du conteneur principal --- */
  --largeur-max:     1100px;
  --largeur-etroite:  800px;

  /* --- Bordures arrondies --- */
  --rayon-petit:  4px;
  --rayon-normal: 8px;
  --rayon-grand:  12px;

  /* --- Ombres --- */
  --ombre-legere:  0 1px 4px rgba(0, 0, 0, 0.08);
  --ombre-normale: 0 2px 10px rgba(0, 0, 0, 0.10);
  --ombre-forte:   0 4px 20px rgba(0, 0, 0, 0.15);

  /* --- Transitions --- */
  --transition-rapide:  0.15s ease;
  --transition-normale: 0.25s ease;
  --transition-lente:   0.4s ease;
}


/* ============================================================
   2. RESET & BASE
   Normalisation du comportement des navigateurs
   ============================================================ */

/* Modèle de boîte unifié sur tous les éléments */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base du document */
html {
  font-size: var(--taille-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--police-interface);
  font-size: var(--taille-normal);
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Images responsive par défaut */
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Liens de base */
a {
  color: var(--couleur-primaire);
  text-decoration: none;
  transition: color var(--transition-rapide);
}

a:hover,
a:focus {
  color: var(--couleur-primaire-claire);
}

/* Listes sans style par défaut (les styles sont ajoutés au besoin) */
ul,
ol {
  list-style: none;
}

/* Tableaux */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Éléments de formulaire héritent de la police */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Suppression du style par défaut des boutons */
button {
  cursor: pointer;
  border: none;
  background: none;
}


/* ============================================================
   3. TYPOGRAPHIE
   Styles des titres et textes de base
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-principale);
  line-height: 1.3;
  color: var(--couleur-texte);
  font-weight: 700;
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }
h4 { font-size: var(--taille-h4); }
h5 { font-size: var(--taille-normal); }
h6 { font-size: var(--taille-petit); }

p {
  margin-bottom: var(--espace-md);
  line-height: 1.7;
}

p:last-child {
  margin-bottom: 0;
}

/* Texte en gras dans le contenu */
strong, b {
  font-weight: 700;
}

/* Texte en italique */
em, i {
  font-style: italic;
}

/* Petit texte */
small {
  font-size: var(--taille-petit);
}

/* Séparateur horizontal */
hr {
  border: none;
  border-top: 1px solid var(--couleur-bordure);
  margin: var(--espace-xl) 0;
}


/* ============================================================
   4. MISE EN PAGE GÉNÉRALE
   Conteneurs et structure principale
   ============================================================ */

/* Conteneur principal centré */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-lg);
  padding-right: var(--espace-lg);
}

/* Conteneur étroit pour le contenu de lecture */
.conteneur-etroit {
  max-width: var(--largeur-etroite);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-lg);
  padding-right: var(--espace-lg);
}

/* Structure de page principale */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Zone de contenu principale */
#contenu-principal {
  flex: 1;
}

/* Section générique */
.section {
  padding: var(--espace-xxl) 0;
}

.section--fond-claire {
  background-color: var(--couleur-fond-claire);
}

.section--fond-section {
  background-color: var(--couleur-fond-section);
}


/* ============================================================
   5. EN-TÊTE & NAVIGATION
   Barre de navigation blanche en haut de page
   ============================================================ */

/* En-tête principal */
#en-tete {
  background-color: var(--couleur-fond);
  border-bottom: 1px solid var(--couleur-bordure);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--ombre-legere);
}

/* Conteneur de la barre de navigation */
.nav-principale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--espace-lg);
}

/* Logo du site */
.logo-site {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  text-decoration: none;
}

.logo-site img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* Nom du site (si pas d'image logo) */
.nom-site {
  font-family: var(--police-principale);
  font-size: var(--taille-grand);
  font-weight: 700;
  color: var(--couleur-texte);
}

/* Menu de navigation principal */
.menu-principal {
  display: flex;
  align-items: center;
  gap: var(--espace-xl);
}

/* Liens du menu */
.menu-principal a {
  font-family: var(--police-interface);
  font-size: var(--taille-petit);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--couleur-texte);
  text-decoration: none;
  padding-bottom: var(--espace-xs);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-normale), border-color var(--transition-normale);
}

/* Lien actif et survol */
.menu-principal a:hover,
.menu-principal a.actif,
.menu-principal .current-menu-item > a,
.menu-principal .current_page_item > a {
  color: var(--couleur-primaire);
  border-bottom-color: var(--couleur-primaire);
}

/* Bouton menu mobile (hamburger) */
.bouton-menu-mobile {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--espace-sm);
}

.bouton-menu-mobile span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--couleur-texte);
  transition: transform var(--transition-normale), opacity var(--transition-normale);
}


/* ============================================================
   6. HERO SECTION
   Bandeau principal bleu-gris foncé avec texte centré
   ============================================================ */

.hero {
  background-color: var(--couleur-primaire);
  color: #ffffff;
  text-align: center;
  padding: var(--espace-xxl) var(--espace-lg);
	
	background: linear-gradient(135deg,#1a3a4a 0%,#2a5f75 50%,#1a3a4a 100%);
  color: var(--white);
  text-align: center;
  padding: 3rem 2rem;
	
}

/* Fil d'Ariane (breadcrumb) dans le hero */
.hero__breadcrumb {
  margin-bottom: var(--espace-lg);
}

.hero__breadcrumb a,
.hero__breadcrumb span {
  font-size: var(--taille-petit);
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero__breadcrumb-lien {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  padding: var(--espace-xs) var(--espace-md);
  border-radius: var(--rayon-petit);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: background-color var(--transition-rapide);
}

.hero__breadcrumb-lien:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Titre principal du hero */
.hero__titre {
  font-family: var(--police-h1);
  font-size: --taille-h1;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--espace-md);
  line-height: 1.2;
}

/* Sous-titre du hero */
.hero__sous-titre {
  font-size: var(--taille-moyen);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--espace-lg);
  font-style: italic;
}

/* Texte descriptif du hero */
.hero__texte {
  font-size: var(--taille-normal);
  color: rgba(255, 255, 255, 0.80);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ============================================================
   7. SYSTÈME D'ONGLETS (TABS)
   Navigation horizontale avec contenu associé
   ============================================================ */

/* Barre d'onglets */
.onglets {
  border-bottom: 1px solid var(--couleur-bordure);
  background-color: var(--couleur-fond);
  position: sticky;
  top: 70px; /* Hauteur du header */
  z-index: 50;
}

/* Liste des onglets */
.onglets__liste {
  display: flex;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--espace-lg);
  overflow-x: auto;
  scrollbar-width: none; /* Cache la scrollbar sur Firefox */
}

.onglets__liste::-webkit-scrollbar {
  display: none; /* Cache la scrollbar sur Chrome/Safari */
}

/* Bouton de chaque onglet */
.onglets__bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: var(--espace-md) var(--espace-lg);
  font-size: var(--taille-petit);
  font-weight: 600;
  color: var(--couleur-texte-doux);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--transition-rapide), border-color var(--transition-rapide);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

/* Onglet actif — couleur générique */
.onglets__bouton.actif,
.onglets__bouton:hover {
  color: var(--couleur-primaire);
  border-bottom-color: var(--couleur-primaire);
}

/* Couleurs spécifiques par onglet */
.onglets__bouton[data-onglet="joyeuse"].actif,
.onglets__bouton[data-onglet="joyeuse"]:hover {
  color: var(--couleur-onglet-joyeuse);
  border-bottom-color: var(--couleur-onglet-joyeuse);
}

.onglets__bouton[data-onglet="mediatheque"].actif,
.onglets__bouton[data-onglet="mediatheque"]:hover {
  color: var(--couleur-onglet-media);
  border-bottom-color: var(--couleur-onglet-media);
}

.onglets__bouton[data-onglet="histoires"].actif,
.onglets__bouton[data-onglet="histoires"]:hover {
  color: var(--couleur-onglet-histoires);
  border-bottom-color: var(--couleur-onglet-histoires);
}

/* Icônes des onglets (emoji ou SVG) */
.onglets__icone {
  font-size: 1rem;
}

/* Panneau de contenu d'un onglet */
.onglet-panneau {
  display: none;
  padding: var(--espace-xxl) 0;
}

/* Panneau actif */
.onglet-panneau.actif {
  display: block;
}


/* ============================================================
   8. CARDS / FICHES
   Cartes de présentation avec ombre légère
   ============================================================ */

/* Grille de cards */
.grille-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espace-lg);
}

/* Card de base */
.card {
  background-color: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-normal);
  padding: var(--espace-xl);
  box-shadow: var(--ombre-legere);
  transition: box-shadow var(--transition-normale), transform var(--transition-normale);
}

.card:hover {
  box-shadow: var(--ombre-normale);
  transform: translateY(-2px);
}

/* Icône de la card (étoile, etc.) */
.card__icone {
  font-size: 1.5rem;
  color: var(--couleur-primaire);
  margin-bottom: var(--espace-md);
  text-align: center;
}

/* Titre de la card */
.card__titre {
  font-size: var(--taille-grand);
  color: var(--couleur-primaire);
  font-weight: 700;
  margin-bottom: var(--espace-sm);
  text-align: center;
}

/* Texte descriptif de la card */
.card__texte {
  font-size: var(--taille-petit);
  color: var(--couleur-texte-doux);
  line-height: 1.6;
  margin-bottom: var(--espace-md);
  text-align: center;
}

/* Métadonnées de la card (durée, joueurs, etc.) */
.card__meta {
  font-size: var(--taille-petit);
  color: var(--couleur-texte-pale);
  border-top: 1px solid var(--couleur-bordure);
  padding-top: var(--espace-sm);
  margin-top: var(--espace-md);
}

.card__meta strong {
  color: var(--couleur-texte-doux);
}

/* Card d'information (fond coloré) */
.card--info {
  background-color: var(--couleur-fond-section);
  border-color: var(--couleur-bordure-forte);
}

/* Card de commande / appel à l'action */
.card--cta {
  text-align: center;
  padding: var(--espace-xxl);
}

.card--cta .card__titre {
  font-size: var(--taille-h2);
  margin-bottom: var(--espace-md);
}


/* ============================================================
   9. SECTIONS DE CONTENU SPÉCIFIQUES
   Blocs réutilisables dans les pages
   ============================================================ */

/* Section pédagogique (fond clair, deux colonnes) */
.section-pedagogique {
  background-color: var(--couleur-fond-section);
  border-radius: var(--rayon-grand);
  padding: var(--espace-xxl);
  margin: var(--espace-xxl) 0;
}

.section-pedagogique__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-xxl);
}

.section-pedagogique__titre {
  font-size: var(--taille-h3);
  color: var(--couleur-primaire);
  margin-bottom: var(--espace-md);
  font-weight: 700;
}

/* Liste avec coches vertes */
.liste-coches {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.liste-coches li {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  font-size: var(--taille-petit);
  color: var(--couleur-texte-doux);
}

.liste-coches li::before {
  content: "✅";
  flex-shrink: 0;
  margin-top: 2px;
}

/* Section "Méthode" avec liste à flèches — version corrigée */
.liste-methode {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-methode li {
  padding-left: 1.5rem;   /* décalage du texte vers la droite */
  position: relative;
}

.liste-methode li + li {
  border-top: 1px solid #e0e0e0;
  padding-top: var(--espace-md);
  margin-top: var(--espace-md); /* ou supprimer margin-bottom sur li */
}

/* Image flottante à droite */
.image-droite {
  float: right;
  margin-left: var(--espace-xl);
  margin-bottom: var(--espace-lg);
  border-radius: var(--rayon-normal);
  box-shadow: var(--ombre-normale);
  max-width: 45%;
}

/* Zone de texte principal */
.zone-texte {
  overflow: hidden; /* Clears the float */
}

/* Layout section "La méthode" : texte gauche + cartes droite */
.zone-methode {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--espace-xxl);
  align-items:           start;
  padding:               var(--espace-xl) 0;
}

@media (max-width: 900px) {
  .zone-methode {
    grid-template-columns: 1fr;
    gap:                   var(--espace-xl);
  }
}


/* ============================================================
   10. MÉDIATHÈQUE — ACCORDÉON
   Fiches de récits avec contenu dépliable
   ============================================================ */

/* Liste des fiches de la médiathèque */
.mediatheque-liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

/* Fiche individuelle */
.fiche-mediatheque {
  border-radius: var(--rayon-normal);
  overflow: hidden;
  box-shadow: var(--ombre-legere);
}

/* En-tête de la fiche (couleur selon tradition) */
.fiche-mediatheque__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-md) var(--espace-lg);
  cursor: pointer;
  transition: filter var(--transition-rapide);
}

.fiche-mediatheque__entete:hover {
  filter: brightness(1.05);
}

/* Couleurs selon la tradition religieuse */
.fiche-mediatheque--bible .fiche-mediatheque__entete {
  background-color: var(--couleur-carte-bible);
  color: white;
}

.fiche-mediatheque--nouveau-testament .fiche-mediatheque__entete {
  background-color: var(--couleur-carte-nouveau);
  color: white;
}

.fiche-mediatheque--coran .fiche-mediatheque__entete {
  background-color: var(--couleur-carte-coran);
  color: white;
}

/* Titre de la fiche */
.fiche-mediatheque__titre {
  font-size: var(--taille-normal);
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
}

/* Références (Bible hébraïque · Coran · Exode 2:1-10) */
.fiche-mediatheque__refs {
  font-size: var(--taille-petit);
  color: rgba(255, 255, 255, 0.8);
}

/* Bouton masquer/voir le contenu */
.fiche-mediatheque__toggle {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--rayon-petit);
  padding: var(--espace-xs) var(--espace-md);
  font-size: var(--taille-petit);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-rapide);
}

.fiche-mediatheque__toggle:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Corps de la fiche (contenu dépliable) */
.fiche-mediatheque__corps {
  background-color: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-top: none;
  display: none; /* Masqué par défaut */
}

.fiche-mediatheque__corps.ouvert {
  display: block;
}

/* Grille intérieure (récit + ressources) */
.fiche-mediatheque__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.fiche-mediatheque__recit,
.fiche-mediatheque__ressources {
  padding: var(--espace-xl);
}

.fiche-mediatheque__ressources {
  background-color: var(--couleur-fond-claire);
  border-left: 1px solid var(--couleur-bordure);
}

/* Titre de colonne */
.fiche-mediatheque__col-titre {
  font-size: var(--taille-normal);
  font-weight: 700;
  color: var(--couleur-primaire);
  margin-bottom: var(--espace-md);
  padding-bottom: var(--espace-sm);
  border-bottom: 2px solid var(--couleur-primaire);
}

/* Texte du récit */
.fiche-mediatheque__recit p {
  font-size: var(--taille-petit);
  color: var(--couleur-texte-doux);
  line-height: 1.7;
}

/* Ressources (textes, arts, musique) */
.fiche-mediatheque__ressource-item {
  margin-bottom: var(--espace-sm);
  font-size: var(--taille-petit);
  color: var(--couleur-texte-doux);
}

.fiche-mediatheque__ressource-item strong {
  color: var(--couleur-texte);
}

/* Boutons d'action de la fiche */
.fiche-mediatheque__actions {
  display: flex;
  gap: var(--espace-sm);
  padding: var(--espace-md) var(--espace-xl);
  border-top: 1px solid var(--couleur-bordure);
}


/* ============================================================
   11. HISTOIRES D'OMA ET TÉTA — LISTE
   Liste de fiches d'histoires à lire ou télécharger
   ============================================================ */

/* Conteneur liste des histoires */
.histoires-liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

/* Fiche histoire individuelle */
.fiche-histoire {
  display: flex;
  align-items: center;
  gap: var(--espace-lg);
  background-color: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-normal);
  padding: var(--espace-md) var(--espace-lg);
  box-shadow: var(--ombre-legere);
  transition: box-shadow var(--transition-rapide);
}

.fiche-histoire:hover {
  box-shadow: var(--ombre-normale);
}

/* Icône document à gauche */
.fiche-histoire__icone {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--couleur-fond-claire);
  border-radius: var(--rayon-petit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Contenu textuel */
.fiche-histoire__contenu {
  flex: 1;
}

.fiche-histoire__titre {
  font-size: var(--taille-normal);
  font-weight: 700;
  color: var(--couleur-primaire);
  margin-bottom: 2px;
}

.fiche-histoire__meta {
  font-size: var(--taille-petit);
  color: var(--couleur-texte-pale);
}

/* Tag de catégorie */
.fiche-histoire__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background-color: var(--couleur-primaire);
  color: white;
  margin-top: var(--espace-xs);
}

/* Boutons Lire / PDF */
.fiche-histoire__actions {
  display: flex;
  gap: var(--espace-sm);
  flex-shrink: 0;
}

/* Message "d'autres histoires seront ajoutées" */
.histoires-en-cours {
  text-align: center;
  padding: var(--espace-xl);
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon-normal);
  color: var(--couleur-texte-pale);
  font-size: var(--taille-petit);
}

.histoires-en-cours a {
  color: var(--couleur-primaire);
}


/* ============================================================
   12. BOUTONS
   Tous les styles de boutons du site
   ============================================================ */

/* Bouton de base */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0.6em 1.4em;
  font-size: var(--taille-petit);
  font-weight: 600;
  border-radius: var(--rayon-petit);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-rapide),
              color var(--transition-rapide),
              border-color var(--transition-rapide),
              transform var(--transition-rapide);
  white-space: nowrap;
}

.bouton:hover {
  transform: translateY(-1px);
}

/* Bouton primaire — bleu-gris */
.bouton--primaire {
  background-color: var(--couleur-primaire);
  color: white;
  border-color: var(--couleur-primaire);
}

.bouton--primaire:hover {
  background-color: var(--couleur-primaire-claire);
  border-color: var(--couleur-primaire-claire);
  color: white;
}

/* Bouton secondaire — vert olive */
.bouton--secondaire {
  background-color: var(--couleur-secondaire);
  color: white;
  border-color: var(--couleur-secondaire);
}

.bouton--secondaire:hover {
  background-color: var(--couleur-secondaire-pale);
  border-color: var(--couleur-secondaire-pale);
  color: white;
}

/* Bouton outline — contour seulement */
.bouton--outline {
  background-color: transparent;
  color: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
}

.bouton--outline:hover {
  background-color: var(--couleur-primaire);
  color: white;
}

/* Bouton outline vert */
.bouton--outline-vert {
  background-color: transparent;
  color: var(--couleur-secondaire);
  border-color: var(--couleur-secondaire);
}

.bouton--outline-vert:hover {
  background-color: var(--couleur-secondaire);
  color: white;
}

/* Bouton petit (pour les fiches) */
.bouton--petit {
  padding: 0.35em 0.9em;
  font-size: 0.8rem;
}

/* Bouton grand (pour les CTA) */
.bouton--grand {
  padding: 0.8em 2em;
  font-size: var(--taille-normal);
}

/* Bouton pleine largeur */
.bouton--plein {
  width: 100%;
  justify-content: center;
}

/* Groupe de boutons */
.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-md);
  justify-content: center;
}


/* ============================================================
   13. FORMULAIRE DE CONTACT
   Utilisé dans le footer et les pages de contact
   ============================================================ */

.formulaire-contact {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

/* Rangée de deux champs côte à côte */
.formulaire-contact__rangee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-md);
}

/* Champs de formulaire */
.formulaire-contact input,
.formulaire-contact textarea,
.formulaire-contact select {
  width: 100%;
  padding: 0.65em 0.9em;
  font-size: var(--taille-petit);
  color: var(--couleur-texte);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--rayon-petit);
  transition: border-color var(--transition-rapide), background-color var(--transition-rapide);
  outline: none;
}

/* Placeholder des champs */
.formulaire-contact input::placeholder,
.formulaire-contact textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--taille-petit);
}

/* Focus sur les champs */
.formulaire-contact input:focus,
.formulaire-contact textarea:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.12);
}

/* Zone de texte (message) */
.formulaire-contact textarea {
  min-height: 100px;
  resize: vertical;
}

/* Bouton d'envoi */
.formulaire-contact .bouton-envoyer {
  width: 100%;
  padding: 0.75em;
  background-color: var(--couleur-primaire);
  color: white;
  font-size: var(--taille-petit);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--rayon-petit);
  cursor: pointer;
  transition: background-color var(--transition-rapide);
}

.formulaire-contact .bouton-envoyer:hover {
  background-color: var(--couleur-primaire-claire);
}


/* ============================================================
   14. PIED DE PAGE (FOOTER)
   Footer sombre avec infos de contact et formulaire
   ============================================================ */

#pied-de-page {
  background-color: var(--couleur-footer-fond);
  color: var(--couleur-footer-texte);
  padding: var(--espace-xxl) 0 var(--espace-lg);
}

/* Grille du footer (infos à gauche, formulaire à droite) */
.footer__grille {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--espace-xxl);
  margin-bottom: var(--espace-xxl);
}

/* Colonne d'informations */
.footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

/* Titre de section dans le footer */
.footer__titre {
  font-size: var(--taille-h3);
  color: var(--couleur-footer-titre);
  font-family: var(--police-principale);
  margin-bottom: var(--espace-sm);
}

/* Lien de contact dans le footer */
.footer__lien-contact {
  font-size: var(--taille-petit);
  color: var(--couleur-footer-titre);
  text-decoration: none;
  font-style: italic;
}

.footer__lien-contact:hover {
  text-decoration: underline;
  color: var(--couleur-footer-titre);
}

/* Éléments d'adresse / infos */
.footer__item {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  font-size: var(--taille-petit);
  color: var(--couleur-footer-texte);
  line-height: 1.5;
}

.footer__item-icone {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Mention légale en bas du footer */
.footer__mention {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--espace-md);
  margin-top: var(--espace-md);
}


/* ============================================================
   15. UTILITAIRES
   Classes utilitaires réutilisables partout
   ============================================================ */

/* Alignement du texte */
.text-centre  { text-align: center; }
.text-gauche  { text-align: left; }
.text-droite  { text-align: right; }

/* Couleurs du texte */
.text-primaire   { color: var(--couleur-primaire); }
.text-secondaire { color: var(--couleur-secondaire); }
.text-doux       { color: var(--couleur-texte-doux); }
.text-pale       { color: var(--couleur-texte-pale); }
.text-blanc      { color: #ffffff; }

/* Marges */
.mt-sm  { margin-top: var(--espace-sm); }
.mt-md  { margin-top: var(--espace-md); }
.mt-lg  { margin-top: var(--espace-lg); }
.mt-xl  { margin-top: var(--espace-xl); }
.mt-xxl { margin-top: var(--espace-xxl); }
.mb-md  { margin-bottom: var(--espace-md); }
.mb-lg  { margin-bottom: var(--espace-lg); }
.mb-xl  { margin-bottom: var(--espace-xl); }

/* Visibilité */
.invisible    { visibility: hidden; }
.masque       { display: none !important; }
.sr-seulement { /* Accessible uniquement aux lecteurs d'écran */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ligne de séparation avec titre centré */
.separateur-titre {
  text-align: center;
  margin-bottom: var(--espace-xxl);
}

.separateur-titre h2 {
  display: inline-block;
  position: relative;
  padding-bottom: var(--espace-sm);
  color: var(--couleur-primaire);
  font-size: var(--taille-h2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--taille-petit);
}

.separateur-titre h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: var(--couleur-primaire);
}


/* ============================================================
   16. RESPONSIVE — TABLETTE & MOBILE
   Adaptations pour les petits écrans
   ============================================================ */

/* --- TABLETTE (max 900px) --- */
@media (max-width: 900px) {

  /* Réduction des tailles de titre */
  .hero__titre { font-size: 2rem; }

  /* Grilles passent en une colonne */
  .section-pedagogique__grille { grid-template-columns: 1fr; }
  .fiche-mediatheque__grille   { grid-template-columns: 1fr; }
  .footer__grille              { grid-template-columns: 1fr; }

  /* Image flottante prend toute la largeur */
  .image-droite {
    float: none;
    max-width: 100%;
    margin: 0 0 var(--espace-lg) 0;
  }

  /* Grille de cards : 2 colonnes */
  .grille-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- MOBILE (max 600px) --- */
@media (max-width: 600px) {

  /* Navigation : affiche le bouton hamburger */
  .bouton-menu-mobile {
    display: flex;
  }

  /* Menu se cache et s'ouvre en vertical */
  .menu-principal {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: var(--couleur-fond);
    border-bottom: 1px solid var(--couleur-bordure);
    box-shadow: var(--ombre-normale);
    padding: var(--espace-md);
  }

  /* Menu ouvert (classe ajoutée par JS) */
  .menu-principal.ouvert {
    display: flex;
  }

  .menu-principal a {
    padding: var(--espace-md) 0;
    width: 100%;
    border-bottom: 1px solid var(--couleur-bordure);
  }

  /* Hero */
  .hero__titre { font-size: 1.6rem; }

  /* Cards en une seule colonne */
  .grille-cards { grid-template-columns: 1fr; }

  /* Formulaire en une colonne */
  .formulaire-contact__rangee { grid-template-columns: 1fr; }

  /* Histoires : boutons en colonne */
  .fiche-histoire {
    flex-direction: column;
    align-items: flex-start;
  }

  .fiche-histoire__actions {
    width: 100%;
  }

  /* Onglets : défilement horizontal */
  .onglets__liste {
    padding: 0 var(--espace-md);
  }

  .onglets__bouton {
    padding: var(--espace-md);
    font-size: 0.75rem;
  }
}


/* ============================================================
   17. GALERIE DE CARTES JOYEUSE SAGESSE
   Grille de cartes cliquables avec effet de survol
   ============================================================ */

/* Grille des cartes — s'adapte automatiquement au nombre de cartes */
.galerie-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--espace-md);
  margin-bottom: var(--espace-xxl);
}

/* Bouton-carte individuel */
.galerie-cartes__item {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid var(--couleur-bordure);
  border-radius: var(--rayon-normal);
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: transform var(--transition-normale),
              border-color var(--transition-normale),
              box-shadow var(--transition-normale);
  aspect-ratio: 2 / 3; /* Ratio carte à jouer */
}

.galerie-cartes__item:hover,
.galerie-cartes__item:focus {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--couleur-primaire);
  box-shadow: var(--ombre-forte);
  outline: none;
}

.galerie-cartes__item:focus-visible {
  outline: 3px solid var(--couleur-primaire);
  outline-offset: 2px;
}

/* Image de la carte */
.galerie-cartes__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--transition-rapide);
}

/* Icône loupe au survol */
.galerie-cartes__zoom {
  position: absolute;
  bottom: var(--espace-sm);
  right: var(--espace-sm);
  background-color: rgba(0, 0, 0, 0.55);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity var(--transition-rapide);
}

.galerie-cartes__item:hover .galerie-cartes__zoom,
.galerie-cartes__item:focus .galerie-cartes__zoom {
  opacity: 1;
}

/* ---- Aperçu 4 cartes (section La méthode) ---- */
.apercu-cartes__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-sm);
}

/* Bouton d'aperçu (version compacte) */
.apercu-cartes__item {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--rayon-normal);
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: transform var(--transition-normale),
              border-color var(--transition-normale),
              box-shadow var(--transition-normale);
  aspect-ratio: 2 / 3;
}

.apercu-cartes__item:hover,
.apercu-cartes__item:focus {
  transform: translateY(-3px);
  border-color: var(--couleur-primaire);
  box-shadow: var(--ombre-normale);
  outline: none;
}

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

/* Placeholder aucune carte */
.apercu-cartes__placeholder {
  background-color: var(--couleur-fond-section);
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon-normal);
  padding: var(--espace-xl);
  text-align: center;
  color: var(--couleur-texte-pale);
  font-size: var(--taille-petit);
}


/* ============================================================
   18. LIGHTBOX DES CARTES
   Style iso version officielle :
   - Fond très sombre
   - Boîte blanche compacte
   - Cartes avec fond blanc, coins arrondis, ombre prononcée
   - Labels RECTO / VERSO en petit texte sous chaque image
   - Navigation sobre en bas
   ============================================================ */

/* Overlay global */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-lg);
}

.lightbox[hidden] {
  display: none;
}

/* Fond très sombre (proche du noir) */
.lightbox__fond {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

/* Boîte de contenu — plus compacte, proche de l'original */
.lightbox__boite {
  position: relative;
  z-index: 1001;
  background-color: #f4f4f2; /* Fond légèrement beige comme l'original */
  border-radius: 10px;
  padding: var(--espace-lg) var(--espace-xl) var(--espace-lg);
  max-width: 760px;
  width: 100%;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.7);
  animation: lightbox-entree 0.2s ease;
}

@keyframes lightbox-entree {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Bouton ✕ — en haut à droite, discret */
.lightbox__fermer {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--couleur-texte-doux);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition-rapide);
  z-index: 1;
  line-height: 1;
}

.lightbox__fermer:hover {
  color: var(--couleur-texte);
}

/* Titre optionnel au-dessus des images */
.lightbox__titre {
  text-align: center;
  font-size: 0.8rem;
  color: var(--couleur-texte-pale);
  font-style: italic;
  margin-bottom: var(--espace-md);
  padding-right: 30px;
}

/* Zone des deux images côte à côte — gap serré comme l'original */
.lightbox__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-md);
  margin-bottom: var(--espace-md);
}

/* Conteneur d'une image avec fond blanc + ombre */
.lightbox__image-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Image dans la lightbox — remplit la carte */
.lightbox__image {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
  background-color: #ffffff;
}

/* Label RECTO / VERSO — en bas de chaque carte, très discret */
.lightbox__label {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--couleur-texte-pale);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 0 6px;
  background: #ffffff;
  border-top: 1px solid #eeeeee;
}

/* Navigation précédent / suivant */
.lightbox__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--espace-sm);
  gap: var(--espace-md);
}

.lightbox__nav {
  background: none;
  border: none;
  font-size: var(--taille-petit);
  color: var(--couleur-primaire);
  cursor: pointer;
  padding: var(--espace-xs) var(--espace-sm);
  border-radius: var(--rayon-petit);
  transition: background-color var(--transition-rapide);
}

.lightbox__nav:hover {
  background-color: rgba(45, 90, 107, 0.08);
}

.lightbox__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.lightbox__nav:disabled:hover {
  background-color: transparent;
}

/* Compteur "1 / 3" centré */
.lightbox__compteur {
  font-size: var(--taille-petit);
  color: var(--couleur-texte-pale);
  text-align: center;
  flex: 1;
}

/* Responsive lightbox */
@media (max-width: 600px) {
  .lightbox {
    padding: var(--espace-md);
  }
  .lightbox__images {
    grid-template-columns: 1fr;
    gap: var(--espace-sm);
  }
  .lightbox__image {
    max-height: 50vh;
  }
  .lightbox__boite {
    padding: var(--espace-md);
  }
}


/* ============================================================
   19. PAIRES DE CARTES — système complet
   Style iso version officielle :
   - Fond beige/crème clair autour des deux images
   - Chaque image a ses coins arrondis et une légère ombre
   - Les deux images sont séparées par un petit espace
   - Hover : légère élévation de toute la paire
   ============================================================ */

/* Conteneur de la paire — fond beige clair */
.paire-cartes {
//  display:         flex;
//  flex-direction:  column;
//  background:      #f0ede6; /* Beige/crème proche de l'original */
//  border:          none;
//  border-radius:   10px;
//  padding:         10px;
//  margin:          0;
//  text-decoration: none;
//  color:           inherit;
//  cursor:          pointer;
//  width:           100%;
//  overflow:        hidden;
//  position:        relative;
//  transition:
//    box-shadow   var(--transition-normale),
//    transform    var(--transition-normale);
//  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.paire-cartes:hover,
.paire-cartes:focus {
//  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
//  transform:  translateY(-3px);
//  outline:    none;
}

.paire-cartes:focus-visible {
//  outline:        3px solid var(--couleur-primaire);
//  outline-offset: 2px;
}

/* Zone des deux images — séparées par un gap visible */
.paire-cartes__images {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px; /* Espace entre recto et verso */
  width:                 100%;
}

/* Cellule : chaque image dans son propre "cadre" blanc arrondi */
.paire-cartes__cellule {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid #3d7d96;
  transition:
    box-shadow   var(--transition-normale),
    transform    var(--transition-normale);
  overflow: hidden;
}

.paire-cartes__cellule:hover,
.paire-cartes__cellule:focus {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
  outline:    none;
}

/* Cellule vide (verso absent) */
.paire-cartes__cellule--vide {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--couleur-texte-pale);
  font-size:       var(--taille-petit);
  background:      rgba(255, 255, 255, 0.5);
}

.paire-cartes__cellule--vide::after {
  content: "—";
}

/* Image dans la cellule */
.paire-cartes__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Titre optionnel sous la paire */
.paire-cartes__titre {
  display:    block;
  width:      100%;
  text-align: center;
  font-size:  0.75rem;
  font-style: italic;
  color:      var(--couleur-texte-pale);
  margin-top: 6px;
  line-height: 1.4;
}

/* Icône loupe (hover sur boutons lightbox) */
.paire-cartes__zoom {
  position:         absolute;
  top:              var(--espace-sm);
  right:            var(--espace-sm);
  width:            28px;
  height:           28px;
  background-color: rgba(0, 0, 0, 0.45);
  color:            white;
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        0.75rem;
  opacity:          0;
  transition:       opacity var(--transition-rapide);
  pointer-events:   none;
}

.paire-cartes:hover .paire-cartes__zoom,
.paire-cartes:focus .paire-cartes__zoom {
  opacity: 1;
}


/* ============================================================
   20. GALERIE COMPLÈTE (panneau Joyeuse Sagesse)
   2 paires par ligne sur desktop — 1 sur mobile
   ============================================================ */
.galerie-paires {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:                   var(--espace-xl);
  margin-bottom:         var(--espace-xxl);
}


/* ============================================================
   21. APERÇU CARTES (section "La méthode")
   2 paires empilées verticalement dans la colonne droite
   ============================================================ */
.apercu-cartes {
  background: #f0f7fa;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.apercu-cartes__legende {
  font-size:     0.75rem;
  color:         var(--couleur-texte-pale);
  font-style:    italic;
  text-align:    center;
  margin-bottom: var(--espace-sm);
}

.apercu-cartes__grille {
  display:        flex;
  flex-direction: column;
  gap:            var(--espace-sm);
}

/* Placeholder aucune carte */
.apercu-cartes__placeholder {
  background-color: var(--couleur-fond-section);
  border:           2px dashed var(--couleur-bordure);
  border-radius:    var(--rayon-normal);
  padding:          var(--espace-xl);
  text-align:       center;
  color:            var(--couleur-texte-pale);
  font-size:        var(--taille-petit);
}

.apercu-cartes__placeholder p:first-child {
  font-size:     2rem;
  margin-bottom: var(--espace-sm);
}


/* ============================================================
   22. RESPONSIVE — Cartes
   ============================================================ */

@media (max-width: 900px) {
  .galerie-paires {
    grid-template-columns: 1fr;
    gap: var(--espace-lg);
  }
}

@media (max-width: 600px) {
  .galerie-paires {
    gap: var(--espace-md);
  }
  .paire-cartes {
    padding: 6px;
  }
  .paire-cartes__images {
    gap: 5px;
  }
  .apercu-cartes__grille {
    gap: var(--espace-xs);
  }
}