/* Boutons ---------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: var(--rayon-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.bouton--primaire {
  background: var(--bleu-fonce);
  color: var(--blanc);
}

.bouton--primaire:hover {
  background: var(--bleu-fonce-700);
  color: var(--blanc);
}

.bouton--secondaire {
  background: transparent;
  color: var(--bleu-fonce);
  border-color: var(--bleu-fonce);
}

.bouton--secondaire:hover {
  background: var(--bleu-clair-100);
}

.bouton--petit {
  padding: 0.5em 1em;
  font-size: 0.85rem;
  min-height: 38px;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}

/* Bloc "hero" -------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--espace-5);
  align-items: center;
  padding-block: var(--espace-6);
}

.hero__texte {
  text-align: center;
}

.hero__texte h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  line-height: 1.45;
}

.hero__texte p {
  margin-inline: auto;
}

.hero__slogan {
  font-family: var(--police-accroche);
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  font-weight: 600;
  color: var(--bleu-fonce);
  margin-bottom: var(--espace-2);
}

.hero__texte .groupe-boutons {
  justify-content: center;
  margin-bottom: var(--espace-3);
}

.hero__media {
  min-width: 0;
}

.hero__media img {
  border-radius: var(--rayon-md);
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* Hero avec photo en arrière-plan (accueil) -------------------------------- */

.hero-fond {
  position: relative;
  overflow: hidden;
  min-height: min(64vh, 34rem);
  display: flex;
  align-items: center;
}

.hero-fond--grand {
  min-height: min(74vh, 46rem);
}

.hero-fond__image {
  position: absolute;
  inset: 0;
}

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

.hero-fond__video {
  position: absolute;
  inset: 0;
}

.hero-fond__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fond__scrim {
  position: absolute;
  inset: 0;
  background: rgba(250, 249, 246, 0.8);
}

.hero-fond__contenu {
  position: relative;
  padding-block: var(--espace-7) var(--espace-6);
  text-align: center;
}

.hero-fond__contenu p {
  margin-inline: auto;
}

.hero-fond__contenu .groupe-boutons {
  justify-content: center;
}

.hero-fond__titre-particules {
  margin: 0 auto var(--espace-3);
  max-width: 46rem;
  height: 9rem;
}

.hero-fond__titre-particules canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-fond__accroche {
  font-family: var(--police-titres);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: var(--bleu-fonce);
  max-width: 42rem;
}

@media (max-width: 640px) {
  .hero-fond__titre-particules {
    height: 6rem;
  }
}

.liste-mots-cles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-1);
  list-style: none;
  padding: 0;
  margin: var(--espace-2) auto 0;
}

.liste-mots-cles li {
  padding: 0.4em 0.9em;
  background: var(--blanc);
  border: 1px solid var(--bleu-clair-300);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bleu-fonce);
}

.hero-fond__vague {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  z-index: 1;
}

.hero-fond__vague svg {
  display: block;
  width: 100%;
  height: 3.5rem;
}

@media (max-width: 640px) {
  .hero-fond__scrim {
    background: rgba(250, 249, 246, 0.88);
  }

  .hero-fond {
    min-height: 0;
  }

  .hero-fond__vague svg {
    height: 2.25rem;
  }
}

@media (min-width: 901px) {
  .hero--vague {
    grid-template-columns: 1.15fr 1.15fr;
    gap: var(--espace-7);
    align-items: stretch;
  }

  .hero--vague .hero__media {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .hero--vague .carousel-video__cadre {
    flex: 1;
  }

  .hero--vague .carousel-video {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
}

/* Carousel vidéo (espace adhérents) -------------------------------------- */

.carousel-video {
  aspect-ratio: 960 / 1706;
  max-height: 65rem;
  margin-inline: auto;
  width: 100%;
  padding: 1.5rem;
}

/* Sous 901px, le hero passe en une colonne (voir .hero) : la vidéo, très
   verticale (960/1706), se met alors en dessous du texte à pleine largeur —
   sur un écran juste un peu étroit (pas forcément un vrai mobile), ça donne
   une vidéo démesurément haute. On la contraint par la hauteur disponible
   plutôt que par la largeur du conteneur. */
@media (max-width: 900px) {
  .carousel-video {
    width: auto;
    max-width: 100%;
    height: min(60vh, 30rem);
    max-height: none;
    /* Élargi par rapport au ratio d'origine de la vidéo (960/1706) : la
       vidéo est en object-fit: cover, donc un cadre plus large montre
       simplement une tranche plus large de l'image, sans la déformer. */
    aspect-ratio: 5 / 6;
  }
}

.carousel-video__cadre {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--rayon-md);
  overflow: hidden;
  background: var(--bleu-clair-100);
  transition: transform 350ms ease;
  transform: translateZ(0);
}

.carousel-video__cadre:hover,
.carousel-video__cadre:focus-within {
  transform: translateZ(0) scale(1.1);
}

.carousel-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}

.carousel-video__media.est-active {
  opacity: 1;
  z-index: 1;
}

.carousel-video__coin {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--bleu-clair);
  z-index: 2;
  pointer-events: none;
}

.carousel-video__coin--haut {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}

.carousel-video__coin--bas {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}

.carousel-video__progression {
  display: flex;
  gap: var(--espace-1);
  margin-top: var(--espace-2);
}

.carousel-video__progression-item {
  flex: 1;
  padding: 0.4em 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.carousel-video__progression-track {
  height: 3px;
  border-radius: 2px;
  background: var(--bleu-clair-200);
  overflow: hidden;
}

.carousel-video__progression-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--bleu-fonce);
}

.carousel-video__progression-fill--suivi {
  transition: width 150ms linear;
}

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

/* Vague de séparation -------------------------------------------------- */

.vague-separateur {
  display: block;
  line-height: 0;
  overflow: hidden;
  margin-bottom: -1px;
}

.vague-separateur svg {
  display: block;
  width: 100%;
  height: 3.5rem;
}

@media (max-width: 640px) {
  .vague-separateur svg {
    height: 2.25rem;
  }
}

/* "Nos objectifs" (accueil) : trio de photos séparées, mot-clé en dessous
   de chacune dans la police d'accroche. ---------------------------------- */

.objectifs-photos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--espace-4);
  padding-block: var(--espace-3);
}

.objectif {
  position: relative;
  width: 27rem;
  max-width: 69vw;
  margin: 0;
  text-align: center;
}

.objectif__cadre {
  overflow: hidden;
  border-radius: var(--rayon-md);
  border: 4px solid var(--fond-alt);
  box-shadow: var(--ombre-douce);
  height: 285px;
  transition: transform 0.4s ease;
}

.objectif__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .objectif__cadre:hover,
  .objectif__cadre:focus-within {
    transform: scale(1.1);
    position: relative;
    z-index: 2;
  }
}

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

.objectif__mot {
  font-family: var(--police-accroche);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--bleu-fonce);
  margin-top: var(--espace-1);
}

@media (max-width: 640px) {
  .objectifs-photos {
    flex-direction: column;
    align-items: center;
  }

  .objectif {
    width: 100%;
    max-width: 45rem;
  }

  .objectif__cadre {
    height: 315px;
  }
}

/* Cartes ------------------------------------------------------------------- */

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  padding: var(--espace-3);
}

/* Page Dons : chiffres clés de la déduction fiscale mis en avant, plutôt
   que noyés dans le texte réglementaire. */
.don-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
  margin-bottom: var(--espace-3);
}

.don-stat {
  flex: 1;
  min-width: 9rem;
  padding: var(--espace-2);
  background: var(--bleu-clair-100);
  border-radius: var(--rayon-sm);
  text-align: center;
}

.don-stat__valeur {
  display: block;
  font-family: var(--police-accroche);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--bleu-fonce);
}

.don-stat__libelle {
  display: block;
  font-size: 0.8rem;
  color: var(--couleur-texte-doux);
  margin-top: 0.2rem;
}

.liste-actualites {
  display: grid;
  gap: var(--espace-3);
  max-width: var(--largeur-texte-long);
  margin-inline: auto;
}

.carte--actualite h2 {
  margin-top: 0;
}

.carte--actualite__media {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--rayon-sm);
  margin-bottom: var(--espace-2);
  background: var(--bleu-clair-100);
}

.carte--actualite__media--logo {
  max-width: 16rem;
  max-height: 16rem;
  margin-inline: auto;
  object-fit: contain;
  padding: var(--espace-3);
}

.carte-produit {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease;
}

a.carte-produit:hover {
  border-color: var(--bleu-clair);
}

.carte-produit__image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-3);
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background: var(--bleu-clair-100);
}

.carte-produit__image img {
  max-width: 32%;
  max-height: 78%;
  object-fit: contain;
}

.carte-produit__image .zone-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  background: transparent;
}

.carte-produit__corps {
  padding: var(--espace-3);
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  flex: 1;
}

.carte-produit__corps h3 {
  margin: 0;
}

.carte-produit--horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.carte-produit--horizontal .carte-produit__corps {
  padding: var(--espace-4);
  justify-content: center;
}

.carte-produit--horizontal .carte-produit__image {
  aspect-ratio: auto;
}

.carte-produit--horizontal .carte-produit__image--pleine {
  padding: 0;
  background: none;
}

.carte-produit--horizontal .carte-produit__image--pleine img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

@media (max-width: 700px) {
  .carte-produit--horizontal {
    grid-template-columns: 1fr;
  }

  .carte-produit--horizontal .carte-produit__image {
    aspect-ratio: 4 / 3;
  }
}

.carte--animation {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.carte--animation > p:first-of-type {
  flex: 1;
}

.carte--animation h3 {
  font-family: var(--police-accroche);
  font-weight: 600;
  font-size: 1.2rem;
}

.carte--animation .carte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-2);
  margin-top: var(--espace-2);
  font-size: 0.85rem;
  font-weight: 600;
  list-style: none;
  padding: 0;
}

.carte--animation .carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espace-2);
  margin-top: auto;
  padding-top: var(--espace-2);
  border-top: 1px solid var(--bordure);
}

.carte--animation .carte__prix {
  margin: 0;
  padding-top: 0;
  border-top: none;
}

.carte--animation .carte__meta li {
  padding: 0.3em 0.7em;
  background: var(--bleu-fonce);
  color: var(--blanc);
  border-radius: var(--rayon-sm);
}

.encadre-kit {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--espace-4);
  text-align: center;
  background: var(--bleu-clair-100);
  border: 1px solid var(--bleu-clair-300);
  border-radius: var(--rayon-md);
}

.encadre-kit p {
  margin-inline: auto;
}

.encadre-kit .carte__prix {
  border-top: none;
  padding-top: 0;
}

.encadre-kit .bouton {
  margin-top: var(--espace-2);
}

.carte__prix {
  margin: var(--espace-2) 0 0;
  padding-top: var(--espace-2);
  border-top: 1px solid var(--bordure);
  font-family: var(--police-titres);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--bleu-fonce);
}

/* Chiffres clés -------------------------------------------------------- */

.chiffres-cles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-3);
  text-align: center;
}

.chiffre-cle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espace-3);
  border-radius: var(--rayon-md);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.chiffre-cle:hover,
.chiffre-cle:focus-visible {
  border-color: var(--bleu-clair-300);
  background: var(--bleu-clair-100);
  transform: translateY(-3px);
}

.chiffre-cle__valeur {
  font-family: var(--police-accroche);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--bleu-fonce);
  display: block;
}

.chiffre-cle__libelle {
  color: var(--couleur-texte-doux);
}

.chiffre-cle__fleche {
  margin-top: var(--espace-2);
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--bleu-fonce);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blanc);
  transition: background-color 200ms ease, transform 200ms ease;
}

.chiffre-cle:hover .chiffre-cle__fleche,
.chiffre-cle:focus-visible .chiffre-cle__fleche {
  background: var(--bleu-clair);
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .chiffres-cles {
    grid-template-columns: 1fr;
    gap: var(--espace-4);
  }
}

/* Portraits (fondatrices / équipe) --------------------------------------- */

.portrait {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.portrait__cadre {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin-inline: auto;
  margin-bottom: var(--espace-2);
  background: var(--bleu-clair-100);
  transform: translateZ(0);
}

.portrait__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Réglages par photo (cadrage large, tailles de tête très inégales) : voir
     les variables --portrait-x/--portrait-y/--portrait-zoom posées en style
     inline sur chaque <img>, dans a-propos.php. */
  object-position: var(--portrait-x, 50%) var(--portrait-y, 50%);
  transform: scale(var(--portrait-zoom, 1));
  transform-origin: var(--portrait-x, 50%) var(--portrait-y, 50%);
}

.portrait h4 {
  margin-bottom: 0.3rem;
}

.portrait__metier {
  color: var(--couleur-texte-doux);
  font-size: 0.9rem;
  max-width: none;
}

.portrait__poste {
  display: inline-block;
  align-self: center;
  margin-top: auto;
  padding: 0.25em 0.9em;
  background: var(--bleu-fonce);
  color: var(--blanc);
  border-radius: var(--rayon-sm);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Formulaires -------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: var(--espace-3);
  max-width: 40rem;
}

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

.champ label {
  font-weight: 600;
}

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  padding: 0.7em 0.9em;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  color: var(--couleur-texte);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--bleu-fonce);
}

.champ--deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-2);
}

/* Champ piège anti-spam (contact.php) : masqué visuellement hors-écran
   plutôt qu'en display:none, pour rester rempli par les robots les plus
   basiques qui ignorent le CSS. */
.champ--piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .champ--deux-colonnes {
    grid-template-columns: 1fr;
  }
}

.champ__erreur {
  color: var(--erreur);
  font-size: 0.85rem;
}

.message-etat {
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-sm);
  border: 1px solid;
}

.message-etat--succes {
  background: #eaf4ee;
  border-color: #2f6f4f;
  color: #1f4a34;
}

.message-etat--erreur {
  background: #fbeceb;
  border-color: var(--erreur);
  color: var(--erreur);
}

/* Bandeau CTA -------------------------------------------------------------- */

.bandeau-cta {
  text-align: center;
  padding: var(--espace-5) var(--espace-3);
  background: var(--bleu-clair-100);
  border-radius: var(--rayon-md);
}

/* En-tête de page (logo + titre centrés) ------------------------------------ */

.entete-page {
  text-align: center;
  margin-bottom: var(--espace-4);
}

.entete-page__logo {
  width: 110px;
  height: 110px;
  margin: 0 auto var(--espace-2);
  display: block;
}

.entete-page__logo--grand {
  width: clamp(140px, 22vw, 220px);
  height: clamp(140px, 22vw, 220px);
}

.entete-page h1 {
  margin-bottom: 0;
}

/* Texte descriptif centré (utilitaire) -------------------------------------- */

.texte-centre {
  text-align: center;
  margin-inline: auto;
}

/* Phrase d'accroche isolée, à faire ressortir du texte courant qui
   l'entoure (ex. « L'aventure ne fait que commencer », espace adhérents). */
.accroche-forte {
  font-family: var(--police-accroche);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  color: var(--bleu-fonce);
  max-width: none;
}

/* Page « À propos » : texte trop resserré dans la colonne par défaut
   (--largeur-texte-long, 42rem) — élargi d'environ 25 % sur cette page. */
.page-a-propos .texte-centre {
  max-width: 52rem;
}

/* Page « À propos » : titres trop collés au contenu qui suit, photos trop
   petites — ajustés sur cette page uniquement. */
.page-a-propos h2,
.page-a-propos h3 {
  margin-bottom: var(--espace-4);
}

/* Page « Confidentialité » : texte long, sections séparées par des h2 —
   besoin d'un peu d'air au-dessus de chaque titre. */
.page-confidentialite h2 {
  margin-top: var(--espace-5);
}

.page-a-propos .portrait__cadre {
  width: 180px;
  height: 180px;
}

/* Mobile (< 640px) uniquement : chaque grille de membres devient une liste
   verticale de cartes pleine largeur (photo à gauche, texte empilé à
   droite), au lieu de la grille multi-colonnes utilisée sur desktop/tablette
   qui reste inchangée au-dessus de ce seuil. */
@media (max-width: 640px) {
  .page-a-propos .grille {
    grid-template-columns: 1fr;
    gap: var(--espace-2);
  }

  .page-a-propos .portrait {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: min-content;
    align-items: center;
    justify-items: start;
    column-gap: var(--espace-3);
    row-gap: 0.3rem;
    text-align: left;
    height: auto;
  }

  .page-a-propos .portrait__cadre {
    /* Centrée sur le nom + le texte descriptif uniquement (lignes 1 et 2) :
       le badge de rôle, quand il existe, reste en dessous sans faire
       remonter le centrage de la photo. */
    grid-row: 1 / 3;
    grid-column: 1;
    width: 95px;
    height: 95px;
    margin: 0;
  }

  .page-a-propos .portrait h3,
  .page-a-propos .portrait h4,
  .page-a-propos .portrait p {
    grid-column: 2;
    margin: 0;
  }

  .page-a-propos .portrait__poste {
    margin-top: 0.15rem;
  }
}

/* Carrousel ----------------------------------------------------------------- */

.carrousel__bouton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--bleu-fonce);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color 150ms ease;
}

.carrousel__bouton:hover {
  background: var(--blanc);
}

.carrousel__bouton--precedent { left: 12px; }
.carrousel__bouton--suivant { right: 12px; }

/* Mosaïque « carapace » simplifiée (grille de photos, agrandissement au survol) */

.carapace-simple {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  max-width: 62rem;
  margin-inline: auto;
}

.carapace-simple__ligne {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-2);
}

.carapace-simple__case {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-md);
  aspect-ratio: 4 / 3;
  transition: transform 350ms ease;
  transform: translateZ(0);
}

.carapace-simple__case--large {
  aspect-ratio: 21 / 8;
}

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

.carapace-simple__case:hover,
.carapace-simple__case:focus-within {
  transform: translateZ(0) scale(1.1);
  z-index: 2;
}

@media (max-width: 700px) {
  /* Les photos sont groupées par lots de 3 en PHP (pour la grille 3 colonnes
     du bureau) : en 2 colonnes, un lot incomplet en fin de série laissait une
     photo seule avec un vide à côté. On transforme la mosaïque entière en une
     seule grille (display: contents sur les lots) pour que les photos
     s'enchaînent en continu, sans respecter les coupures de lots. */
  .carapace-simple {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-1);
  }

  .carapace-simple__ligne {
    display: contents;
  }

  .carapace-simple__case--large {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 420px) {
  .carapace-simple {
    grid-template-columns: 1fr;
  }

  .carapace-simple__case--large {
    aspect-ratio: 4 / 3;
  }
}

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

/* Emplacement image en attente (fichiers sources .HEIC/.MOV à convertir) --- */

.zone-image {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  background: var(--bleu-clair-100);
  border: 1px dashed var(--bleu-clair-300);
  border-radius: var(--rayon-md);
  color: var(--couleur-texte-doux);
  font-size: 0.85rem;
  padding: var(--espace-2);
}

/* Copie au clic (e-mail / téléphone) --------------------------------------- */

[data-copier] {
  position: relative;
}

[data-copier]::after {
  content: 'Copié !';
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 0.35em;
  padding: 0.25em 0.6em;
  background: var(--bleu-fonce-900);
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
  border-radius: var(--rayon-sm);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 5;
}

[data-copier].est-copie::after {
  opacity: 1;
  transform: translateY(0);
}

/* Dans la barre du haut, collée en haut de l'écran : pas de place au-dessus
   du lien pour la bulle "Copié !", on l'affiche donc en dessous à la place. */
.barre-utilitaire [data-copier]::after {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 0.35em;
}

@media (prefers-reduced-motion: reduce) {
  [data-copier]::after {
    transition: none;
  }
}

/* Astérisque / notes ------------------------------------------------------- */

.note {
  font-size: 0.85rem;
  color: var(--couleur-texte-doux);
  font-style: italic;
}

/* Squelette de chargement (vidéos) ----------------------------------------- */

.squelette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bleu-clair-100) 25%, var(--bleu-clair-200) 37%, var(--bleu-clair-100) 63%);
  background-size: 400% 100%;
  animation: squelette-balayage 1.6s ease-in-out infinite;
  z-index: 3;
  opacity: 1;
  transition: opacity 300ms ease;
}

.squelette.squelette--pret::after {
  opacity: 0;
  pointer-events: none;
}

@keyframes squelette-balayage {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

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

/* Page Boutique : hero produit phare plein écran ---------------------------
   Palette et polices volontairement alignées sur les jetons du site
   (--bleu-fonce-900, --fond, police d'accroche) plutôt que sur une nouvelle
   charte, pour rester cohérent avec le reste du site. La barre de nav reste
   celle du site (pas de survol transparent), comme sur toutes les autres
   pages. */

.boutique-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.boutique-hero__image {
  position: absolute;
  inset: 0;
}

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

/* Halo couvrant tout le cadre du hero, centré sur la zone de texte : ici la
   boîte englobante EST le cadre entier, donc le comportement par défaut du
   dégradé radial (qui ne finit de s'estomper qu'au coin le plus loin) est
   justement ce qu'il faut pour une couverture complète, sans bord visible. */
.boutique-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 95% 95% at 25% 92%,
    rgba(14, 34, 73, 0.88) 0%,
    rgba(14, 34, 73, 0.7) 22%,
    rgba(14, 34, 73, 0.5) 42%,
    rgba(14, 34, 73, 0.32) 60%,
    rgba(14, 34, 73, 0.18) 76%,
    rgba(14, 34, 73, 0.08) 90%,
    rgba(14, 34, 73, 0.02) 100%
  );
}

.boutique-hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block-end: var(--espace-6);
}

.boutique-hero__texte {
  position: relative;
}

.boutique-hero__titre {
  font-family: var(--police-accroche);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem);
  color: var(--blanc);
  max-width: 22rem;
  margin-bottom: var(--espace-2);
}

.boutique-hero__description {
  color: var(--bleu-clair-100);
  max-width: 28rem;
  margin-bottom: var(--espace-3);
}

.boutique-hero__meta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bleu-clair-300);
  margin-bottom: var(--espace-3);
}

.bouton--sur-hero {
  background: var(--blanc);
  color: var(--bleu-fonce-900);
}

.bouton--sur-hero:hover {
  background: var(--bleu-clair-100);
}

/* Section "reste de la boutique" -------------------------------------- */

.boutique-section {
  padding-block: var(--espace-6);
  background: var(--fond);
}

.boutique-section__entete {
  max-width: 34rem;
  margin-bottom: var(--espace-4);
}

.boutique-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-3);
}

.boutique-carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.boutique-carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-douce);
  border-color: var(--bleu-clair-300);
}

.boutique-carte__image {
  aspect-ratio: 16 / 9;
  background: var(--bleu-clair-100);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-4);
}

.boutique-carte__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.boutique-carte__corps {
  padding: var(--espace-3);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.boutique-carte__categorie {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-doux);
}

.boutique-carte__nom {
  font-family: var(--police-titres);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.boutique-carte__lien {
  margin-top: var(--espace-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bleu-fonce);
}

.boutique-grille__note {
  margin-top: var(--espace-3);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--couleur-texte-doux);
}

/* Livre à paraître : sous les goodies, en carte horizontale avec assez de
   place pour le texte de présentation. Redirige vers HelloAsso comme les
   autres cartes goodies. */
.boutique-livre {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--espace-4);
  align-items: center;
  margin-top: var(--espace-3);
  padding: var(--espace-3);
  background: var(--blanc);
  border: 1px dashed var(--bleu-clair-300);
  border-radius: var(--rayon-md);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.boutique-livre:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-douce);
  border-color: var(--bleu-clair-300);
}

.boutique-livre__image {
  aspect-ratio: 744 / 1037;
  overflow: hidden;
  border-radius: var(--rayon-sm);
}

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

.boutique-livre__nom {
  font-family: var(--police-titres);
  margin-bottom: var(--espace-2);
}

.boutique-livre__corps p {
  margin-bottom: var(--espace-2);
}

.boutique-livre__corps p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .boutique-livre {
    grid-template-columns: 1fr;
  }

  .boutique-grille {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boutique-carte,
  .boutique-livre {
    transition: none;
  }
}

@media (max-width: 900px) {
  .boutique-hero__titre {
    font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  }
}