/* ================================================================== */
/* style.css — Portfolio Thierry KASUKANGOLO AKOMA                     */
/* Phase 1 : variables, reset, typographie de base uniquement.        */
/* Les composants (hero, cartes, nav…) viendront avec les pages.       */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Polices — hébergées localement (RDC : connexions lentes).        */
/*    Déposer les fichiers .woff2 dans assets/fonts/                   */
/*    (voir assets/fonts/_polices-a-fournir.txt).                      */
/*    Tant qu'ils sont absents, les piles de secours système prennent  */
/*    le relais : le site reste parfaitement lisible.                  */
/* ------------------------------------------------------------------ */

/* Une seule famille sans-serif (titres et corps), comme la maquette. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* 2. Variables — palette relevée pixel par pixel sur la maquette      */
/*    assets/maquette/accueil.png (décision client du 16/07/2026 :     */
/*    « respecter strictement les couleurs de la maquette »).          */
/*    Remplace la palette initiale du §8 du CLAUDE.md — à amender.     */
/* ------------------------------------------------------------------ */
:root {
  --bleu-profond:  #0A3A55;  /* En-têtes, titres, navigation, hero, pied */
  --vert:          #1D9470;  /* Accent : liens, boutons, badges */
  --vert-fonce:    #17795C;  /* Accent au survol */
  --bleu-pale:     #DFEDF6;  /* Tuiles de chiffres, fonds doux */
  --bleu-moyen:    #3390C9;  /* Éléments d'appui (carte contact, points) */
  --fond-page:     #EDF5FA;  /* Fond de section alterné */
  --gris-texte:    #45535E;  /* Corps de texte (ardoise) */
  --gris-clair:    #DDE6ED;  /* Bordures, filets */
  --blanc:         #FFFFFF;

  --rayon:         8px;      /* Boutons, badges, tuiles (maquette) */
  --rayon-grand:   16px;     /* Cartes flottantes (hero, sections) */
  --ombre:         0 12px 32px rgba(10, 58, 85, 0.10); /* ombre douce */
  --max-largeur:   1140px;

  /* Pile typographique unique, sans-serif comme la maquette. */
  --police-titre: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --police-corps: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ------------------------------------------------------------------ */
/* 3. Reset léger                                                      */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* L'attribut [hidden] doit toujours l'emporter, même sur les éléments
   qui reçoivent display:flex/grid (blog vide, grille filtrée…). */
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* 4. Typographie de base                                             */
/* ------------------------------------------------------------------ */
body {
  font-family: var(--police-corps);
  font-weight: 400;
  font-size: 1rem;          /* 16px */
  color: var(--gris-texte);
  background-color: var(--fond-page); /* fond bleuté, cartes flottantes dessus */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.25;
  color: var(--bleu-profond);
}

h1 { font-size: 2.25rem; }   /* 36px */
h2 { font-size: 1.75rem; }   /* 28px */
h3 { font-size: 1.375rem; }  /* 22px */
h4 { font-size: 1.125rem; }  /* 18px */

p {
  margin-bottom: 1rem;
  max-width: 70ch;           /* confort de lecture */
}

a {
  color: var(--vert);
}

a:hover,
a:focus {
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

/* Accessibilité : focus visible au clavier. */
:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 5. Structure                                                       */
/* ------------------------------------------------------------------ */
.conteneur {
  width: min(100% - 2.5rem, var(--max-largeur));
  margin-inline: auto;
}

/* Masqué visuellement mais lu par les lecteurs d'écran. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* 6. Boutons                                                         */
/* ------------------------------------------------------------------ */
.bouton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--vert);
  border-radius: var(--rayon);
  background-color: var(--vert);
  color: var(--blanc);
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.bouton:hover,
.bouton:focus {
  background-color: var(--vert-fonce);
  border-color: var(--vert-fonce);
  text-decoration: none;
}

/* Variante contour clair — pour fond sombre (hero, CTA). */
.bouton--contour {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--blanc);
}

.bouton--contour:hover,
.bouton--contour:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--blanc);
}

/* Variante compacte — navigation. */
.bouton--petit {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* 7. En-tête et navigation (mobile-first)                            */
/* ------------------------------------------------------------------ */
.entete {
  /* Marine, comme la barre de navigation de la maquette. */
  background-color: var(--bleu-profond);
}

.entete__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.875rem;
}

.entete__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--blanc);
}

.entete__logo:hover,
.entete__logo:focus {
  text-decoration: none;
}

/* Monogramme « TA » (version blanche transparente pour fond marine). */
.entete__logo-img {
  height: 34px;
  width: auto;
}

.entete__logo-nom {
  color: var(--vert);
}

/* Burger : masqué par défaut (sans JS, la nav reste visible). */
.entete__burger {
  display: none;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--rayon);
  background: none;
}

.entete__burger-trait {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background-color: var(--blanc);
}

.nav {
  width: 100%;
}

.nav__liste {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.5rem;
}

.nav__lien {
  position: relative;
  display: inline-block;
  padding: 0.375rem 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: color 0.15s ease;
}

/* Trait vert court sous le lien (comme la maquette) : plein pour la page
   active, atténué au survol. Un pseudo-élément évite tout décalage de
   hauteur entre les liens. */
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--vert);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nav__lien:hover,
.nav__lien:focus {
  color: var(--blanc);
  text-decoration: none;
}

.nav__lien:hover::after,
.nav__lien:focus::after {
  opacity: 0.5;
}

.nav__lien--actif {
  color: var(--blanc);
}

.nav__lien--actif::after {
  opacity: 1;
}

/* Avec JS, sous 900px : nav repliée, burger visible. */
.js .entete__burger {
  display: block;
}

.js .nav {
  display: none;
}

.js .nav--ouvert {
  display: block;
}

@media (min-width: 900px) {
  .nav,
  .js .nav {
    display: block;
    width: auto;
  }

  .js .entete__burger,
  .entete__burger {
    display: none;
  }

  .nav__liste {
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    padding-block: 0;
  }

  /* Un peu d'air entre les liens et le bouton d'appel (comme la maquette). */
  .nav__liste > li:last-child {
    margin-left: 0.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 7b. Menu déroulant « Publications »                                 */
/*     Mobile : sous-liste indentée (visible quand le menu est ouvert).*/
/*     Desktop : panneau déroulant au survol / focus.                  */
/* ------------------------------------------------------------------ */
.nav__lien--menu {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__caret {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

/* Mobile : le sous-menu s'affiche indenté sous « Publications ». */
.nav__sousmenu {
  padding: 0.25rem 0 0.5rem 1rem;
}

.nav__souslien {
  display: block;
  padding: 0.4rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 0.9rem;
}

.nav__souslien:hover,
.nav__souslien:focus {
  color: var(--blanc);
  text-decoration: none;
}

@media (min-width: 900px) {
  .nav__item--menu {
    position: relative;
  }

  /* Panneau blanc flottant, masqué par défaut. */
  .nav__sousmenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 0.5rem;
    background-color: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    display: none;
    z-index: 100;
  }

  /* Ouverture au survol ou au focus clavier (accessibilité). */
  .nav__item--menu:hover .nav__sousmenu,
  .nav__item--menu:focus-within .nav__sousmenu {
    display: block;
  }

  .nav__item--menu:hover .nav__caret,
  .nav__item--menu:focus-within .nav__caret {
    transform: rotate(180deg);
  }

  .nav__souslien {
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    color: var(--bleu-profond);
    font-size: 0.9rem;
  }

  .nav__souslien:hover,
  .nav__souslien:focus {
    color: var(--vert);
    background-color: var(--bleu-pale);
  }
}

/* Accessibilité : ne pas animer le chevron si mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  .nav__caret {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* 8. Hero                                                            */
/* ------------------------------------------------------------------ */
.hero {
  padding-block: 1.25rem 2.5rem;
}

.hero__carte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  background-color: var(--bleu-profond);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  padding: 2rem 1.5rem;
}

.hero__titre {
  color: var(--blanc);
  /* Plafonnée à 2.25rem pour que le nom complet tienne sur 2 lignes
     dans la colonne texte en desktop. */
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  margin-bottom: 0.75rem;
}

.hero__fonction {
  color: var(--gris-clair);
  font-family: var(--police-titre);
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* filet fin */
}

.hero__accroche {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.75rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero__photo img {
  width: 100%;
  border-radius: var(--rayon);
  border: 1px solid rgba(255, 255, 255, 0.15);
  filter: saturate(0.85); /* photo légèrement désaturée (§8) */
}

@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
  }

  .hero__carte {
    padding: 2.5rem 2rem;
  }
}

@media (min-width: 900px) {
  .hero {
    padding-block: 2rem 4rem;
  }

  .hero__carte {
    grid-template-columns: 11fr 9fr;
    align-items: center;
    gap: 3rem;
    padding: 3.5rem 3rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8b. Chiffres-clés                                                  */
/* ------------------------------------------------------------------ */
.chiffres {
  padding-block: 0.5rem 2.5rem;
}

/* Carte blanche flottante, comme les sections de la maquette. */
.chiffres__carte {
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  padding: 1.5rem;
}

.chiffres__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.tuile-chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem;
  background-color: var(--bleu-pale);
  border-radius: var(--rayon);
  text-align: center;
}

.tuile-chiffre__valeur {
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--bleu-profond);
}

.tuile-chiffre__intitule {
  font-size: 0.875rem;
  color: var(--gris-texte);
}

@media (min-width: 900px) {
  .chiffres {
    padding-block: 0.5rem 3.5rem;
  }

  .chiffres__carte {
    padding: 2.5rem;
  }

  .chiffres__grille {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .tuile-chiffre__valeur {
    font-size: 2.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8c. Domaines d'intervention                                        */
/* ------------------------------------------------------------------ */
/* Titre de section réutilisable (aligné à gauche, comme la maquette). */
.titre-section {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.domaines {
  padding-block: 0.5rem 2.5rem;
}

.domaines__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.carte-domaine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1.5rem 1.25rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  text-align: center;
}

.carte-domaine__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: var(--bleu-pale);
  border-radius: var(--rayon);
  color: var(--bleu-moyen);
}

.carte-domaine__icone svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carte-domaine__titre {
  font-size: 1rem;
  line-height: 1.35;
}

.carte-domaine__texte {
  font-size: 0.85rem;
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .domaines {
    padding-block: 0.5rem 3.5rem;
  }

  .domaines__grille {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8d. Réalisations (grille filtrable)                                */
/* ------------------------------------------------------------------ */
.realisations {
  padding-block: 0.5rem 2.5rem;
}

/* Filtres par thématique (liens GET ; JS filtre sans rechargement). */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.filtres__lien {
  padding: 0.4rem 0.9rem;
  background-color: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  color: var(--gris-texte);
  font-size: 0.85rem;
  font-weight: 600;
}

.filtres__lien:hover,
.filtres__lien:focus {
  border-color: var(--vert);
  color: var(--vert);
  text-decoration: none;
}

.filtres__lien--actif {
  background-color: var(--vert);
  border-color: var(--vert);
  color: var(--blanc);
}

.filtres__lien--actif:hover,
.filtres__lien--actif:focus {
  color: var(--blanc);
}

.realisations__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.carte-realisation {
  display: flex;
  flex-direction: column;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  overflow: hidden; /* arrondit l'image du haut */
}

.carte-realisation--cachee {
  display: none;
}

.carte-realisation__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.85); /* photos légèrement désaturées (DA) */
}

.carte-realisation__corps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  flex-grow: 1;
}

.badge {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background-color: var(--bleu-pale);
  border-radius: var(--rayon);
  color: var(--bleu-profond);
  font-size: 0.75rem;
  font-weight: 600;
}

.carte-realisation__titre {
  font-size: 1.0625rem;
  line-height: 1.35;
}

.carte-realisation__organisation {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0;
}

.carte-realisation__meta {
  font-size: 0.85rem;
  margin-bottom: 0;
}

.carte-realisation__impact {
  font-size: 0.875rem;
  margin-top: 0.25rem;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .realisations__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .realisations {
    padding-block: 0.5rem 3.5rem;
  }

  .realisations__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8e. Services                                                       */
/* ------------------------------------------------------------------ */
.services {
  padding-block: 0.5rem 2.5rem;
}

.services__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.carte-service {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.carte-service__icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: var(--bleu-pale);
  border-radius: var(--rayon);
  color: var(--bleu-moyen);
}

.carte-service__icone svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carte-service__titre {
  font-size: 1.0625rem;
  margin-bottom: 0.375rem;
}

.carte-service__texte {
  font-size: 0.875rem;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .services__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .services {
    padding-block: 0.5rem 3.5rem;
  }

  .services__grille {
    gap: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8f. Partenaires (logos en niveaux de gris, couleur au survol)      */
/* ------------------------------------------------------------------ */
.partenaires {
  padding-block: 0.5rem 2.5rem;
}

.partenaires__carte {
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  padding: 1.5rem;
}

.partenaires__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 1rem;
}

.partenaires__element {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 0.75rem 1rem;
  background-color: var(--fond-page);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
}

.partenaires__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.partenaires__lien:hover,
.partenaires__lien:focus {
  text-decoration: none;
}

/* Logos en niveaux de gris par défaut, couleur au survol (comme la maquette). */
.partenaires__logo {
  max-height: 48px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Couleur au survol de la tuile — fonctionne que le logo soit lié ou non
   (la plupart des partenaires n'ont pas de site web renseigné). */
.partenaires__element:hover .partenaires__logo,
.partenaires__element:focus-within .partenaires__logo,
.partenaires__lien:hover .partenaires__logo,
.partenaires__lien:focus .partenaires__logo {
  filter: grayscale(0);
  opacity: 1;
}

/* Repli texte quand le logo n'est pas (encore) fourni. */
.partenaires__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bleu-profond);
  text-align: center;
}

@media (min-width: 640px) {
  .partenaires__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .partenaires {
    padding-block: 0.5rem 3.5rem;
  }

  .partenaires__carte {
    padding: 2.5rem;
  }

  .partenaires__grille {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8g. Appel à l'action                                               */
/* ------------------------------------------------------------------ */
.appel {
  padding-block: 0.5rem 3rem;
}

.appel__carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  background-color: var(--bleu-moyen);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.appel__titre {
  color: var(--blanc);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.appel__texte {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

/* Bouton blanc sur fond bleu — accent inversé pour le contraste. */
.appel__bouton {
  flex-shrink: 0;
  background-color: var(--blanc);
  border-color: var(--blanc);
  color: var(--bleu-profond);
}

.appel__bouton:hover,
.appel__bouton:focus {
  background-color: var(--bleu-pale);
  border-color: var(--bleu-pale);
  color: var(--bleu-profond);
}

@media (min-width: 900px) {
  .appel {
    padding-block: 0.5rem 4rem;
  }

  .appel__carte {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2.5rem 3rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8h. À propos — hero + carte de présentation                        */
/*     Le hero réutilise les classes .hero de l'accueil ; la carte     */
/*     (bio + tuiles 2×2 + partenaires) reproduit la maquette.          */
/* ------------------------------------------------------------------ */

/* Étiquette « À propos » au-dessus du titre du hero. */
.hero__kicker {
  display: inline-block;
  margin-bottom: 0.875rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--rayon);
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.apropos {
  padding-block: 0.5rem 2.5rem;
}

.apropos__carte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 1.75rem 1.5rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.apropos__profil p {
  font-size: 0.9375rem;
}

/* Tuiles de chiffres, disposées 2×2 comme la maquette. */
.apropos__tuiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Bandeau partenaires en bas de la carte. */
.apropos__partenaires {
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris-clair);
}

.apropos__partenaires-titre {
  font-size: 0.8125rem;
  font-family: var(--police-corps);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris-texte);
  margin-bottom: 1rem;
}

.apropos__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

.apropos__logo img {
  max-height: 40px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
}

.apropos__logo-nom {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bleu-profond);
  opacity: 0.7;
}

/* Badges & certifications */
.certifications {
  padding-block: 0.5rem 2.5rem;
}

.certifications__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.certification {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.certification__icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background-color: var(--bleu-pale);
  border-radius: 50%;
  color: var(--vert);
}

.certification__icone svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.certification__titre {
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.certification__meta {
  font-size: 0.85rem;
  color: var(--gris-texte);
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .certifications__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .certifications {
    padding-block: 0.5rem 3.5rem;
  }

  .certifications__grille {
    gap: 1.5rem;
  }
}

.approche {
  padding-block: 0.5rem 2.5rem;
}

.approche__carte {
  padding: 2rem 1.5rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.approche__intro {
  max-width: 75ch;
  margin-bottom: 1.75rem;
}

.approche__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
}

.approche__principe {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.approche__icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background-color: var(--bleu-pale);
  border-radius: var(--rayon);
  color: var(--bleu-moyen);
}

.approche__icone svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.approche__titre {
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.approche__texte {
  font-size: 0.9rem;
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .approche__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

.zones {
  padding-block: 0.5rem 2.5rem;
}

.zones__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.zone {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
}

.zone__icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background-color: var(--bleu-pale);
  border-radius: 50%;
  color: var(--vert);
}

.zone__icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zone__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--bleu-profond);
}

.apropos-contact {
  padding-block: 0.5rem 3rem;
}

.apropos-contact__carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  background-color: var(--bleu-profond);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.apropos-contact__titre {
  color: var(--blanc);
  font-size: 1.375rem;
  margin-bottom: 1rem;
}

.apropos-contact__liste a,
.apropos-contact__sociaux a {
  color: var(--gris-clair);
}

.apropos-contact__liste a:hover,
.apropos-contact__sociaux a:hover {
  color: var(--blanc);
}

.apropos-contact__liste li {
  margin-bottom: 0.4rem;
}

.apropos-contact__sociaux {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
}

.apropos-contact__bouton {
  flex-shrink: 0;
}

@media (min-width: 900px) {
  /* Bio à gauche (large), tuiles à droite ; partenaires sur toute la
     largeur en bas — exactement comme la maquette. */
  .apropos__carte {
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem 2.5rem;
    padding: 2.5rem;
  }

  .apropos__profil {
    grid-column: 1;
    grid-row: 1;
  }

  .apropos__chiffres {
    grid-column: 2;
    grid-row: 1;
  }

  .apropos__partenaires {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .zones__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .apropos-contact__carte {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2.5rem 3rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8h-bis. Témoignages (Évaluations de collaboration)                 */
/* ------------------------------------------------------------------ */
.temoignages {
  padding-block: 0.5rem 2.5rem;
}

.temoignages__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.temoignages__entete .titre-section {
  margin-bottom: 0;
}

/* Boutons de navigation : masqués sans JS (le carrousel reste défilable
   nativement au doigt/à la souris), affichés avec JS. */
.carrousel__nav {
  display: none;
  gap: 0.5rem;
  flex-shrink: 0;
}

.js .carrousel__nav {
  display: flex;
}

.carrousel__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gris-clair);
  border-radius: 50%;
  background-color: var(--blanc);
  color: var(--bleu-profond);
  cursor: pointer;
}

.carrousel__fleche:hover,
.carrousel__fleche:focus {
  border-color: var(--vert);
  color: var(--vert);
}

.carrousel__fleche svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carrousel__fleche[disabled] {
  opacity: 0.4;
  cursor: default;
  border-color: var(--gris-clair);
  color: var(--bleu-profond);
}

/* Piste défilante avec accroche (scroll-snap). */
.carrousel__piste {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* De l'air pour que les ombres des cartes ne soient pas rognées. */
  padding: 0.5rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  /* Barre de défilement masquée : navigation par flèches + points. */
  scrollbar-width: none;
}

.carrousel__piste::-webkit-scrollbar {
  display: none;
}

.temoignage {
  flex: 0 0 88%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

/* Ligne du haut : étoiles (avis) + logo Google. */
.temoignage__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.etoiles {
  display: inline-flex;
  gap: 2px;
}

.etoiles__etoile svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: var(--gris-clair);
}

.etoiles__etoile--pleine svg {
  fill: #FBBC04; /* ambre Google (contexte avis) */
}

.temoignage__source {
  display: inline-flex;
  flex-shrink: 0;
}

.logo-google {
  display: block;
  width: 20px;
  height: 20px;
}

/* Points de pagination du carrousel (masqués sans JS). */
.carrousel__points {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.js .carrousel__points {
  display: flex;
}

.carrousel__point {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--gris-clair);
  cursor: pointer;
  transition: background-color 0.15s ease, width 0.15s ease;
}

.carrousel__point:hover {
  background-color: var(--bleu-moyen);
}

.carrousel__point--actif {
  width: 22px;
  border-radius: 4px;
  background-color: var(--vert);
}

.carrousel__point--actif:hover {
  background-color: var(--vert);
}

.temoignage__citation {
  flex-grow: 1;
  margin: 0;
}

.temoignage__citation p {
  margin: 0;
  color: var(--gris-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.temoignage__auteur {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gris-clair);
}

/* Avatar « initiale » façon Google : cercle coloré, initiale en blanc.
   La couleur est posée en style inline (une par personne). */
.temoignage__initiales {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bleu-profond);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
}

.temoignage__photo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(0.85);
}

.temoignage__id {
  display: flex;
  flex-direction: column;
}

.temoignage__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bleu-profond);
}

.temoignage__fonction {
  font-size: 0.8125rem;
  color: var(--gris-texte);
}

@media (min-width: 640px) {
  .temoignage {
    flex-basis: calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 900px) {
  .temoignages {
    padding-block: 0.5rem 3.5rem;
  }

  .carrousel__piste {
    gap: 1.5rem;
  }

  .temoignage {
    flex-basis: calc((100% - 3rem) / 3);
  }
}

/* ------------------------------------------------------------------ */
/* 8i. Blog (liste des publications)                                  */
/* ------------------------------------------------------------------ */
.blog {
  padding-block: 1.25rem 3rem;
}

.blog__titre {
  margin-bottom: 0.5rem;
}

.blog__intro {
  margin-bottom: 1.75rem;
}

.blog__vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  text-align: center;
}

.blog__vide-illus {
  width: min(100%, 200px);
  height: auto;
}

.blog__vide p {
  margin: 0;
  color: var(--gris-texte);
}

.articles__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.carte-article {
  display: flex;
  flex-direction: column;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.carte-article--cachee {
  display: none;
}

.carte-article__lien {
  display: block;
}

.carte-article__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.85);
}

.carte-article__corps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  flex-grow: 1;
}

.carte-article__titre {
  font-size: 1.125rem;
  line-height: 1.35;
}

.carte-article__titre a {
  color: var(--bleu-profond);
}

.carte-article__titre a:hover,
.carte-article__titre a:focus {
  color: var(--vert);
  text-decoration: none;
}

.carte-article__date {
  font-size: 0.8125rem;
  color: var(--gris-texte);
  margin-bottom: 0;
}

.carte-article__resume {
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.carte-article__plus {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9375rem;
}

@media (min-width: 640px) {
  .articles__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .articles__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8j. Article (détail)                                               */
/* ------------------------------------------------------------------ */
.article {
  padding-block: 1.25rem 3rem;
}

.article__carte {
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  padding: 1.75rem 1.5rem;
}

.article__fil {
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.article__entete {
  margin-bottom: 1.5rem;
}

.article__titre {
  font-size: 1.75rem;
  margin-block: 0.75rem 0.5rem;
}

.article__date {
  font-size: 0.875rem;
  color: var(--gris-texte);
  margin-bottom: 0;
}

.article__image {
  width: 100%;
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
  filter: saturate(0.85);
}

.article__contenu p {
  margin-bottom: 1.25rem;
}

.article__telechargement {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris-clair);
}

@media (min-width: 900px) {
  .article__carte {
    padding: 3rem;
  }

  .article__contenu {
    max-width: 70ch;
  }
}

/* ------------------------------------------------------------------ */
/* 8k. Contact (formulaire)                                           */
/* ------------------------------------------------------------------ */
.contact {
  padding-block: 1.25rem 3rem;
}

.contact__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.contact__carte {
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  padding: 1.75rem 1.5rem;
}

.contact__titre {
  margin-bottom: 0.5rem;
}

.contact__intro {
  margin-bottom: 1.5rem;
}

/* Honeypot : sorti du flux visuel mais présent pour les robots. */
.champ-appat {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__champ {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  max-width: none;
}

.formulaire__ligne {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}

.formulaire label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bleu-profond);
}

.formulaire__requis {
  color: var(--vert);
}

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  background-color: var(--blanc);
  font-size: 0.9375rem;
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
  border-color: var(--vert);
}

.formulaire textarea {
  resize: vertical;
  min-height: 8rem;
}

.formulaire [aria-invalid="true"] {
  border-color: #A03123;
}

.formulaire__erreur {
  font-size: 0.8125rem;
  color: #A03123;
}

.formulaire__actions {
  margin-bottom: 0;
}

.contact__aside {
  align-self: start;
  padding: 1.5rem;
  background-color: var(--bleu-moyen);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  color: var(--blanc);
}

.contact__illus {
  display: block;
  width: min(100%, 180px);
  height: auto;
  margin: 0 auto 1.25rem;
}

.contact__aside-titre {
  color: var(--blanc);
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.contact__coordonnees a,
.contact__sociaux a {
  color: var(--blanc);
}

.contact__coordonnees li {
  margin-bottom: 0.5rem;
}

.contact__whatsapp {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 1.25rem;
}

.contact__sociaux {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

@media (min-width: 640px) {
  .formulaire__ligne {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .contact__grille {
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
  }

  .contact__carte {
    padding: 2.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8l. Pages simples (404, mentions légales)                          */
/* ------------------------------------------------------------------ */
.erreur {
  padding-block: 3rem 4rem;
}

.erreur__carte {
  padding: 3rem 1.5rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  text-align: center;
}

.erreur__illus {
  width: min(100%, 420px);
  height: auto;
  margin: 0 auto 1.5rem;
}

.erreur__titre {
  margin-bottom: 0.75rem;
}

.erreur__texte {
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

.legales {
  padding-block: 1.25rem 3rem;
}

.legales__carte {
  padding: 1.75rem 1.5rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.legales__titre {
  margin-bottom: 1.5rem;
}

.legales__carte h2 {
  font-size: 1.1875rem;
  margin-block: 1.75rem 0.5rem;
}

.legales__retour {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris-clair);
}

@media (min-width: 900px) {
  .legales__carte {
    padding: 3rem;
  }
}

/* ------------------------------------------------------------------ */
/* 9. Pied de page                                                    */
/* ------------------------------------------------------------------ */
.pied {
  background-color: var(--bleu-profond);
  color: var(--gris-clair);
  font-size: 0.9375rem;
}

.pied__colonnes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-block: 2.5rem;
}

.pied__logo-img {
  height: 44px;
  width: auto;
  margin-bottom: 0.875rem;
}

.pied__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: 0.75rem;
}

.pied__texte {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

.pied__titre {
  font-size: 0.8125rem;
  font-family: var(--police-corps);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.875rem;
}

.pied__liste li {
  margin-bottom: 0.5rem;
}

.pied__liste--sociaux {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
}

.pied__lien {
  color: var(--gris-clair);
}

.pied__lien:hover,
.pied__lien:focus {
  color: var(--blanc);
}

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* filet fin */
  padding-block: 1.25rem;
}

.pied__bas-interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}

.pied__mentions {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: none;
}

.pied__credit {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

@media (min-width: 900px) {
  .pied__colonnes {
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 3rem;
    padding-block: 3rem;
  }
}

/* ------------------------------------------------------------------ */
/* 9b. Liens sociaux (icônes SVG inline, alternative à Font Awesome)   */
/* ------------------------------------------------------------------ */
.lien-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lien-social svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor; /* prend la couleur du lien (gris/blanc selon le fond) */
}

.lien-social:hover,
.lien-social:focus {
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* 8m. Boutique (liste + détail produit + paiement)                   */
/* ------------------------------------------------------------------ */
.boutique {
  padding-block: 1.25rem 3rem;
}

.boutique__titre {
  margin-bottom: 0.5rem;
}

.boutique__intro {
  margin-bottom: 1.75rem;
}

.boutique__vide {
  padding: 1.5rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
}

.boutique__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.produit-carte {
  display: flex;
  flex-direction: column;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.produit-carte__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9);
}

.produit-carte__corps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  flex-grow: 1;
}

.produit-carte__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.prix {
  flex-shrink: 0;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bleu-profond);
}

.prix--gratuit {
  color: var(--vert);
}

.produit-carte__titre {
  font-size: 1.125rem;
  line-height: 1.35;
}

.produit-carte__titre a {
  color: var(--bleu-profond);
}

.produit-carte__titre a:hover {
  color: var(--vert);
  text-decoration: none;
}

.produit-carte__desc {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.produit-carte__action {
  align-self: flex-start;
  margin-top: auto;
}

@media (min-width: 640px) {
  .boutique__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .boutique__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* --- Détail produit --- */
.produit {
  padding-block: 1.25rem 3rem;
}

.produit__fil {
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.produit__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  background-color: var(--blanc);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  padding: 1.75rem 1.5rem;
}

.produit__visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bleu-pale);
  border-radius: var(--rayon);
  min-height: 220px;
  overflow: hidden;
}

.produit__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produit__visuel-icone svg {
  width: 84px;
  height: 84px;
  fill: none;
  stroke: var(--bleu-moyen);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.produit__titre {
  font-size: 1.6rem;
  margin-block: 0.6rem 0.4rem;
}

.produit__prix {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bleu-profond);
  margin-bottom: 1rem;
}

.produit__prix--gratuit {
  color: var(--vert);
}

.produit__desc {
  color: var(--gris-texte);
  margin-bottom: 1.25rem;
}

.produit__telecharger {
  margin-top: 0.5rem;
}

.produit__indispo {
  color: var(--gris-texte);
  font-style: italic;
}

/* --- Section paiement --- */
.paiement {
  margin-top: 1.5rem;
  padding: 1.75rem 1.5rem;
  background-color: var(--bleu-profond);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre);
  color: var(--gris-clair);
}

.paiement__titre {
  color: var(--blanc);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.paiement__consigne {
  color: rgba(255, 255, 255, 0.85);
}

.paiement__consigne strong {
  color: var(--blanc);
}

.paiement__moyens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block: 1.25rem;
}

.paiement__moyen {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rayon);
}

.paiement__operateur {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}

.paiement__numero {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--blanc);
}

.paiement__numero:hover {
  color: var(--blanc);
}

.paiement__instructions {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
}

.paiement__actions {
  margin-block: 1.25rem 0.75rem;
}

.paiement__emails {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0;
}

.paiement__emails a {
  color: var(--blanc);
}

/* Bouton WhatsApp (couleur de marque, contexte reconnaissable). */
.bouton--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #25D366;
  border-color: #25D366;
  color: #073b26;
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
}

.bouton--whatsapp:hover,
.bouton--whatsapp:focus {
  background-color: #1ebe5a;
  border-color: #1ebe5a;
  color: #073b26;
}

.bouton--whatsapp .bouton__icone svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (min-width: 640px) {
  .paiement__moyens {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .produit__grille {
    grid-template-columns: 5fr 6fr;
    gap: 2.5rem;
    padding: 2.5rem;
    align-items: start;
  }
  .paiement {
    padding: 2.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* 10. Messages flash                                                 */
/* ------------------------------------------------------------------ */
.flash {
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--gris-clair);
  border-left: 3px solid var(--vert);
  border-radius: var(--rayon);
  background-color: var(--fond-page);
  margin-block: 1rem;
}

.flash--succes {
  border-left-color: #2E6B3F;
}

.flash--erreur {
  border-left-color: #A03123;
}

/* ------------------------------------------------------------------ */
/* 11. Animations — sobres et modernes                                */
/*     Amélioration progressive : la classe .reveal est posée par le  */
/*     JS ; sans JS, tout reste visible. Désactivées si l'utilisateur */
/*     a demandé « réduire les animations » (accessibilité).           */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Apparition douce au défilement (fondu + léger glissement). */
  .reveal {
    opacity: 0;
  }

  .reveal.est-visible {
    animation: apparaitre 0.55s ease both;
  }

  @keyframes apparaitre {
    from {
      opacity: 0;
      translate: 0 18px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* Micro-élévation au survol des cartes de contenu.
   (transform = propriété indépendante de l'animation d'apparition :
    aucun conflit de transition.) */
.carte-domaine,
.carte-service,
.carte-realisation,
.carte-article,
.certification {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .carte-domaine:hover,
  .carte-service:hover,
  .carte-realisation:hover,
  .carte-article:hover,
  .certification:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(10, 58, 85, 0.14);
  }
}

/* Retour tactile discret sur les boutons. */
.bouton {
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.1s ease;
}

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