/* =====================================================================
   ALLEGRIA COUNSEL - Feuille de style publique
   Agence DIX - Digital Intelligence Xperience
   ===================================================================== */

/* ---------- 1. Jetons ------------------------------------------------ */
:root {
  /* --- Palette relevee directement sur le logo -----------------------
     Le personnage est vert, la flamme rouge-orange, et les pastilles
     qui l'entourent sont jaune, bleue et rouge. Les cinq couleurs sont
     utilisees dans le site : cartes services, filets, accents.        */
  --encre:        #15311F;   /* vert tres fonce - texte et fonds pleins */
  --vert:         #0E8A5F;   /* vert du personnage */
  --vert-clair:   #34B37E;
  --bleu:         #1FA5C4;   /* pastille bleue */
  --bleu-nuit:    #0A2A4A;
  --jaune:        #EFC91F;   /* pastille jaune */
  --flamme:       #EF7A1B;   /* orange de la flamme */
  --braise:       #D8442A;   /* rouge de la flamme et de la pastille */
  --papier:       #F5F7F2;   /* fond clair legerement vert */
  --blanc:        #FFFFFF;
  --gris:         #5A6B5F;
  --gris-clair:   #E3E8E0;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;

  --ombre:    0 2px 10px rgba(21, 49, 31, .06);
  --ombre-lg: 0 18px 45px rgba(21, 49, 31, .14);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:  "IBM Plex Mono", "Courier New", monospace;

  --largeur: 1180px;
  --entete-h: 84px;
}

/* ---------- 2. Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--vert); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--flamme); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--flamme);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--papier { background: var(--papier); }
.section--blanc  { background: var(--blanc); }
.section--encre  { background: var(--encre); color: #DCE6DD; }
.section--encre h2, .section--encre h3 { color: var(--blanc); }

/* Eyebrow : etiquette mono. Sert a nommer la section, jamais a decorer. */
.etiquette {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--flamme);
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
}

.entete-section { max-width: 640px; margin-bottom: 46px; }
.entete-section p { color: var(--gris); font-size: 1.05rem; }
.section--encre .entete-section p { color: #A9BFAE; }

/* ---------- 3. Boutons ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--plein  { background: var(--flamme); color: #fff; }
.btn--plein:hover { background: var(--braise); color: #fff; }
.btn--vert   { background: var(--vert); color: #fff; }
.btn--vert:hover { background: var(--encre); color: #fff; }
.btn--ligne  { border-color: currentColor; color: inherit; }
.btn--ligne:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.btn--clair  { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--clair:hover { background: #fff; color: var(--encre); border-color: #fff; }

/* ---------- 4. En-tete ----------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  z-index: 900;
  transition: height .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.entete.est-reduit {
  height: 66px;
  box-shadow: var(--ombre);
  border-bottom-color: var(--gris-clair);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo img { height: 52px; width: auto; transition: height .25s ease; }
.entete.est-reduit .logo img { height: 42px; }

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principale a {
  display: block;
  padding: 10px 14px;
  color: var(--encre);
  font-weight: 500;
  font-size: .95rem;
  border-radius: var(--r-sm);
  position: relative;
}
.nav-principale a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--flamme);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-principale a:hover::after,
.nav-principale a.est-actif::after { transform: scaleX(1); }
.nav-principale a.est-actif { color: var(--vert); }
.nav-principale .btn { margin-left: 10px; }
.nav-principale .btn::after { display: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--encre);
  transition: transform .25s ease, opacity .2s ease;
}
.burger.est-ouvert span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.est-ouvert span:nth-child(2) { opacity: 0; }
.burger.est-ouvert span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. REV SLIDER -------------------------------------------- */
.rev {
  position: relative;
  margin-top: var(--entete-h);
  height: clamp(460px, 78vh, 760px);
  overflow: hidden;
  background: var(--encre);
  touch-action: pan-y;
}
.rev__piste { position: absolute; inset: 0; }

.rev__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
  z-index: 1;
}
.rev__slide.est-actif { opacity: 1; visibility: visible; z-index: 2; }

.rev__fond {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.rev__slide.est-actif .rev__fond { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1%, 0); }
}

.rev__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21,49,31,.92) 0%, rgba(21,49,31,.5) 55%, rgba(21,49,31,.25) 100%);
}
.rev__slide[data-position="centre"] .rev__voile {
  background: radial-gradient(ellipse at center, rgba(21,49,31,.55) 0%, rgba(21,49,31,.9) 100%);
}
.rev__slide[data-position="droite"] .rev__voile {
  background: linear-gradient(270deg, rgba(21,49,31,.92) 0%, rgba(21,49,31,.5) 55%, rgba(21,49,31,.25) 100%);
}

.rev__contenu {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}
.rev__texte { max-width: 660px; color: #fff; }
.rev__slide[data-position="centre"] .rev__contenu { justify-content: center; text-align: center; }
.rev__slide[data-position="centre"] .rev__etiquette { justify-content: center; }
.rev__slide[data-position="droite"]  .rev__contenu { justify-content: flex-end; text-align: right; }
.rev__slide[data-position="droite"]  .rev__etiquette { justify-content: flex-end; }

.rev__etiquette {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vert-clair);
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.rev__titre {
  color: #fff;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  margin-bottom: 18px;
}
.rev__phrase {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: #D3E2D6;
  margin-bottom: 30px;
  max-width: 560px;
}
.rev__slide[data-position="centre"] .rev__phrase { margin-left: auto; margin-right: auto; }
.rev__slide[data-position="droite"]  .rev__phrase { margin-left: auto; }

/* Entree en cascade des couches (le coeur d'un rev slider) */
.rev__couche {
  opacity: 0;
  transform: translateY(28px);
}
.rev__slide.est-actif .rev__couche {
  animation: revMonte .8s cubic-bezier(.2, .7, .2, 1) forwards;
}
.rev__slide.est-actif .rev__couche:nth-child(1) { animation-delay: .25s; }
.rev__slide.est-actif .rev__couche:nth-child(2) { animation-delay: .40s; }
.rev__slide.est-actif .rev__couche:nth-child(3) { animation-delay: .55s; }
.rev__slide.est-actif .rev__couche:nth-child(4) { animation-delay: .70s; }
@keyframes revMonte {
  to { opacity: 1; transform: translateY(0); }
}

/* Fleches */
.rev__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(21,49,31,.3);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.rev__fleche:hover { background: var(--flamme); border-color: var(--flamme); }
.rev__fleche--prec { left: 22px; }
.rev__fleche--suiv { right: 22px; }

/* Puces */
.rev__puces {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.rev__puce {
  width: 34px; height: 4px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s ease, width .25s ease;
}
.rev__puce.est-actif { background: var(--flamme); width: 52px; }

/* Barre de progression */
.rev__progression {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 6;
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,.14);
}
.rev__progression span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--flamme);
}

/* Compteur mono : rappelle le vocabulaire chiffre du cabinet */
.rev__compteur {
  position: absolute;
  right: 26px; bottom: 26px;
  z-index: 5;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
}
.rev__compteur b { color: var(--flamme); font-weight: 600; }

/* ---------- 6. Banniere des pages internes --------------------------- */
.banniere {
  margin-top: var(--entete-h);
  padding: clamp(60px, 9vw, 110px) 0 clamp(46px, 6vw, 72px);
  background: var(--encre);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.banniere::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  border: 40px solid rgba(78,155,54,.22);
  border-radius: 50%;
}
.banniere h1 { color: #fff; position: relative; z-index: 2; margin-bottom: 10px; }
.fil { font-family: var(--mono); font-size: .78rem; color: #93AC98; position: relative; z-index: 2; }
.fil a { color: var(--vert-clair); }

/* ---------- 7. Grilles et cartes ------------------------------------- */
.grille { display: grid; gap: 26px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.carte:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-lg);
  border-color: transparent;
}
.carte__visuel {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gris-clair);
}
.carte__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.carte:hover .carte__visuel img { transform: scale(1.06); }
.carte__corps { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.carte__corps h3 { margin-bottom: 8px; }
.carte__corps p { color: var(--gris); font-size: .95rem; }
.carte__pied {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--gris);
}
.carte__date {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--flamme);
  margin-bottom: 8px;
  display: block;
}

/* Carte service : le pictogramme est l'accent */
.service { text-align: left; }
.service__icone {
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(78,155,54,.12);
  color: var(--vert);
  margin-bottom: 18px;
}
.service:hover .service__icone { background: var(--flamme); color: #fff; }
.service__icone svg { width: 28px; height: 28px; }
.lien-fleche {
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lien-fleche svg { width: 16px; height: 16px; transition: transform .2s ease; }
.lien-fleche:hover svg { transform: translateX(4px); }

/* Prix */
.prix {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--encre);
  font-size: .9rem;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--flamme);
  color: #fff;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- 7 bis. Cartes "institut" (services) ----------------------
   Format portrait, fond sombre teinte par la couleur choisie dans
   l'administration, filets decoratifs reprenant les cinq couleurs du
   logo. Une carte = un metier.
   ------------------------------------------------------------------ */
.instituts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.institut {
  --i-accent: var(--vert);
  --i-fond-a: #0B2B1E;
  --i-fond-b: #0E8A5F;
  --i-halo: .5;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 580px;
  padding: 104px 34px 54px;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #fff;
  background: linear-gradient(158deg, var(--i-fond-a) 0%, var(--i-fond-a) 42%, var(--i-fond-b) 130%);
  text-decoration: none;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
}
.institut:hover { transform: translateY(-8px); box-shadow: var(--ombre-lg); }

/* Halo diffus dans la couleur du metier */
.institut::before {
  content: "";
  position: absolute;
  z-index: -2;
  right: -30%;
  bottom: -35%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--i-accent);
  opacity: var(--i-halo);
  filter: blur(60px);
}
/* Grand cercle en fil de fer, comme sur les cartes de reference */
.institut::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18%;
  top: -12%;
  width: 78%;
  aspect-ratio: 1;
  border: 34px solid rgba(255, 255, 255, .05);
  border-radius: 50%;
}

/* Filets de couleur : les cinq teintes du logo.
   Ils sont cantonnes a la bande haute (au-dessus de la signature) et a
   la gouttiere laterale : aucun filet ne passe derriere du texte, ce qui
   garderait le blanc illisible. */
.institut__filet {
  position: absolute;
  z-index: -1;
  height: 9px;
  border-radius: 2px;
}
.institut__filet--1 { top: 26px; left: 0;  width: 58px; background: var(--flamme); }
.institut__filet--2 { top: 26px; right: 0; width: 90px; background: var(--vert); }
.institut__filet--3 { top: 48px; left: 0;  width: 96px; background: var(--bleu); }
.institut__filet--4 { top: 70px; right: 0; width: 40px; background: var(--jaune); }
/* Celui-ci reste dans la gouttiere (28px < 34px de padding). */
.institut__filet--5 { bottom: 44px; left: 0; width: 28px; background: var(--braise); }

/* Bande multicolore en pied de carte */
.institut__bande {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;
  display: flex;
}
.institut__bande i { flex: 1; }
.institut__bande i:nth-child(1) { background: var(--flamme); }
.institut__bande i:nth-child(2) { background: var(--bleu); flex: 1.6; }
.institut__bande i:nth-child(3) { background: var(--jaune); flex: .6; }
.institut__bande i:nth-child(4) { background: var(--vert); flex: 1.3; }
.institut__bande i:nth-child(5) { background: var(--braise); flex: .8; }

/* Signature haut de carte : ALLEGRIA COUNSEL | METIER */
.institut__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 34px;
}
.institut__marque {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: .06em;
  line-height: 1.15;
  text-align: right;
}
.institut__marque small {
  display: block;
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .24em;
  opacity: .6;
  margin-top: 2px;
}
.institut__trait {
  width: 2px;
  height: 34px;
  background: var(--i-accent);
  flex: none;
}
.institut__pictogramme {
  width: 34px;
  height: 34px;
  flex: none;
  color: #fff;
  opacity: .95;
}
.institut__pictogramme svg { width: 100%; height: 100%; }

.institut h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 22px;
}
.institut p {
  font-size: .94rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
}
.institut__pied {
  margin-top: auto;
  padding-top: 30px;
}
.institut .lien-fleche {
  color: #fff;
  border-bottom-color: var(--i-accent);
}
.institut .lien-fleche svg { transition: transform .3s ease; }
.institut:hover .lien-fleche svg { transform: translateX(5px); }

/* Visuel optionnel envoye depuis l'administration */
.institut--photo::before { opacity: .78; }
.institut__photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: .3;
}

/* --- Declinaisons de couleur (choisies dans l'administration) --- */
.institut--vert   { --i-accent: var(--vert);   --i-fond-a: #0A2A1C; --i-fond-b: #0E8A5F; }
.institut--bleu   { --i-accent: var(--bleu);   --i-fond-a: #0A2540; --i-fond-b: #1FA5C4; }
.institut--orange { --i-accent: var(--flamme); --i-fond-a: #2E1608; --i-fond-b: #EF7A1B; }
.institut--rouge  { --i-accent: var(--braise); --i-fond-a: #2C0D08; --i-fond-b: #D8442A; }
.institut--jaune  { --i-accent: var(--jaune);  --i-fond-a: #1E1A06; --i-fond-b: #6E5A09; --i-halo: .3; }

/* ---------- 8. Chiffres cles ----------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.chiffre { text-align: center; padding: 16px; }
.chiffre b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--vert-clair);
  line-height: 1;
}
.chiffre span {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A9BFAE;
}

/* ---------- 8 bis. Atouts, etapes, temoignages, questions frequentes -- */

/* Atouts */
.atout__icone {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(14, 138, 95, .1);
  color: var(--vert);
  margin-bottom: 16px;
}
.atout__icone svg { width: 24px; height: 24px; }
.atout h3 { font-size: 1.02rem; margin: 0 0 8px; }
.atout p { margin: 0; font-size: .92rem; color: var(--gris); }

/* Etapes de la demarche */
.etape { border-top: 3px solid var(--gris-clair); transition: border-color .3s ease; }
.etape:hover { border-top-color: var(--flamme); }
.etape__num {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--flamme);
  line-height: 1;
}
.etape h3 { margin: 12px 0 8px; font-size: 1.05rem; }
.etape p { margin: 0; font-size: .92rem; color: var(--gris); }

/* En-tete de section sur fond sombre */
.entete-section--clair h2 { color: #fff; }
.entete-section--clair p  { color: rgba(255,255,255,.75); }

/* Temoignages */
.avis {
  position: relative;
  margin: 0;
  padding: 34px 30px 28px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
}
.avis__guillemet {
  position: absolute;
  top: 6px; left: 22px;
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
  color: var(--flamme);
  opacity: .55;
}
.avis blockquote {
  position: relative;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .9);
  font-size: .96rem;
  line-height: 1.75;
}
.avis figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.avis figcaption img,
.avis__initiales {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.avis__initiales {
  display: grid;
  place-items: center;
  background: var(--vert);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}
.avis figcaption b { display: block; color: #fff; font-size: .92rem; }
.avis figcaption small { color: rgba(255, 255, 255, .6); font-size: .8rem; }

/* Questions frequentes */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-md);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq__item[open] { border-color: rgba(239, 122, 27, .45); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--flamme); }
.faq__signe {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
}
.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  background: var(--flamme);
  transition: transform .3s ease;
}
.faq__signe::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__signe::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__item[open] .faq__signe::after { transform: rotate(90deg); opacity: 0; }
.faq__reponse {
  padding: 0 24px 22px;
  color: var(--gris);
  font-size: .94rem;
}
.faq__reponse p { margin: 0 0 10px; }
.faq__reponse p:last-child { margin-bottom: 0; }

/* ---------- 9. Bloc deux colonnes ------------------------------------ */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.duo__visuel {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombre-lg);
  position: relative;
}
.duo__visuel::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--vert), var(--flamme));
}
.liste-cochee { list-style: none; padding: 0; margin: 0 0 26px; }
.liste-cochee li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  color: var(--gris);
}
.liste-cochee li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--vert);
  border-bottom: 2px solid var(--vert);
  transform: rotate(-45deg);
}

/* ---------- 10. Bandeau d'appel -------------------------------------- */
.appel {
  background: linear-gradient(120deg, var(--encre) 0%, #1E4A2C 60%, #2A5F34 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(34px, 5vw, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.appel h2 { margin-bottom: 6px; }
.appel p { color: #BFD6C4; margin: 0; }

/* ---------- 11. Formulaires ------------------------------------------ */
.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 7px;
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--encre);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(78,155,54,.15);
}
.champ .aide { font-size: .78rem; color: var(--gris); margin-top: 5px; }

.alerte {
  padding: 14px 18px;
  border-radius: var(--r-sm);
  border-left: 4px solid;
  margin-bottom: 22px;
  font-size: .93rem;
}
.alerte--succes { background: #EAF6E7; border-color: var(--vert); color: #1F5C2C; }
.alerte--erreur { background: #FDECE8; border-color: var(--braise); color: #8C2A12; }

/* Coordonnees */
.coord { list-style: none; padding: 0; margin: 0; }
.coord li { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.coord svg { width: 20px; height: 20px; color: var(--flamme); flex: none; margin-top: 4px; }
.coord b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); color: var(--gris); }

/* ---------- 12. Pied de page ----------------------------------------
   Fond plein, quatre colonnes, filet multicolore en haut reprenant les
   couleurs du logo, barre de copyright centree.
   ------------------------------------------------------------------ */
.pied {
  position: relative;
  background: var(--encre);
  color: rgba(255, 255, 255, .72);
  padding: 0;
  font-size: .95rem;
}
/* Filet des cinq couleurs du logo */
.pied__filet {
  display: flex;
  height: 5px;
}
.pied__filet i { flex: 1; }
.pied__filet i:nth-child(1) { background: var(--vert);   flex: 1.4; }
.pied__filet i:nth-child(2) { background: var(--bleu);   flex: 1; }
.pied__filet i:nth-child(3) { background: var(--jaune);  flex: .6; }
.pied__filet i:nth-child(4) { background: var(--flamme); flex: 1.2; }
.pied__filet i:nth-child(5) { background: var(--braise); flex: .8; }

.pied a { color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.pied a:hover { color: #fff; }
.pied h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 46px;
  padding: 78px 0 56px;
}
.pied__marque {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.2;
}
.pied__marque span {
  display: block;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vert-clair);
  margin-top: 8px;
}
.pied__resume { margin: 0; max-width: 34ch; line-height: 1.75; }

.pied ul { list-style: none; padding: 0; margin: 0; }
.pied ul li { margin-bottom: 13px; }

.pied .coord li {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 13px;
}
.pied .coord svg {
  width: 17px; height: 17px;
  margin-top: 0;
  flex: none;
  color: rgba(255, 255, 255, .55);
}

.reseaux { display: flex; gap: 10px; margin-top: 26px; }
.reseaux a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  border-radius: 50%;
  color: #fff;
  transition: background .25s ease;
}
.reseaux a:hover { background: var(--flamme); }
.reseaux svg { width: 17px; height: 17px; }

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 24px 0;
  text-align: center;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}
.pied__bas span + span::before { content: "\00b7"; margin: 0 10px; opacity: .5; }

/* Retour en haut */
.haut {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--flamme);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .25s ease;
  z-index: 800;
  box-shadow: var(--ombre-lg);
}
.haut.est-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* WhatsApp flottant */
.wa {
  position: fixed;
  left: 22px; bottom: 22px;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  z-index: 800;
  box-shadow: var(--ombre-lg);
}
.wa:hover { color: #fff; transform: scale(1.06); }
.wa svg { width: 26px; height: 26px; }

/* ---------- 13. Revelation au defilement ----------------------------- */
.reveler { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveler.est-visible { opacity: 1; transform: none; }

/* ---------- 14. Pagination ------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination a, .pagination span {
  min-width: 42px;
  padding: 10px 14px;
  text-align: center;
  border: 1px solid var(--gris-clair);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--encre);
}
.pagination .est-actif { background: var(--vert); border-color: var(--vert); color: #fff; }

/* ---------- 15. Responsive ------------------------------------------- */
@media (max-width: 980px) {
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 34px; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 30px; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --entete-h: 70px; }

  .burger { display: block; }

  .nav-principale {
    position: fixed;
    inset: var(--entete-h) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--gris-clair);
    box-shadow: var(--ombre-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-principale.est-ouverte { max-height: 80vh; overflow-y: auto; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 24px; }
  .nav-principale a { padding: 14px 0; border-bottom: 1px solid var(--gris-clair); }
  .nav-principale a::after { display: none; }
  .nav-principale .btn { margin: 16px 0 0; }

  .rev { height: clamp(420px, 72vh, 560px); }
  .rev__slide[data-position="droite"] .rev__contenu,
  .rev__slide[data-position="centre"] .rev__contenu { justify-content: flex-start; text-align: left; }
  .rev__slide[data-position="droite"] .rev__etiquette,
  .rev__slide[data-position="centre"] .rev__etiquette { justify-content: flex-start; }
  .rev__slide[data-position="droite"] .rev__phrase,
  .rev__slide[data-position="centre"] .rev__phrase { margin-left: 0; }
  .rev__slide .rev__voile {
    background: linear-gradient(90deg, rgba(21,49,31,.94) 0%, rgba(21,49,31,.6) 100%);
  }
  .rev__fleche { display: none; }
  .rev__compteur { display: none; }

  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .appel { flex-direction: column; align-items: flex-start; text-align: left; }
  .pied__grille { grid-template-columns: 1fr; }
  .pied__bas { justify-content: center; text-align: center; }
  .wa { width: 46px; height: 46px; }
}

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

/* ---------- 16. Mouvement reduit ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveler { opacity: 1; transform: none; }
  .rev__couche { opacity: 1; transform: none; }
}

/* ---------- 17. Impression ------------------------------------------- */
@media print {
  .entete, .rev, .pied, .haut, .wa, .burger { display: none !important; }
  body { background: #fff; color: #000; }
}