@charset "UTF-8";
/* ==========================================================================
   SOLLEO — Feuille de style principale
   Site vitrine statique — Français
   Charte graphique SOLLEO v1.0 (juillet 2026) — Identité N°1
   --------------------------------------------------------------------------
   Sommaire
     01. Jetons de design (couleurs, typo, espacements)
     02. Réinitialisation et base
     03. Typographie
     04. Mise en page (conteneurs, sections, grilles)
     05. Décor (grain, blobs, motif « parcours », vagues)
     06. En-tête et navigation
     07. Boutons et liens
     08. Cartes
     09. Bandeaux de page et section héros
     10. Composants éditoriaux (valeurs, étapes, chiffres, accordéon)
     11. Galerie et visionneuse
     12. Formulaires
     13. Actualités et article
     14. Pied de page
     15. Animations d'apparition
     16. Utilitaires
     17. Impression
   ========================================================================== */


/* ==========================================================================
   01. JETONS DE DESIGN
   ========================================================================== */

:root {
  /* --- Palette officielle (charte, page 11) ----------------------------- */
  --karite:      #FDFBF7;   /* fond principal                              */
  --assinie:     #F1E4D3;   /* fonds secondaires : cartes, sections alt.   */
  --savane:      #E29A54;   /* illustrations, pictogrammes, décor          */
  --terre:       #CB632F;   /* accents interactifs, titres d'impact        */
  --laterite:    #852616;   /* fonds de sections premium                   */
  --cacao:       #301918;   /* texte courant et titres                     */

  /* --- Dérivés, tous issus des six couleurs ci-dessus -------------------
     Aucune couleur n'est ajoutée à la palette : les nuances ci-dessous sont
     uniquement des transparences appliquées aux teintes de la charte. */
  --savane-voile:  rgba(226, 154, 84, .18);   /* Savane   18 % */
  --terre-voile:   rgba(203, 99, 47, .12);    /* Terre    12 % */
  --texte-doux:    rgba(48, 25, 24, .74);     /* Cacao    74 % — texte secondaire */
  --filet:         rgba(48, 25, 24, .12);     /* Cacao    12 % — filets sur clair */
  --filet-clair:   rgba(253, 251, 247, .18);  /* Karité   18 % — filets sur sombre */

  /* --- Typographie ------------------------------------------------------ */
  --titre: 'Poppins', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --corps: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide : de mobile 360px à desktop 1440px */
  --pas-1:  clamp(.78rem,  .76rem + .10vw, .84rem);
  --pas0:   clamp(.94rem,  .91rem + .14vw, 1.02rem);
  --pas1:   clamp(1.06rem, 1.01rem + .24vw, 1.22rem);
  --pas2:   clamp(1.25rem, 1.16rem + .42vw, 1.55rem);
  --pas3:   clamp(1.5rem,  1.34rem + .74vw, 2.05rem);
  --pas4:   clamp(1.62rem, 1.42rem + .92vw, 2.3rem);
  --pas5:   clamp(1.95rem, 1.62rem + 1.5vw, 3.05rem);
  --pas6:   clamp(2.3rem,  1.78rem + 2.35vw, 4rem);

  /* --- Rythme vertical --------------------------------------------------- */
  --e1: .5rem;
  --e2: .875rem;
  --e3: 1.375rem;
  --e4: 2.125rem;
  --e5: 3.25rem;
  --e6: 5rem;
  --e7: clamp(4rem, 3rem + 5vw, 8rem);

  /* --- Formes et profondeur --------------------------------------------- */
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;
  --r-xl: 40px;
  --r-pilule: 999px;

  --ombre-s: 0 2px 8px rgba(48, 25, 24, .06);
  --ombre-m: 0 14px 34px -18px rgba(48, 25, 24, .30);
  --ombre-l: 0 30px 70px -30px rgba(48, 25, 24, .38);

  --largeur: 1200px;
  --largeur-etroite: 760px;
  /* Longueur de ligne du texte suivi. En `ch`, la mesure suit la police : le
     nombre de signes par ligne reste le même quelle que soit la taille du
     texte. Au-delà d'environ quatre-vingts signes, l'oeil retrouve mal le
     début de la ligne suivante. Les blocs, eux, gardent toute leur largeur :
     ce sont les paragraphes qui se replient, pas les encadrés. */
  --mesure: 68ch;

  /* Flèche de téléchargement, en SVG intégré : aucune requête réseau, et le
     tracé prend la couleur du texte par le masque qui l'utilise. Le `stroke`
     noir est sans effet : un masque ne retient que l'opacité du dessin. */
  --fleche-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8v10.6m0 0 3.8-3.8m-3.8 3.8-3.8-3.8M4.6 19.4h14.8'/%3E%3C/svg%3E");
  --gouttiere: clamp(1.15rem, .6rem + 2.4vw, 2.75rem);

  --transition: 220ms cubic-bezier(.22, .61, .36, 1);
  --transition-lente: 520ms cubic-bezier(.22, .61, .36, 1);
}


/* ==========================================================================
   02. RÉINITIALISATION ET BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem; /* compense l'en-tête collant sur les ancres */
}

body {
  margin: 0;
  background-color: var(--karite);
  color: var(--cacao);
  font-family: var(--corps);
  font-size: var(--pas1);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

/* Cible de focus visible et cohérente partout */
:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 4px;
}
.sur-fond-sombre :focus-visible { outline-color: var(--savane); }

::selection { background: var(--savane); color: var(--cacao); }

/* Lien d'évitement (accessibilité clavier) */
.lien-evitement {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  padding: .75rem 1.5rem;
  background: var(--laterite);
  color: var(--karite);
  font-family: var(--titre);
  font-weight: 600;
  font-size: var(--pas0);
  border-radius: 0 0 var(--r-m) var(--r-m);
  transition: transform var(--transition);
}
.lien-evitement:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

/* Trois graisses seulement, en progression douce :
     400 pour le texte courant, 500 pour les sous-titres, 600 pour les titres.
     La graisse 700 est réservée aux boutons, pour une raison d'accessibilité
     expliquée au README (§10.1). L'ExtraBold 800 n'est plus employé. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--pas6); }
h2 { font-size: var(--pas5); }
h3 { font-size: var(--pas3); font-weight: 500; letter-spacing: -.012em; }
h4 { font-size: var(--pas2); font-weight: 500; letter-spacing: -.008em; line-height: 1.3; }
h5, h6 { font-size: var(--pas1); font-weight: 500; }

/* Titre-déclaration : pour les phrases longues reprises telles quelles
   du discours client, qui ne supportent pas le corps d'un titre court. */
.titre-declaration {
  font-size: clamp(1.6rem, 1.3rem + 1.45vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -.015em;
}

p { margin: 0 0 var(--e3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Les liens du texte courant portent la couleur du texte (Cacao, 15,9:1) et
   sont signalés par un soulignement Terre de feu : la couleur d'interaction
   prescrite par la charte reste bien présente, sans faire porter au texte
   lui-même un contraste insuffisant. */
a {
  color: var(--cacao);
  text-decoration-color: var(--terre);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
a:hover { color: var(--terre); }

strong, b { font-weight: 600; }

/* Surtitre : petite capitale devant chaque titre de section */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 var(--e2);
  font-family: var(--titre);
  font-size: var(--pas-1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laterite);
}
.surtitre::before {
  content: "";
  width: 2.4rem;
  height: 4px;
  border-radius: 2px;
  background: var(--terre);
}
.sur-fond-sombre .surtitre { color: var(--savane); }
.sur-fond-sombre .surtitre::before { background: var(--savane); }

/* Savane atteint 7,03:1 sur Cacao, mais seulement 3,93:1 sur Latérite : sous
   le seuil de 4,5:1 du texte courant, et le surtitre fait 13 px. Sur les fonds
   Latérite, le libellé passe donc en Karité (8,89:1). Le filet qui le précède
   reste en Savane : c'est un élément non textuel, dont le seuil est 3:1. */
.section--laterite .surtitre,
.encart-cta .surtitre { color: var(--karite); }

/* Chapô : paragraphe d'introduction */
.chapo {
  font-size: var(--pas2);
  line-height: 1.55;
  color: var(--texte-doux);
  max-width: 46ch;
}
.sur-fond-sombre .chapo { color: rgba(253, 251, 247, .82); }

.texte-doux { color: var(--texte-doux); }
.sur-fond-sombre .texte-doux { color: rgba(253, 251, 247, .78); }

/* Mot mis en avant dans un titre — usage : gros corps uniquement (≥ 32 px) */
.accent { color: var(--terre); }
.sur-fond-sombre .accent { color: var(--savane); }

/* Surlignage d'un mot de titre.
   Tracé en image de fond : celle-ci est peinte derrière les glyphes,
   sans sortir le trait du flux d'empilement de la section. */
.souligne {
  background-image: linear-gradient(var(--savane), var(--savane));
  background-repeat: no-repeat;
  background-size: 100% .32em;
  background-position: 0 86%;
  padding-inline: .06em;
}
.sur-fond-sombre .souligne {
  background-image: linear-gradient(rgba(226, 154, 84, .32), rgba(226, 154, 84, .32));
}


/* ==========================================================================
   04. MISE EN PAGE
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: var(--largeur-etroite); }

.section {
  position: relative;
  padding-block: var(--e7);
}
.section--serree { padding-block: clamp(2.75rem, 2rem + 3.5vw, 5rem); }

/* Bandes de couleur alternées, conformes aux usages définis par la charte */
.section--karite   { background: var(--karite); }
.section--assinie  { background: var(--assinie); }
.section--laterite { background: var(--laterite); color: var(--karite); }
.section--cacao    { background: var(--cacao);    color: var(--karite); }

/* Sur fond sombre, les cartes se détachent par une teinte plus claire que le
   fond plutôt que par une simple bordure : le contraste reste net. */
.section--cacao .carte,
.section--cacao .carte-media { background: rgba(253, 251, 247, .07); border-color: var(--filet-clair); }
.section--cacao .carte__index { color: var(--savane); }

.sur-fond-sombre h1, .sur-fond-sombre h2,
.sur-fond-sombre h3, .sur-fond-sombre h4 { color: var(--karite); }
/* Les liens du texte courant passent en Savane sur fond sombre. Les boutons
   sont exclus : leur couleur de libellé dépend de leur propre fond, et cette
   règle, plus spécifique qu'une simple classe de bouton, la leur volait. Les
   libellés de « Nous écrire » se retrouvaient ainsi en Savane sur Karité,
   à 2,26:1. Ne jamais retirer le :not(.bouton). */
.sur-fond-sombre a:not(.bouton) { color: var(--savane); }
.sur-fond-sombre a:not(.bouton):hover { color: var(--karite); }

.entete-section {
  max-width: 62ch;
  margin-bottom: var(--e5);
}
.entete-section--centre {
  margin-inline: auto;
  text-align: center;
}
.entete-section--centre .surtitre { justify-content: center; }
.entete-section--centre .chapo { margin-inline: auto; }

/* Grilles génériques */
.grille { display: grid; gap: var(--e4); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Duo texte / image, asymétrique */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.duo--texte-large { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.duo--image-large { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.duo__media { position: relative; }
.duo--inverse .duo__texte { order: 2; }

@media (max-width: 900px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo, .duo--texte-large, .duo--image-large { grid-template-columns: 1fr; }
  .duo--inverse .duo__texte { order: 0; }
}
@media (max-width: 620px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   05. DÉCOR
   ========================================================================== */

/* Grain : réchauffe les aplats, rappelle les matières de la planche d'ambiance */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* Forme organique — le « blob » demandé dans les références du client */
.blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 58% 42% 47% 53% / 45% 51% 49% 55%;
  filter: blur(2px);
}
.blob--savane  { background: var(--savane);   opacity: .22; }
.blob--terre   { background: var(--terre);    opacity: .14; }
.blob--assinie { background: var(--assinie);  opacity: .55; }
.blob--karite  { background: var(--karite);   opacity: .07; }

/* Masque organique appliqué aux photos */
.forme-organique {
  border-radius: 56% 44% 52% 48% / 48% 46% 54% 52%;
  overflow: hidden;
}
.forme-organique--b { border-radius: 46% 54% 43% 57% / 55% 42% 58% 45%; }
.forme-galet { border-radius: var(--r-xl); overflow: hidden; }

/* Motif « parcours » — dérivé de la construction du logo :
   trois barres qui montent et le point détaché qui marque le sommet. */
.motif-parcours {
  display: block;
  width: clamp(112px, 13vw, 176px);
  height: auto;
  color: var(--terre);
}
.motif-parcours--centre { margin-inline: auto; }
.sur-fond-sombre .motif-parcours { color: var(--savane); }

/* Vague de séparation entre deux bandes de couleur */
.vague {
  display: block;
  width: 100%;
  height: clamp(38px, 5vw, 72px);
  margin-bottom: -1px;
}
.vague--haut { margin-bottom: 0; margin-top: -1px; }
.vague svg { width: 100%; height: 100%; display: block; }


/* ==========================================================================
   06. EN-TÊTE ET NAVIGATION
   ========================================================================== */

/* En haut de page, l'en-tête est transparent : il n'a rien à masquer, et un
   fond translucide y dessinait une bande claire. L'en-tête passe au-dessus de
   la texture de grain, qui est en dessous dans l'empilement, et l'effaçait sur
   sa hauteur : on voyait donc un bandeau lisse et plus clair au sommet de
   chaque page. Le fond et le flou n'apparaissent qu'une fois la page défilée,
   quand du contenu passe réellement dessous. */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition),
              background-color var(--transition);
}
.entete.est-defile {
  border-bottom-color: var(--filet);
  box-shadow: var(--ombre-s);
  background: rgba(253, 251, 247, .94);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.entete__interne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 4.75rem;
}

.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { width: clamp(122px, 13vw, 158px); height: auto; }

.nav-principale { display: flex; align-items: center; gap: clamp(.4rem, 1.2vw, 1.5rem); }
.nav-principale__liste { display: flex; align-items: center; gap: clamp(.15rem, 1vw, 1.1rem); }

.nav-principale__lien {
  position: relative;
  display: inline-block;
  padding: .55rem .35rem;
  font-family: var(--titre);
  font-size: var(--pas0);
  font-weight: 600;
  color: var(--cacao);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-principale__lien::after {
  content: "";
  position: absolute;
  left: .35rem;
  right: .35rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--terre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-principale__lien:hover,
.nav-principale__lien[aria-current="page"] { color: var(--laterite); }
.nav-principale__lien:hover::after,
.nav-principale__lien[aria-current="page"]::after { transform: scaleX(1); }

/* Bouton hamburger */
.bascule-menu {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .95rem .55rem .75rem;
  background: transparent;
  border: 1.5px solid var(--filet);
  border-radius: var(--r-pilule);
  font-family: var(--titre);
  font-size: var(--pas-1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.bascule-menu__barres { position: relative; width: 20px; height: 13px; flex: 0 0 auto; }
.bascule-menu__barres span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.2px;
  border-radius: 2px;
  background: var(--cacao);
  transition: transform var(--transition), opacity var(--transition);
}
.bascule-menu__barres span:nth-child(1) { top: 0; }
.bascule-menu__barres span:nth-child(2) { top: 5.4px; }
.bascule-menu__barres span:nth-child(3) { top: 10.8px; }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres span:nth-child(1) { transform: translateY(5.4px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres span:nth-child(2) { opacity: 0; }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres span:nth-child(3) { transform: translateY(-5.4px) rotate(-45deg); }

@media (max-width: 1040px) {
  .bascule-menu { display: inline-flex; }

  .nav-principale {
    position: fixed;
    inset: 4.75rem 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--e4) var(--gouttiere) var(--e6);
    background: var(--karite);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    /* `visibility` ne doit PAS être interpolée : sinon, au moment où le menu
       s'ouvre, il est encore calculé « hidden » et ne peut pas recevoir le
       focus clavier. Le délai ne s'applique donc qu'à la fermeture, pour
       laisser le fondu se dérouler avant de masquer réellement. */
    transition: opacity var(--transition), transform var(--transition),
                visibility 0s linear 220ms;
  }
  .nav-principale.est-ouverte {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--transition), transform var(--transition), visibility 0s;
  }

  .nav-principale__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principale__lien {
    padding: 1.05rem .25rem;
    font-size: var(--pas2);
    font-weight: 700;
    border-bottom: 1px solid var(--filet);
  }
  .nav-principale__lien::after { display: none; }
  .nav-principale__lien[aria-current="page"] { color: var(--terre); }
  .nav-principale .bouton { margin-top: var(--e4); justify-content: center; }
  /* Dans le menu plein écran, le bouton redevient un appel à l'action
     principal : il reprend ses marges normales. */
  .nav-principale .bouton--compact { padding: .92rem 1.6rem; }
}

/* Empêche le défilement de l'arrière-plan quand le menu mobile est ouvert */
body.menu-ouvert { overflow: hidden; }


/* ==========================================================================
   07. BOUTONS ET LIENS
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-pilule);
  font-family: var(--titre);
  /* 19 px en graisse 700, par choix de lisibilité et non plus par contrainte :
     depuis le passage du bouton primaire en Savane (7,03:1 sur texte Cacao), le
     contraste est conforme quelle que soit la taille du libellé. Ce corps peut
     donc être réduit si la maquette l'exige. */
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }
.bouton svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* Primaire — Savane sur texte Cacao, conformément à la direction validée par
   le client. Contraste 7,03:1, conforme au niveau AA quelle que soit la taille
   du libellé, là où Terre de feu plafonnait à 3,79:1 et imposait 19 px en gras.
   Terre de feu reste la couleur d'interaction : survol, bordures, accents. */
.bouton--primaire {
  background: var(--savane);
  color: var(--cacao);
  box-shadow: var(--ombre-m);
}
.bouton--primaire:hover { background: var(--terre); color: var(--karite); box-shadow: var(--ombre-l); }

/* Sur fond sombre, la règle « .sur-fond-sombre a » colorerait le libellé en
   Savane, donc invisible sur un bouton Savane. Spécificité supérieure. */
.sur-fond-sombre a.bouton--primaire { background: var(--savane); color: var(--cacao); }
.sur-fond-sombre a.bouton--primaire:hover { background: var(--karite); color: var(--cacao); }
.sur-fond-sombre a.bouton--secondaire {
  color: var(--karite);
  border-color: rgba(253, 251, 247, .42);
}
.sur-fond-sombre a.bouton--secondaire:hover {
  background: var(--karite); color: var(--cacao); border-color: var(--karite);
}

.bouton--secondaire {
  background: transparent;
  color: var(--laterite);
  border-color: var(--terre);
}
.bouton--secondaire:hover { background: var(--terre); color: var(--karite); border-color: var(--terre); }

.bouton--clair {
  background: var(--karite);
  color: var(--laterite);
}
.bouton--clair:hover { background: var(--savane); color: var(--cacao); }

.bouton--contour-clair {
  background: transparent;
  color: var(--karite);
  border-color: var(--filet-clair);
}
.bouton--contour-clair:hover { background: var(--karite); color: var(--laterite); border-color: var(--karite); }

.bouton--large { width: 100%; }

/* Version compacte, pour l'en-tête notamment.
   Seules les marges internes diminuent : le libellé reste à 19 px en gras,
   car c'est ce corps qui rend le fond Terre de feu conforme au niveau AA
   (voir README, §10.1). La hauteur reste au-dessus des 44 px recommandés
   pour une cible tactile. */
.bouton--compact { padding: .55rem 1.25rem; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
}

/* Lien fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--titre);
  font-size: var(--pas0);
  font-weight: 600;
  color: var(--laterite);
  text-decoration: none;
}
.lien-fleche svg { width: 1.1em; height: 1.1em; transition: transform var(--transition); }
.lien-fleche:hover { color: var(--terre); }
.lien-fleche:hover svg { transform: translateX(4px); }
.sur-fond-sombre .lien-fleche { color: var(--savane); }
.sur-fond-sombre .lien-fleche:hover { color: var(--karite); }


/* ==========================================================================
   08. CARTES
   ========================================================================== */

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: clamp(1.5rem, 1.1rem + 1.3vw, 2.35rem);
  /* Assinie, conformément à la charte : « fonds secondaires : cartes, encarts,
     sections alternées ». La carte s'inverse en Karité lorsqu'elle se pose sur
     une section déjà en Assinie, faute de quoi elle s'y confondrait. */
  background: var(--assinie);
  border: 1px solid transparent;
  border-radius: var(--r-l);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.section--assinie .carte { background: var(--karite); border-color: var(--filet); }
.section--laterite .carte,
.section--cacao .carte {
  background: rgba(253, 251, 247, .07);
  border-color: var(--filet-clair);
  color: var(--karite);
}
.carte--interactive:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-l);
  border-color: var(--terre);
}
.carte__titre { font-size: var(--pas2); }
.carte__texte { color: var(--texte-doux); font-size: var(--pas0); }
.section--laterite .carte__texte,
.section--cacao .carte__texte { color: rgba(253, 251, 247, .8); }
.carte__pied { margin-top: auto; padding-top: var(--e2); }

/* Numéro d'index en gros caractères ajourés */
.carte__index {
  font-family: var(--titre);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--savane);
}

/* Pictogramme dans une pastille */
.pictogramme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.35rem;
  height: 3.35rem;
  flex: 0 0 auto;
  border-radius: 42% 58% 55% 45% / 52% 46% 54% 48%;
  background: var(--savane-voile);
  color: var(--terre);
}
.pictogramme svg { width: 1.6rem; height: 1.6rem; }
/* Pastille Savane pleine plutôt qu'un voile : le jaune devient lisible. */
.pictogramme { background: var(--savane); color: var(--cacao); }
.section--laterite .pictogramme,
.section--cacao .pictogramme { background: var(--savane); color: var(--cacao); }
.section--laterite .pictogramme,
.section--cacao .pictogramme { background: rgba(253, 251, 247, .12); color: var(--savane); }

/* Carte avec image en tête */
.carte-media {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--assinie);
  border: 1px solid transparent;
  border-radius: var(--r-l);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-media:hover { transform: translateY(-5px); box-shadow: var(--ombre-l); }
.carte-media__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.carte-media__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-lente); }
.carte-media:hover .carte-media__media img { transform: scale(1.045); }
.carte-media__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  flex: 1;
  padding: clamp(1.25rem, 1rem + .9vw, 1.85rem);
}

/* Étiquettes / puces de mots-clés */
.etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Étiquettes en Savane : c'est le principal apport de jaune sur les fonds
   clairs. Texte en Cacao, contraste 7,03:1. */
.etiquette {
  display: inline-block;
  padding: .38rem .95rem;
  background: var(--savane);
  border-radius: var(--r-pilule);
  font-family: var(--titre);
  font-size: var(--pas-1);
  font-weight: 600;
  color: var(--cacao);
}
.section--assinie .etiquette,
.carte .etiquette,
.carte-media .etiquette { background: var(--savane); color: var(--cacao); }
.section--laterite .etiquette,
.section--cacao .etiquette { background: rgba(253, 251, 247, .12); color: var(--savane); }


/* ==========================================================================
   09. BANDEAUX DE PAGE ET SECTION HÉROS
   ========================================================================== */

.heros {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 5rem) clamp(2.75rem, 2rem + 4vw, 5.5rem);
  background: var(--karite);
}
.heros__grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
/* Le positionnement du client tient en une phrase longue : elle a besoin
   d'un corps plus mesuré que le H1 des pages intérieures. */
.heros__titre {
  margin-bottom: var(--e3);
  font-size: clamp(1.95rem, 1.5rem + 1.95vw, 3.25rem);
  line-height: 1.14;
}
.heros__chapo { max-width: 42ch; margin-bottom: var(--e4); }

.heros__media { position: relative; }
.heros__media img {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Les formes restent en retrait de la photo : elles l'accompagnent
   sans la concurrencer. */
.heros__blob-1 {
  width: clamp(150px, 19vw, 250px);
  aspect-ratio: 1;
  top: -9%;
  right: -13%;
  opacity: .3;
}
.heros__blob-2 {
  width: clamp(105px, 13vw, 170px);
  aspect-ratio: 1;
  bottom: -8%;
  left: -11%;
  opacity: .18;
}

/* Pastille flottante posée sur la photo du héros */
.heros__pastille {
  position: absolute;
  z-index: 3;
  bottom: 6%;
  left: -6%;
  display: flex;
  align-items: center;
  gap: .85rem;
  max-width: 17rem;
  padding: 1rem 1.35rem;
  background: var(--karite);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-l);
}
.heros__pastille p { font-size: var(--pas-1); line-height: 1.45; color: var(--texte-doux); }
.heros__pastille strong { display: block; font-family: var(--titre); color: var(--cacao); }

@media (max-width: 900px) {
  .heros__grille { grid-template-columns: 1fr; }
  .heros__media { max-width: 30rem; margin-inline: auto; }
  .heros__pastille { left: 0; }
}



/* ==========================================================================
   09 bis. HÉROS « PANNEAU »  —  direction artistique validée le 17 août 2026
   Panneau sombre à gauche, photographie pleine hauteur à droite, le tout dans
   une carte à grand rayon qui flotte sur la page.
   ========================================================================== */

/* Les marges latérales viennent de .conteneur, pour que le bord de la
   carte tombe exactement sur la colonne de texte des sections. */
.heros-panneau { padding: 1.1rem 0 0; }

.panneau-carte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: min(78vh, 640px);
  border-radius: 34px;
  overflow: hidden;
  background: var(--cacao);
}

.panneau {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e3);
  padding: clamp(2rem, 1.2rem + 3vw, 3.8rem);
  color: var(--karite);
}
.panneau .surtitre { color: var(--savane); margin: 0; }
.panneau .surtitre::before { display: none; }
.panneau h1 {
  font-size: clamp(2rem, 1.4rem + 2.3vw, 3.4rem);
  line-height: 1.14;
  color: var(--karite);
}
.panneau .chapo { color: rgba(253, 251, 247, .78); max-width: 44ch; }

/* Filet Savane, repris de la référence transmise par le client */
.panneau__filet {
  width: 2.6rem; height: 4px;
  border-radius: 2px;
  background: var(--savane);
}

.panneau-media { position: relative; overflow: hidden; }
.panneau-media img { width: 100%; height: 100%; object-fit: cover; }

/* Motif signature : le cercle ouvert au point détaché, tiré du monogramme.
   Il ponctue les compositions comme les badges des références du client. */
.signe {
  position: absolute;
  z-index: 3;
  width: var(--taille, 5rem);
  height: var(--taille, 5rem);
  border: 2px solid var(--savane);
  border-radius: 50%;
  pointer-events: none;
}
.signe::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22%; height: 22%;
  background: var(--savane);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.signe--terre { border-color: var(--terre); }
.signe--terre::after { background: var(--terre); }

/* Bloc de déclaration qui remonte sur la section précédente */
.declaration {
  position: relative;
  margin-top: calc(var(--e6) * -1);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--assinie);
  border-radius: 34px;
}
.declaration h2 { max-width: 24ch; }

/* Duo asymétrique : l'image remonte et déborde vers le haut */
.duo--decale .duo__media { position: relative; margin-top: calc(var(--e5) * -1); }
.duo--decale .duo__media img { border-radius: 28px; aspect-ratio: 7 / 5; object-fit: cover; }

/* Médaillon circulaire, à cheval sur deux zones de couleur */
.medaillon {
  position: relative;
  width: clamp(9rem, 14vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--karite);
}
.medaillon img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .panneau-carte { grid-template-columns: 1fr; }
  .panneau-media { min-height: 300px; }
  .declaration { margin-top: 0; }
  .duo--decale .duo__media { margin-top: 0; }
}



/* --- Déclinaison du panneau sur les pages intérieures ------------------- */

/* Même carte que l'accueil, sans photographie : une seule colonne, hauteur
   dictée par le contenu. Le bord de la carte s'aligne sur celui des sections. */
.panneau-carte--simple {
  grid-template-columns: 1fr;
  min-height: 0;
  /* Sans photographie, rien n'a besoin d'être rogné, et le signe peut donc
     déborder sous la carte : c'est le motif à cheval sur la frontière entre
     deux zones que le client a retenu dans ses références. */
  overflow: visible;
}
.panneau-carte--simple .panneau {
  padding-block: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  gap: var(--e2);
}
.panneau-carte--simple h1 {
  font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.9rem);
  max-width: 18em;
}
.panneau-carte--simple .chapo { max-width: 58ch; }

/* Fil d'Ariane sur le panneau sombre */
.panneau .fil-ariane { margin-bottom: 0; }
.panneau .fil-ariane li { color: rgba(253, 251, 247, .74); }
.panneau .fil-ariane li + li::before { color: var(--savane); }
.panneau .fil-ariane a { color: var(--savane); }
.panneau .fil-ariane a:hover { color: var(--karite); }

@media (max-width: 700px) {
  /* Le signe déborderait sur le chapô dans une carte devenue étroite. */
  .panneau-carte--simple .signe { display: none; }
}


/* --- Frontière habitée : médaillon à cheval sur deux zones de couleur ----
   Motif retenu par le client dans ses deux références du cahier des charges
   (« Packages colorés et interactifs » et « Jenna Kutcher »). Le médaillon
   déborde volontairement au-dessus et au-dessous de la vague : aucune section
   ne porte overflow, il n'est donc pas rogné. */
.frontiere { position: relative; }
.frontiere__medaillon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
}

/* Variante emblème : disque plein, sans photographie, donc aucune image
   supplémentaire à la charge du client. Pour une version photographique,
   employer la classe .medaillon seule avec une image à l'intérieur. */
.medaillon--embleme {
  display: grid;
  place-items: center;
  width: clamp(4.75rem, 6.5vw, 6.5rem);
  border: 0;
  background: var(--savane);
  box-shadow: var(--ombre-m);
}
/* Signe du monogramme en Cacao sur Savane : 7,03:1. */
.medaillon--embleme svg { width: 54%; height: auto; color: var(--cacao); }

@media (max-width: 620px) {
  /* Sur mobile la vague est deux fois plus basse : le médaillon mordrait
     sur le texte des deux sections voisines. */
  .frontiere__medaillon { display: none; }
}

/* Bandeau des pages intérieures — typographique, sans photo */
.bandeau {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
  background: var(--assinie);
}
/* Le bandeau porte la classe .conteneur : lui imposer ici une largeur maximale
   plus faible le recentrerait dans la fenêtre, et son texte ne s'alignerait plus
   sur celui des sections en dessous. La largeur reste donc celle du conteneur,
   et seul le titre est borné, pour qu'un intitulé long passe à la ligne. */
.bandeau__interne { position: relative; z-index: 2; }
.bandeau__interne h1 { max-width: 15em; }
.bandeau__blob {
  width: clamp(280px, 40vw, 520px);
  aspect-ratio: 1;
  top: -38%;
  right: -8%;
}
.bandeau--sombre { background: var(--laterite); color: var(--karite); }

/* Fil d'Ariane */
.fil-ariane { margin-bottom: var(--e2); font-size: var(--pas-1); }
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.fil-ariane li { display: flex; align-items: center; gap: .45rem; color: var(--texte-doux); }
.fil-ariane li + li::before { content: "/"; color: var(--terre); }
.fil-ariane a { color: var(--laterite); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.bandeau--sombre .fil-ariane li { color: rgba(253, 251, 247, .75); }
.bandeau--sombre .fil-ariane a { color: var(--savane); }


/* ==========================================================================
   10. COMPOSANTS ÉDITORIAUX
   ========================================================================== */

/* --- Valeurs de la marque --------------------------------------------- */
.valeur {
  position: relative;
  padding-top: var(--e3);
  border-top: 2px solid var(--filet);
}
.sur-fond-sombre .valeur { border-top-color: var(--filet-clair); }
.valeur__nom {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: var(--e1);
  font-size: var(--pas3);
}
.valeur__nom span {
  font-size: var(--pas-1);
  font-weight: 600;
  letter-spacing: .1em;
  /* Terre de feu ne tenait que 4,20:1 sur Cacao, sous le seuil de 4,5:1 du
     texte courant. Latérite sur fond clair, Savane sur fond sombre : les deux
     dépassent 7:1, et la règle « Terre de feu jamais en couleur de texte »
     du README §10.1 est respectée. */
  color: var(--laterite);
}
.sur-fond-sombre .valeur__nom span { color: var(--savane); }

/* --- Parcours en étapes (page Notre approche) -------------------------- */
.parcours { position: relative; display: grid; gap: var(--e5); }
.parcours::before {
  content: "";
  position: absolute;
  left: 1.55rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(180deg, var(--terre), var(--savane) 55%, var(--savane) 80%, transparent);
}
.etape {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
}
.etape__pastille {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--savane);
  color: var(--cacao);
  border: 4px solid var(--karite);
  border-radius: var(--r-pilule);
  font-family: var(--titre);
  font-size: var(--pas1);
  font-weight: 600;
}
.section--assinie .etape__pastille { border-color: var(--assinie); }
.etape__titre { margin-bottom: var(--e1); }
.etape p { max-width: var(--mesure); }

@media (max-width: 620px) {
  .parcours::before { left: 1.25rem; }
  .etape { grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--e2); }
  .etape__pastille { width: 2.5rem; height: 2.5rem; border-width: 3px; font-size: var(--pas0); }
}

/* --- Bandeau de chiffres clés ------------------------------------------ */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e4); }
.chiffre__valeur {
  font-family: var(--titre);
  font-size: var(--pas5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--terre);
}
.sur-fond-sombre .chiffre__valeur { color: var(--savane); }
.chiffre__libelle { margin-top: var(--e1); font-size: var(--pas0); color: var(--texte-doux); }
.sur-fond-sombre .chiffre__libelle { color: rgba(253, 251, 247, .8); }

/* --- Accordéon FAQ (balises natives <details>, aucun JS requis) --------- */
/* Pas de largeur réduite ici : une liste de questions dépliables n'est pas
   du texte suivi, rien ne justifie de la rétrécir sous un héros pleine
   largeur. La colonne de lecture reste réservée aux textes longs. */
.accordeon { display: grid; gap: var(--e2); }
.accordeon__item {
  background: var(--karite);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.accordeon__item[open] { border-color: var(--terre); box-shadow: var(--ombre-m); }
.accordeon__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: clamp(1.05rem, .9rem + .5vw, 1.5rem) clamp(1.15rem, 1rem + .6vw, 1.75rem);
  font-family: var(--titre);
  font-size: var(--pas1);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.accordeon__question::-webkit-details-marker { display: none; }
.accordeon__question:hover { color: var(--laterite); }
.accordeon__icone {
  position: relative;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pilule);
  background: var(--savane);
  transition: background-color var(--transition), transform var(--transition);
}
.accordeon__icone::before,
.accordeon__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .8rem;
  height: 2.5px;
  border-radius: 2px;
  background: var(--cacao);
  transform: translate(-50%, -50%);
  transition: transform var(--transition);
}
.accordeon__icone::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordeon__item[open] .accordeon__icone::after { transform: translate(-50%, -50%) rotate(0); }
.accordeon__reponse {
  padding: 0 clamp(1.15rem, 1rem + .6vw, 1.75rem) clamp(1.15rem, 1rem + .6vw, 1.6rem);
  color: var(--texte-doux);
  font-size: var(--pas0);
}
.accordeon__reponse p { max-width: var(--mesure); }

/* --- Encart d'appel à l'action ----------------------------------------- */
.encart-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);
  background: var(--laterite);
  color: var(--karite);
  border-radius: var(--r-xl);
  text-align: center;
}
.encart-cta__interne { position: relative; z-index: 2; max-width: 56ch; margin-inline: auto; }
.encart-cta .groupe-boutons { justify-content: center; }
.encart-cta__blob { width: 26rem; aspect-ratio: 1; top: -45%; right: -12%; }

/* --- Message d'information / avertissement au client -------------------- */
/* Le bandeau se cale sur la largeur de ce qu'il annonce. Devant du texte
   suivi, c'est la mesure de lecture, la même que `.prose` : les deux bords
   gauche et droit coïncident. Devant une liste qui occupe toute la largeur,
   comme l'espace de téléchargement, il prend cette largeur avec `--large`,
   sans quoi on voit un encadré s'arrêter aux deux tiers au-dessus de blocs
   qui vont au bout. */
.note-projet {
  display: flex;
  max-width: var(--mesure);
  gap: var(--e2);
  padding: var(--e3);
  background: var(--assinie);
  border: 1px dashed var(--terre);
  border-radius: var(--r-m);
  font-size: var(--pas0);
  color: var(--texte-doux);
}
.note-projet--large { max-width: none; }
.note-projet--large p { max-width: var(--mesure); }
.note-projet strong { color: var(--laterite); }
.note-projet__icone { flex: 0 0 auto; color: var(--terre); }
.note-projet__icone svg { width: 1.4rem; height: 1.4rem; }

/* --- Marqueur de contenu manquant --------------------------------------
   Volontairement très visible : il ne doit jamais passer en production. */
.a-fournir {
  display: inline-block;
  padding: .18em .6em;
  background: repeating-linear-gradient(
    -45deg, rgba(203, 99, 47, .16) 0 8px, rgba(203, 99, 47, .07) 8px 16px);
  border: 1px dashed var(--terre);
  border-radius: var(--r-s);
  font-family: var(--titre);
  font-size: .82em;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--laterite);
  text-transform: uppercase;
}
.sur-fond-sombre .a-fournir { color: var(--savane); border-color: var(--savane); }


/* ==========================================================================
   11. GALERIE ET VISIONNEUSE
   ========================================================================== */

/* Pavage dense : les rangées ont une hauteur fixe et chaque visuel occupe
   2 rangées (paysage) ou 3 rangées (portrait). Aucun trou dans la grille. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  grid-auto-rows: clamp(96px, 9vw, 132px);
  grid-auto-flow: row dense;
  gap: var(--e3);
}
.galerie__element {
  position: relative;
  display: block;
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
  background: var(--assinie);
  border: none;
  border-radius: var(--r-l);
  cursor: zoom-in;
}
.galerie__element img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-lente); }
.galerie__element:hover img { transform: scale(1.05); }
.galerie__element--haut { grid-row: span 3; }
.galerie__legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.1rem .95rem;
  background: linear-gradient(180deg, transparent, rgba(48, 25, 24, .82));
  color: var(--karite);
  font-size: var(--pas-1);
  text-align: left;
  opacity: 0;
  transition: opacity var(--transition);
}
.galerie__element:hover .galerie__legende,
.galerie__element:focus-visible .galerie__legende { opacity: 1; }

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gouttiere);
  background: rgba(48, 25, 24, .93);
  opacity: 0;
  visibility: hidden;
  /* Même principe que pour le menu : `visibility` bascule sans interpolation
     à l'ouverture, afin que le bouton de fermeture soit focusable aussitôt. */
  transition: opacity var(--transition), visibility 0s linear 220ms;
}
.visionneuse.est-ouverte {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition), visibility 0s;
}
.visionneuse__figure { max-width: min(1000px, 100%); max-height: 100%; margin: 0; }
.visionneuse__figure img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--r-m);
}
.visionneuse__legende { margin-top: var(--e2); color: rgba(253, 251, 247, .85); font-size: var(--pas0); text-align: center; }
.visionneuse__fermer,
.visionneuse__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: rgba(253, 251, 247, .12);
  border: 1px solid var(--filet-clair);
  border-radius: var(--r-pilule);
  color: var(--karite);
  cursor: pointer;
  transition: background-color var(--transition);
}
.visionneuse__fermer:hover,
.visionneuse__nav:hover { background: var(--terre); border-color: var(--terre); }
.visionneuse__fermer { top: 1.25rem; right: 1.25rem; }
.visionneuse__nav svg,
.visionneuse__fermer svg { width: 1.35rem; height: 1.35rem; }
.visionneuse__nav--precedent { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.visionneuse__nav--suivant  { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 620px) {
  .visionneuse__nav--precedent { left: .5rem; }
  .visionneuse__nav--suivant  { right: .5rem; }
}


/* ==========================================================================
   12. FORMULAIRES
   ========================================================================== */

.formulaire { display: grid; gap: var(--e3); }
.formulaire__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
@media (max-width: 620px) { .formulaire__grille { grid-template-columns: 1fr; } }

.champ { display: flex; flex-direction: column; gap: .45rem; }
.champ--pleine-largeur { grid-column: 1 / -1; }

.champ label {
  font-family: var(--titre);
  font-size: var(--pas0);
  font-weight: 600;
}
.champ__requis { color: var(--terre); }
.champ__aide { font-size: var(--pas-1); color: var(--texte-doux); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: .85rem 1.05rem;
  background: var(--karite);
  border: 1.5px solid var(--filet);
  border-radius: var(--r-s);
  font-size: var(--pas0);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 9.5rem; resize: vertical; }
/* Chevron dessiné en image de fond : il reste solidaire du champ, quels que
   soient les textes d'aide ou d'erreur affichés en dessous. */
.champ select {
  appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23CB632F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: .72rem auto;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--terre);
  box-shadow: 0 0 0 3px var(--terre-voile);
  outline: none;
}
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"],
.champ select[aria-invalid="true"] { border-color: var(--laterite); }

.champ__erreur {
  min-height: 0;
  font-size: var(--pas-1);
  font-weight: 600;
  color: var(--laterite);
}

/* Case à cocher de consentement */
.consentement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  font-size: var(--pas0);
  color: var(--texte-doux);
}
.consentement input { width: 1.2rem; height: 1.2rem; margin-top: .28rem; accent-color: var(--terre); }

/* Pot de miel anti-spam — masqué visuellement et pour les lecteurs d'écran */
.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Retour après envoi */
.formulaire__retour {
  display: none;
  gap: var(--e2);
  padding: var(--e3);
  border-radius: var(--r-m);
  font-size: var(--pas0);
}
.formulaire__retour.est-visible { display: flex; }
.formulaire__retour--succes { background: rgba(226, 154, 84, .18); border: 1px solid var(--savane); }
.formulaire__retour--erreur { background: rgba(133, 38, 22, .1); border: 1px solid var(--laterite); }

/* Bloc newsletter */
.newsletter { display: grid; gap: var(--e2); max-width: 34rem; }
.newsletter__ligne { display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter__ligne input { flex: 1 1 14rem; }
.newsletter__mention { font-size: var(--pas-1); color: var(--texte-doux); }
.sur-fond-sombre .newsletter__mention { color: rgba(253, 251, 247, .72); }
.sur-fond-sombre .newsletter input {
  background: rgba(253, 251, 247, .1);
  border-color: var(--filet-clair);
  color: var(--karite);
}
.sur-fond-sombre .newsletter input::placeholder { color: rgba(253, 251, 247, .55); }

/* Carte / plan d'accès */
.carte-acces {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--filet);
  background: var(--assinie);
}
.carte-acces iframe,
.carte-acces__substitut {
  display: block;
  width: 100%;
  min-height: clamp(280px, 38vw, 420px);
  border: 0;
}
.carte-acces__substitut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e4);
  text-align: center;
  color: var(--texte-doux);
}

/* Zone d'intégration d'un outil tiers (prise de rendez-vous) */
.integration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: clamp(260px, 34vw, 380px);
  padding: var(--e4);
  background: var(--assinie);
  border: 2px dashed var(--terre);
  border-radius: var(--r-l);
  text-align: center;
  color: var(--texte-doux);
}

/* Îlot clair posé au milieu d'une section sombre : les règles
   « .sur-fond-sombre » continuent de s'y appliquer par descendance, alors que
   le fond est redevenu clair. Le bouton en ressortait en Karité sur Assinie,
   à 1,21:1. On lui rend donc son habillage de fond clair. */
.sur-fond-sombre .integration a.bouton--secondaire {
  color: var(--laterite);
  border-color: var(--terre);
}
.sur-fond-sombre .integration a.bouton--secondaire:hover {
  background: var(--terre);
  color: var(--karite);
  border-color: var(--terre);
}


/* ==========================================================================
   13. ACTUALITÉS ET ARTICLE
   ========================================================================== */

.meta-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-size: var(--pas-1);
  color: var(--texte-doux);
}
/* Depuis que le gabarit d'article porte son en-tête sur le panneau Cacao, la
   couleur ci-dessus, du Cacao à 74 %, s'y confondrait avec le fond. */
.sur-fond-sombre .meta-article { color: rgba(253, 251, 247, .78); }
.meta-article time { font-variant-numeric: tabular-nums; }
.meta-article__separateur { width: 5px; height: 5px; border-radius: 50%; background: var(--savane); }

/* Corps rédactionnel d'un article */
.prose { max-width: var(--mesure); }
.prose > * + * { margin-top: var(--e3); }
.prose h2 { margin-top: var(--e5); font-size: var(--pas4); }
.prose h3 { margin-top: var(--e4); font-size: var(--pas2); }
.prose ul, .prose ol { display: grid; gap: .6rem; padding-left: 1.4rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li::marker { color: var(--terre); }
.prose blockquote {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  background: var(--assinie);
  border-left: 4px solid var(--terre);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: var(--pas2);
  font-style: italic;
}
.prose img { border-radius: var(--r-m); }
.prose figure { margin: var(--e4) 0; }
.prose figcaption { margin-top: var(--e1); font-size: var(--pas-1); color: var(--texte-doux); }

/* Liste de documents téléchargeables */
.documents { display: grid; gap: var(--e2); }
.document {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  background: var(--karite);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  transition: border-color var(--transition), transform var(--transition);
}
.document:hover { border-color: var(--terre); transform: translateX(4px); }

/* Depuis que les fichiers sont là, le bloc entier est un lien de
   téléchargement. Sans ces deux règles, le soulignement par défaut des liens
   barrerait les trois lignes de la carte. Le titre se souligne au survol et à
   la tabulation : c'est là que se porte l'oeil, et c'est ce qui signale qu'il
   y a quelque chose à cliquer. */
a.document { color: inherit; text-decoration: none; }
a.document:hover .document__titre,
a.document:focus-visible .document__titre { text-decoration: underline; }

/* Flèche de téléchargement, posée en CSS pour ne pas répéter un SVG dans
   chaque bloc. Le masque prend la couleur du texte : elle suit la charte
   sans qu'aucune teinte soit écrite ici. */
a.document::after {
  content: "";
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  background: currentColor;
  opacity: .45;
  transition: opacity var(--transition), transform var(--transition);
  -webkit-mask: var(--fleche-bas) center / contain no-repeat;
          mask: var(--fleche-bas) center / contain no-repeat;
}
a.document:hover::after,
a.document:focus-visible::after { opacity: 1; transform: translateY(2px); }
.document__corps { flex: 1; min-width: 0; }
.document__titre { margin: 0; font-family: var(--titre); font-weight: 500; font-size: var(--pas1); }
.document__texte { margin: .3rem 0 0; font-size: var(--pas0); color: var(--texte-doux); max-width: var(--mesure); }
.document__meta { margin: .45rem 0 0; font-size: var(--pas-1); color: var(--texte-doux); }


/* ==========================================================================
   14. PIED DE PAGE
   ========================================================================== */

.pied {
  position: relative;
  overflow: hidden;
  padding-block: var(--e6) var(--e4);
  background: var(--cacao);
  color: rgba(253, 251, 247, .8);
  font-size: var(--pas0);
}
.pied__blob { width: 30rem; aspect-ratio: 1; bottom: -55%; left: -8%; }
.pied__interne { position: relative; z-index: 2; }

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--e4);
  padding-bottom: var(--e5);
}
@media (max-width: 900px) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

.pied__logo img { width: 158px; margin-bottom: var(--e3); }
.pied__titre {
  margin-bottom: var(--e2);
  font-family: var(--titre);
  font-size: var(--pas-1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--savane);
}
.pied__liste { display: grid; gap: .6rem; }
.pied__liste a { color: rgba(253, 251, 247, .8); text-decoration: none; }
.pied__liste a:hover { color: var(--savane); text-decoration: underline; }

.reseaux { display: flex; flex-wrap: wrap; gap: .65rem; }
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  background: rgba(253, 251, 247, .1);
  border: 1px solid var(--filet-clair);
  border-radius: var(--r-pilule);
  color: var(--karite);
  transition: background-color var(--transition), transform var(--transition);
}
.reseaux a:hover { background: var(--terre); transform: translateY(-3px); color: var(--karite); }
.reseaux svg { width: 1.15rem; height: 1.15rem; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--filet-clair);
  font-size: var(--pas-1);
  color: rgba(253, 251, 247, .62);
}
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.pied__bas a { color: rgba(253, 251, 247, .62); text-decoration: none; }
.pied__bas a:hover { color: var(--savane); text-decoration: underline; }


/* ==========================================================================
   15. ANIMATIONS D'APPARITION
   ========================================================================== */

/* Le masquage initial dépend de la classe « js-revele », posée sur <html> par
   le script juste avant qu'il ne mette les blocs sous observation.
     — sans JavaScript, ou si le script échoue avant ce point, rien n'est
       jamais masqué : le contenu ne peut pas disparaître ;
     — la règle venant de la feuille de style, l'état masqué s'applique dès le
       premier rendu : aucun contenu n'apparaît pour disparaître ensuite.
   Deux filets de sécurité complètent le dispositif côté script. */
.js-revele .revele {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms cubic-bezier(.22, .61, .36, 1),
              transform 620ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--retard, 0ms);
}
.js-revele .revele.est-visible { opacity: 1; transform: none; }

/* Entrée orchestrée du héros au chargement */
.js .heros__grille > * > .anim-entree {
  animation: entree 780ms cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--retard, 0ms);
}
@keyframes entree {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Respiration lente des formes organiques */
@keyframes respire {
  0%, 100% { border-radius: 58% 42% 47% 53% / 45% 51% 49% 55%; transform: rotate(0) scale(1); }
  50%      { border-radius: 44% 56% 58% 42% / 55% 44% 56% 45%; transform: rotate(6deg) scale(1.04); }
}
.blob--anime { animation: respire 22s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-revele .revele { opacity: 1; transform: none; }
}


/* ==========================================================================
   16. UTILITAIRES
   ========================================================================== */

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Colonne de lecture : borne la longueur de ligne des contenus longs, tout
   en les laissant alignés à gauche sur la même verticale que le reste du site. */
/* Même mesure que `.prose` : l'illustration d'un article et le texte qui la
   suit s'arrêtent sur la même verticale. À 760 px, la photographie finissait
   cinquante pixels avant le texte, et l'oeil voyait la marche. */
.colonne-lecture { max-width: var(--mesure); }

.centre { text-align: center; }
.pile { display: grid; gap: var(--e3); }
.pile--serree { gap: var(--e2); }
.pile--large { gap: var(--e4); }
.relatif { position: relative; z-index: 2; }
.pleine-largeur { width: 100%; }
.sans-marge { margin: 0; }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }


/* ==========================================================================
   17. IMPRESSION
   ========================================================================== */

@media print {
  .entete, .pied__grille, .grain, .bascule-menu, .visionneuse,
  .encart-cta, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}