/* ===============================================================
   POLICES — hébergées localement (fichiers .woff2 attendus dans
   /fonts, cf. README.md). Aucun appel externe (RGPD, zéro dépendance).
   =============================================================== */
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Lilita One';
  src:url('fonts/LilitaOne-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Jockey One';
  src:url('fonts/JockeyOne-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ===============================================================
   TOKENS — couleurs et échelles de la charte.
   Changer une valeur ici suffit à la propager partout où elle est utilisée.
   =============================================================== */
:root{
  --jaune:#fcb900;
  --jaune-fonce:#fab422;
  --texte-hero:#333333;
  --anthracite:#333333;
  --teal:#00897c;         /* confirmé */
  --teal-pale:#b5ddd9;    /* pas dans la palette officielle, à confirmer */
  --orange:#ff9933;       /* confirmé */
  --terracotta:#c85439;   /* confirmé */
  --olive:#9d933c;        /* confirmé */
  --bleu-nuit:#264653;    /* utilisé pour le fond de la section Notre équipe */
  --gris-clair:#f2f2f2;   /* de la palette officielle — usage à confirmer */
  --blanc-casse:#f9f9f9;  /* de la palette officielle — usage à confirmer */
  --blanc:#ffffff;
  --encre:#1c1c1c;

  --gutter:clamp(1.25rem,5vw,4rem);
  --rhythm:clamp(2rem,6vw,5rem);
  --measure:60ch;

  --titre:'Lilita One',ui-rounded,system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --badge:'Jockey One',system-ui,sans-serif;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font:400 1rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;line-height:1.05;font-family:var(--titre);font-weight:400}
h1{font-size:clamp(2.25rem,1rem + 5.5vw,4.5rem)}
h2{font-size:clamp(1.75rem,1rem + 3vw,3rem)}
h3{font-size:clamp(1.15rem,1rem + .8vw,1.5rem)}
p{margin:0;max-width:var(--measure)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}
.mesure-etroite{max-width:65ch}

/* Révélation légère au chargement / scroll (une seule fois) */
[data-reveal],[data-reveal-item]{opacity:0;transform:translateY(1rem);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0) * .12s)}

/* Les 7 carrés de "Notre différence" arrivent chacun d'un endroit
   différent de l'écran plutôt que tous de la même direction. */
.grille > *:nth-child(2)[data-reveal-item]{transform:translateY(-70vh)}
.grille > *:nth-child(3)[data-reveal-item]{transform:translateX(-70vw)}
.grille > *:nth-child(4)[data-reveal-item]{transform:translateY(70vh)}
.grille > *:nth-child(5)[data-reveal-item]{transform:translateX(70vw)}
.grille > *:nth-child(6)[data-reveal-item]{transform:translate(-50vw,-50vh)}
.grille > *:nth-child(7)[data-reveal-item]{transform:translate(50vw,-50vh)}
.grille > *:nth-child(8)[data-reveal-item]{transform:translate(50vw,50vh)}
.grille > *[data-reveal-item]{
  transition:opacity 1s ease-out,transform 1s cubic-bezier(.16,.7,.3,1);
  transition-delay:calc(var(--i,0) * .12s);
}
.grille > *:nth-child(2)[data-reveal-item].is-in,
.grille > *:nth-child(3)[data-reveal-item].is-in,
.grille > *:nth-child(4)[data-reveal-item].is-in,
.grille > *:nth-child(5)[data-reveal-item].is-in,
.grille > *:nth-child(6)[data-reveal-item].is-in,
.grille > *:nth-child(7)[data-reveal-item].is-in,
.grille > *:nth-child(8)[data-reveal-item].is-in{transform:none}
@media (prefers-reduced-motion:reduce){
  .grille > *[data-reveal-item]{transform:none;transition:none}
}
[data-reveal].is-in,[data-reveal-item].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-reveal-item]{opacity:1;transform:none;transition:none}}
.hero h1[data-reveal]{
  transform:translateX(-4rem);
  transition:opacity 2s cubic-bezier(.16,.84,.44,1),transform 2s cubic-bezier(.16,.84,.44,1);
}
.hero h1[data-reveal].is-in{transform:none}
.titre-section[data-reveal]{
  transform:translateX(-4rem);
  transition:opacity 1.2s cubic-bezier(.16,.84,.44,1),transform 1.2s cubic-bezier(.16,.84,.44,1);
}
.titre-section[data-reveal].is-in{transform:none}

/* ===============================================================
   EN-TÊTE
   =============================================================== */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  padding:1rem var(--gutter);
  background:var(--jaune);
  transition:background-color .3s ease,opacity .3s ease;
}
.entete.entete--scroll{background:var(--blanc)}
.entete.entete--rouge{background:var(--terracotta)}
.entete.entete--olive{background:#9d933c}
.entete.entete--bleu{background:var(--bleu-nuit)}
.entete--bleu .nav a{color:var(--blanc)}
.entete.entete--transparent{opacity:0;pointer-events:none}
body{padding-top:var(--hauteur-entete,7rem)}
section[id],footer[id]{scroll-margin-top:var(--hauteur-entete,7rem)}
.logo{display:flex;align-items:center}
.logo__image{height:7rem;width:11.5rem;display:block}
.logo__image--blanc{display:none}
.logo__image--rouge{display:none}
.logo__image--bleu{display:none}
.entete--scroll .logo__image--defaut{display:none}
.entete--scroll .logo__image--blanc{display:block}
.entete--rouge .logo__image--defaut{display:none}
.entete--rouge .logo__image--blanc{display:none}
.entete--rouge .logo__image--rouge{display:block}
.entete--bleu .logo__image--defaut{display:none}
.entete--bleu .logo__image--blanc{display:none}
.entete--bleu .logo__image--bleu{display:block}
.nav{
  position:absolute;top:100%;right:0;
  width:min(20rem,90vw);
  display:flex;flex-direction:column;gap:0;
  font:500 1.05rem/1 var(--sans);
  background:var(--blanc);
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
  box-shadow:0 12px 24px rgba(0,0,0,.15);
}
.nav a{
  padding:1.15rem var(--gutter);
  color:var(--anthracite);
  border-bottom:1px solid #f0f0f0;
  transition:background-color .15s ease,color .15s ease,padding-left .15s ease;
}
.nav a:hover{
  background:var(--jaune);
  color:var(--anthracite);
  padding-left:calc(var(--gutter) + .5rem);
}
.nav a:last-child{border-bottom:none}
.entete--bleu .nav a,.entete--rouge .nav a,.entete--olive .nav a{color:var(--anthracite)}
.entete.nav-ouvert .nav{max-height:30rem}

.burger{
  display:flex;
  width:2.25rem;height:2.25rem;
  border:none;background:none;cursor:pointer;
  padding:0;flex-direction:column;justify-content:center;gap:.35rem;
  z-index:210;
}
.burger span{
  display:block;width:100%;height:2px;
  background:var(--encre);
  transition:transform .25s ease,opacity .25s ease;
}
.entete--bleu .burger span,.entete--rouge .burger span{background:var(--blanc)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* ===============================================================
   HERO — jaune, triangle plus foncé en fond, titre Lilita One
   =============================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--jaune);
  min-height:100vh;min-height:100svh;
  padding:clamp(3rem,10vw,6rem) var(--gutter);
  display:grid;align-content:center;gap:1.75rem;
}
.hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  transition:opacity 2s ease;
}
@media (max-width:48rem){
  .hero__video{object-fit:contain}
}
.hero__video.hero__video--efface{opacity:0}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
}
.hero__voile{
  position:absolute;inset:0;
  background:rgba(252,185,0,.45);
  z-index:0;
}
.hero__triangle{
  position:absolute;
  top:50%;right:-11%;
  width:min(34vw,28rem);
  fill:var(--jaune-fonce);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.22));
  z-index:0;
  animation:flotter-triangle 3s ease-in-out infinite;
}
@keyframes flotter-triangle{
  0%,100%{transform:translateY(calc(-50% - 50px)) rotate(-8deg)}
  50%{transform:translateY(calc(-50% + 50px)) rotate(8deg)}
}
@media (prefers-reduced-motion:reduce){
  .hero__triangle{animation:none;transform:translateY(-50%)}
}
.hero__mini{position:absolute;fill:var(--jaune-fonce);opacity:.97;z-index:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.hero__mini--1{width:4.25rem;top:16%;right:30%;animation:flotter-mini-1 4s ease-in-out infinite}
.hero__mini--3{width:3rem;top:70%;right:36%;animation:flotter-mini-3 4.8s ease-in-out infinite .8s}
.hero__mini--4{width:2.4rem;top:10%;right:5%;animation:flotter-mini-4 3.6s ease-in-out infinite 1.2s}

@keyframes flotter-mini-1{
  0%,100%{transform:translateY(-14px) rotate(78deg)}
  50%{transform:translateY(14px) rotate(98deg)}
}
@keyframes flotter-mini-3{
  0%,100%{transform:translateY(-12px) rotate(165deg)}
  50%{transform:translateY(12px) rotate(185deg)}
}
@keyframes flotter-mini-4{
  0%,100%{transform:translateY(9px) translateX(5px) rotate(15deg)}
  50%{transform:translateY(-9px) translateX(-5px) rotate(40deg)}
}
@media (prefers-reduced-motion:reduce){
  .hero__mini{animation:none}
}
.hero__contenu{position:relative;z-index:1;display:grid;gap:1.75rem;max-width:60rem}
.hero h1{color:var(--blanc);max-width:19ch}
.hero p{color:var(--texte-hero);font-weight:600;max-width:54ch;font-size:1.6rem}

/* ===============================================================
   NOTRE ÉQUIPE — fond bleu nuit, cartes des fondateurs
   =============================================================== */
.equipe{
  min-height:70vh;               /* repli pour les vieux navigateurs */
  min-height:70svh;              /* svh : ne saute pas quand la barre d'URL mobile bouge */
  padding:clamp(3rem,8vw,5.5rem) var(--gutter);
  background:var(--bleu-nuit);
  display:grid;align-content:center;justify-items:center;gap:5rem;
  text-align:center;
  grid-template-columns:minmax(0,1fr);
}
.equipe h2{color:var(--blanc);text-align:left;justify-self:start}
.equipe__intro{
  color:rgba(255,255,255,.75);
  justify-self:start;text-align:left;
  width:100%;max-width:64rem;
  display:grid;gap:1rem;
  margin-top:-3.5rem;
}
.equipe__intro p{max-width:none}

.equipe__grille{
  list-style:none;margin:0;padding:0;
  display:grid;
  /* min(100%,20rem) : une carte fait au moins 20rem, sauf si l'écran est
     plus étroit, auquel cas elle prend toute la largeur (pas de débordement à 360 px). */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:2.5rem;
  width:100%;          /* sans ça, le centrage du parent (.equipe) rétrécit la grille */
  max-width:70rem;
  align-items:start;   /* déplier une carte n'étire pas l'autre */
}
.equipe__membre{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  transition:transform .2s ease;
  background:rgba(255,255,255,.07);
  box-shadow:0 10px 25px rgba(0,0,0,.3);
  padding:2rem clamp(1.25rem,4vw,2.5rem);
  min-width:0;
}
.equipe__membre:hover{transform:translateY(-.5rem)}
.equipe__photo{
  width:11rem;height:11rem;border-radius:0;
  background:var(--c);
  display:grid;place-items:center;
  overflow:hidden;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.3));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.equipe__photo img{width:100%;height:100%;object-fit:cover}
.equipe__membre:hover .equipe__photo{transform:scale(1.08) rotate(-4deg)}

/* Nom : étiquette jaune légèrement inclinée, angle différent par carte */
.equipe__membre h4{
  margin:0;
  font-family:var(--titre);font-weight:400;
  color:#333333;font-size:1.6rem;
  background:#fcb900;
  display:inline-block;
  padding:.15em .5em;
}
.equipe__membre:nth-child(1) h4{transform:rotate(-4deg)}
.equipe__membre:nth-child(2) h4{transform:rotate(3deg)}
.equipe__membre:nth-child(3) h4{transform:rotate(-2deg)}

.equipe__membre .badge{
  align-self:center;
  font-size:1.06rem;line-height:1.2;
  text-align:center;
  border-radius:10px;
  width:auto;max-width:100%;   
  padding:.5rem 1rem;          
  margin-bottom:0;             
}
.equipe__membre .badge[data-reveal-item]{
  opacity:0;transform:translateY(1.5rem);
  transition:opacity .5s ease .35s,transform .5s ease .35s;
}
.equipe__membre .badge[data-reveal-item].is-in{opacity:1;transform:none}

.equipe__membre > p{
  color:rgba(255,255,255,.75);font-size:.9rem;
  margin:0;
}

.equipe__verbatim{
  display:grid;gap:.75em;
  width:100%;max-width:60ch;
  text-align:left;
}
.equipe__verbatim p{
  font:400 .95rem/1.6 var(--sans);
  color:rgba(255,255,255,.8);
  margin:0;
  overflow-wrap:break-word;
}
.equipe__verbatim .equipe__accroche{font-style:italic}

/* « Lire la suite » : <details> natif, clavier et lecteurs d'écran
   gérés par le navigateur, aucun JavaScript. */
.equipe__suite{display:grid;gap:.75em}
.equipe__suite summary{
  cursor:pointer;
  list-style:none;                   /* retire le triangle par défaut */
  font:600 .9rem var(--sans);
  color:var(--jaune);                /* jaune #fcb900 sur bleu nuit #264653 : contraste ≈ 6:1 */
  text-decoration:underline;
  text-underline-offset:.2em;
  width:max-content;                 /* zone cliquable limitée au libellé */
}
.equipe__suite summary::-webkit-details-marker{display:none} /* Safari */
.equipe__suite summary:hover{text-decoration-thickness:2px}
.equipe__suite summary:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}
/* Le libellé change selon l'état ouvert/fermé */
.equipe__suite-fermer,
.equipe__suite[open] .equipe__suite-ouvrir{display:none}
.equipe__suite[open] .equipe__suite-fermer{display:inline}

/* Mouvement réduit : plus de soulèvement, de rotation ni d'apparition animée */
@media (prefers-reduced-motion:reduce){
  .equipe__membre,
  .equipe__photo{transition:none}
  .equipe__membre:hover,
  .equipe__membre:hover .equipe__photo{transform:none}
  .equipe__membre .badge[data-reveal-item]{opacity:1;transform:none;transition:none}
}

.difference{
  min-height:100vh;min-height:100svh;
  padding:clamp(3rem,8vw,5.5rem) var(--gutter);
  background:var(--blanc);
  display:grid;align-content:center;
  overflow:hidden;
}
.difference__titre-seul{color:var(--anthracite);max-width:9ch;margin-bottom:2rem}
.grille{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  max-width:70rem;
  margin-inline:auto;
}
.difference__triangle-cellule{
  grid-column:span 2;
  display:flex;align-items:center;justify-content:center;
}
.difference__triangle{fill:var(--teal-pale);width:55%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.carte{
  aspect-ratio:1/1;
  border-radius:0;
  padding:1.5rem;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  color:var(--blanc);
  display:flex;flex-direction:column;justify-content:center;gap:.75rem;
  overflow:hidden;
}
.carte h3{font-size:1.85rem;color:var(--blanc);margin-bottom:1rem;text-align:center}
.carte p{font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.88);max-width:none;text-align:center}
.carte--anthracite{background:var(--anthracite);transition:transform .12s ease,box-shadow .12s ease}
.carte--anthracite:hover{transform:scale(1.04) !important;box-shadow:0 14px 28px rgba(0,0,0,.22)}
.carte--teal{background:var(--teal);transition:transform .12s ease,box-shadow .12s ease}
.carte--teal:hover{transform:scale(1.04) !important;box-shadow:0 14px 28px rgba(0,0,0,.22)}

/* ===============================================================
   ILS NOUS FONT CONFIANCE — épinglage horizontal (la mécanique
   pilotée par le scroll vertical, réservée à cette seule section)
   =============================================================== */
.confiance{background:var(--blanc);position:relative;z-index:0;overflow:hidden}
.confiance__reseau{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--terracotta);opacity:.12;
  z-index:-1;
}
.confiance__tete{
  background:var(--terracotta);color:var(--blanc);
  padding:clamp(1.25rem,3vh,2.5rem) var(--gutter);
}
.confiance__tete h2{color:var(--blanc)}
.confiance__grille{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;
  padding:clamp(2rem,5vh,3.5rem) var(--gutter);
  max-width:70rem;margin-inline:auto;
}
.confiance__logo{display:grid;place-items:center;padding:1rem}
.confiance__logo[data-reveal-item]{
  opacity:0;
  transform:scale(.4);
  transition:opacity .35s ease-out,transform .7s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i,0) * .08s);
}
.confiance__logo[data-reveal-item].is-in{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .confiance__logo[data-reveal-item]{opacity:1;transform:none;transition:none}
}
.confiance__logo img{height:6rem;width:auto;max-width:100%;display:block}
.confiance__lien{
  text-align:center;
  font-size:.85rem;color:#666;
  padding:0 var(--gutter) clamp(1.5rem,4vh,2.5rem);
  max-width:32rem;
  margin-inline:auto;
}
.confiance__lien a{
  color:var(--terracotta);font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;
  border-bottom:1px solid transparent;
}
.confiance__lien a:hover{border-color:var(--terracotta)}
.confiance__lien svg{width:1.3rem;height:1.3rem;flex:0 0 auto}

/* ===============================================================
   NOTRE ACCOMPAGNEMENT — cartes jaunes + tableau comparatif
   =============================================================== */
.accompagnement{padding:clamp(3rem,8vw,5.5rem) var(--gutter);background:var(--anthracite);color:var(--blanc)}
.accompagnement h2{color:var(--blanc)}
.accompagnement__intro{max-width:60ch;margin:.75rem 0 2.5rem;color:#ccc}
.carte-avion{align-items:center}
.carte-avion .badge{
  text-align:center;
  max-width:100%;
  align-self:center;
  font-size:clamp(1.5rem,1rem + 1.8vw,2.75rem);
  padding:1.5rem 2.5rem;
}
.carte-avion__zone{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;align-self:stretch}
.carte-avion img{
  width:22rem;height:auto;max-width:100%;max-height:100%;
  animation:vol-avion 6s linear infinite;
}
@keyframes vol-avion{
  0%{transform:translateX(-55vw) translateY(10px) rotate(-3deg)}
  50%{transform:translateX(0) translateY(-10px) rotate(2deg)}
  100%{transform:translateX(55vw) translateY(10px) rotate(-3deg)}
}
@media (prefers-reduced-motion:reduce){
  .carte-avion img{animation:none}
}
.pin-accomp{position:relative;margin-bottom:3rem}
.pin-accomp__viewport{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;
}
.pin-accomp__track{display:flex;width:max-content;flex:1 1 auto;min-height:0;will-change:transform}
.pin-accomp__gauge{margin:0 var(--gutter) clamp(1rem,3vh,2rem);height:2px;background:rgba(255,255,255,.15);flex:0 0 auto}
.pin-accomp__gauge span{display:block;height:100%;width:0;background:var(--jaune)}
.panel-accomp{
  width:var(--slide,100vw) !important;
  aspect-ratio:auto !important;
  height:100%;
  padding:clamp(1.5rem,6vh,4rem) clamp(1.5rem,8vw,6rem) !important;
  overflow:hidden;
}
.panel-accomp__contenu{
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:clamp(.5rem,2.5vh,1.25rem);height:100%;
  transform:scale(.82);opacity:.5;
  transition:transform .1s linear,opacity .1s linear;
  will-change:transform,opacity;
}
.panel-accomp h3{
  font-size:clamp(1.75rem,1rem + 3vw + 3vh,4.5rem);
  text-align:center;align-self:center;width:100%;
  margin-top:clamp(1rem,10vh,10rem);
}
.panel-accomp p{font-size:clamp(.9rem,1.5vh + .5rem,1.2rem);max-width:48ch;text-align:center;align-self:center;transition:transform .1s linear;will-change:transform}
.carte-jaune{
  background:var(--anthracite);color:var(--blanc);
  border-radius:0;padding:1.5rem;
  aspect-ratio:1/1;
  display:flex;flex-direction:column;justify-content:flex-start;gap:.5rem;
  overflow:hidden;
}
.carte-jaune p{color:rgba(255,255,255,.85)}
.pin-accomp__track > article:nth-child(even){background:var(--jaune);color:#333333}
.pin-accomp__track > article:nth-child(even) p{color:#333333}
.lien-en-savoir-plus{
  display:inline-block;
  align-self:center;
  font:600 .8rem/1 var(--sans);
  text-transform:uppercase;letter-spacing:.03em;
  color:inherit;
  border:1.5px solid currentColor;
  border-radius:999px;
  padding:.5rem 1rem;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.lien-en-savoir-plus:hover{color:var(--anthracite);background:var(--blanc)}

.badge{
  display:inline-block;background:var(--blanc);color:var(--teal);
  font:400 1.1rem/1 var(--badge);letter-spacing:.02em;text-transform:uppercase;
  padding:.6rem 1.1rem;border-radius:999px;margin-bottom:.9rem;
  align-self:flex-start;
}
.badge{font-size:clamp(1.1rem,.8rem + 1vw,1.75rem)}
.icone-audit{height:clamp(4rem,14vh,12rem);width:auto;margin-top:clamp(.5rem,2vh,2rem);align-self:center;transition:transform .1s linear,opacity .1s linear;will-change:transform,opacity}
.icone-casquette{color:var(--blanc)}
.texte-centre{text-align:center;align-self:center}


.tableau-fiches{display:none}
.fiche-colonne{
  border:1px solid #e5e5e5;
  margin-bottom:1.5rem;
  overflow:hidden;
}
.fiche-colonne__entete{
  color:var(--blanc);
  padding:1.5rem 1.25rem 1.25rem;
  text-align:center;
}
.fiche-colonne__entete img,.fiche-colonne__entete svg{height:4rem;width:auto;margin:0 auto .5rem;display:block}
.fiche-colonne__entete h3{font:400 1.15rem/1.2 var(--titre)}
.fiche-colonne__ligne{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.25)}
.fiche-colonne__label{
  display:block;font:600 .75rem/1 var(--sans);
  text-transform:uppercase;letter-spacing:.04em;
  color:rgba(255,255,255,.75);margin-bottom:.4rem;
}
.fiche-colonne__valeur{color:rgba(255,255,255,.92)}

.tableau-titre{
  font:400 clamp(1.5rem,1rem + 2vw,2.25rem)/1.2 var(--titre);
  color:var(--blanc);
  max-width:70rem;margin:0 auto;text-align:center;
  margin-bottom:1.75rem;
  scroll-margin-top:var(--hauteur-entete,7rem);
}
.tableau-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.5rem;padding-top:2.25rem;max-width:70rem;margin-inline:auto}
table.comparatif{border-collapse:collapse;min-width:52rem;width:100%}
table.comparatif caption{text-align:left;font:500 .8rem/1 var(--sans);color:#999;margin-bottom:.75rem}
table.comparatif th,table.comparatif td{
  padding:.9rem 1.1rem;text-align:left;vertical-align:top;
  font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.15);
}
table.comparatif thead th{font:400 1rem/1.15 var(--titre);color:var(--blanc);padding-top:.6rem}
.icone-tableau{display:block;margin:-2.25rem auto .35rem;height:4.5rem;width:auto;max-width:100%}
table.comparatif tbody th{color:#ddd;font:400 1rem/1.15 var(--titre);white-space:nowrap}
table.comparatif td{color:rgba(255,255,255,.92)}
table.comparatif thead th:not(:first-child),
table.comparatif td:not(:first-child){min-width:11rem}
.col-orange{background:linear-gradient(to right, rgba(0,0,0,.45), transparent 10px), var(--orange)}
.col-terracotta{background:linear-gradient(to right, rgba(0,0,0,.45), transparent 10px), var(--terracotta)}
.col-teal{background:linear-gradient(to right, rgba(0,0,0,.45), transparent 10px), var(--teal)}
.col-olive{background:linear-gradient(to right, rgba(0,0,0,.45), transparent 10px), var(--olive)}

/* ===============================================================
   NOS DOMAINES D'EXPERTISE — triangle fixe, texte qui se relaie
   automatiquement (pas un scroll piloté par la page : ça tourne
   tout seul, en boucle, avec un bouton pause).
   =============================================================== */
.domaines{
  background:var(--olive);color:var(--blanc);
  padding:clamp(3rem,8vw,5.5rem) var(--gutter);
  display:grid;gap:5rem;align-content:center;
  min-height:100vh;min-height:100svh;
  position:relative;overflow:hidden;
}
.domaines h2{color:var(--blanc)}
.domaines__intro{max-width:60ch;color:rgba(255,255,255,.92);font-weight:600;position:relative;z-index:1;margin-top:1.5rem}
.domaines > div{position:relative;z-index:1}

.domaines__triangle-coin{
  position:absolute;top:-3rem;right:12rem;
  width:min(28vw,20rem);height:auto;
  fill:var(--jaune);
  transform:rotate(12deg);
  z-index:0;
}

.domaines__grille{
  position:relative;z-index:1;
  list-style:none;margin:0 auto;padding:1rem 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4rem 3rem;
  max-width:92rem;
}
.domaines__item{position:relative}
.domaines__mini-triangle{
  position:absolute;top:-1rem;left:50%;transform:translateX(-50%) rotate(0deg);
  width:7.5rem;height:auto;
  fill:rgba(255,255,255,.2);
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.3));
  z-index:0;
}
.domaines__item:nth-child(4n+2) .domaines__mini-triangle{transform:translateX(-50%) rotate(90deg)}
.domaines__item:nth-child(4n+3) .domaines__mini-triangle{transform:translateX(-50%) rotate(180deg)}
.domaines__item:nth-child(4n+4) .domaines__mini-triangle{transform:translateX(-50%) rotate(270deg)}
.domaines__item:nth-child(4n+1) .domaines__mini-triangle{transform:translateX(-50%) rotate(45deg)}

.domaines__mini-triangle{transition:transform .3s ease,fill .3s ease}
.domaines__item:hover .domaines__mini-triangle{fill:rgba(255,255,255,.4)}
.domaines__item:nth-child(4n+2):hover .domaines__mini-triangle{transform:translateX(-50%) rotate(90deg) scale(1.18)}
.domaines__item:nth-child(4n+3):hover .domaines__mini-triangle{transform:translateX(-50%) rotate(180deg) scale(1.18)}
.domaines__item:nth-child(4n+4):hover .domaines__mini-triangle{transform:translateX(-50%) rotate(270deg) scale(1.18)}
.domaines__item:nth-child(4n+1):hover .domaines__mini-triangle{transform:translateX(-50%) rotate(45deg) scale(1.18)}

.domaines__item p{transition:transform .3s ease,text-shadow .3s ease}
.domaines__item:hover p{transform:scale(1.06);text-shadow:0 4px 12px rgba(0,0,0,.55)}
.domaines__item p{
  position:relative;z-index:1;
  font:400 1.4rem/1.3 var(--titre);
  color:var(--blanc);
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  margin:0 auto;padding-top:2rem;
  max-width:13ch;text-align:center;
}

/* ===============================================================
   FOOTER
   =============================================================== */
footer{padding:clamp(2.5rem,6vw,4rem) var(--gutter);background:var(--blanc)}
.pied{
  display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2rem;
  padding-top:2rem;border-top:1px solid #eee;
  max-width:90rem;margin-inline:auto;
}
.pied__marque img{width:5.5rem;height:5.5rem;margin-bottom:.75rem}
.pied__marque p{font-size:.85rem;color:#555;line-height:1.6}
.pied__reseaux{display:flex;gap:.75rem;margin-top:1rem}
.pied__reseaux a{
  width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid #ccc;
  display:grid;place-items:center;
}
.pied__reseaux svg{width:1.05rem;height:1.05rem}
.pied h4{font:600 .8rem/1 var(--sans);margin-bottom:.9rem;color:var(--encre)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pied a,.pied p{font-size:.85rem;color:#555}
.mentions{margin-top:2rem;font-size:.75rem;color:#999}

/* ===============================================================
   REPLI — mobile étroit / mouvement réduit
   =============================================================== */
@media (min-width:48.01rem) and (max-width:75rem){
  .hero__triangle{width:min(20vw,14rem);right:-18%}
}
@media (max-width:48rem),(prefers-reduced-motion:reduce){
  .hero__contenu{max-width:none}
  .hero__triangle{width:60vw;right:-20%;opacity:.7}
  .grille{grid-template-columns:1fr}
  .difference__titre-seul{max-width:none}
  .difference__triangle-cellule{grid-column:span 1}
  .difference__triangle{max-width:10rem;width:50%}
  .carte{aspect-ratio:auto;padding:1.5rem}
  .domaines__grille{grid-template-columns:repeat(2,1fr)}
  .domaines__triangle-coin{width:38vw}
  .pin-accomp{margin-bottom:1.5rem}
  .pin-accomp__viewport{position:static;height:auto;padding-block:0}
  .pin-accomp__track{
    width:auto !important;
    flex-direction:column;
    transform:none !important;gap:0;
  }
  .panel-accomp{width:auto !important;min-height:auto;padding-block:3rem}
  .badge--vide{display:none}
  .panel-accomp .badge{align-self:center;display:inline-flex;width:auto;max-width:80%}
  .panel-accomp__contenu{transform:none !important;opacity:1 !important}
  .icone-audit{transform:none !important;opacity:1 !important}
  .pin-accomp__gauge{display:none}

  .confiance__grille{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .pied{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .pied__marque{display:flex;flex-direction:column;align-items:center}
  .pied__reseaux{justify-content:center}
  .logo__image{width:auto;height:4rem}

  .tableau-scroll{display:none}
  .tableau-fiches{display:block}
}