/* Profil comportemental de l'acheteur — feuille de style v1.0
   Direction : instrument de mesure. Pin profond, minéral, laiton. */

:root{
  --pin:        #16302B;
  --pin-clair:  #2C4A43;
  --pin-voile:  rgba(22,48,43,.55);
  --mineral:    #E9EDEA;
  --mineral-2:  #DDE3DF;
  --craie:      #FCFCFB;
  --laiton:     #B08A3E;
  --laiton-pale:#EFE4CC;
  --terre:      #8C4A2F;

  --serif: "Source Serif 4", Georgia, serif;
  --grot:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --mesure: 62ch;
  --rythme: clamp(1.5rem, 4vw, 2.75rem);
}

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

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

body{
  margin:0;
  background:var(--mineral);
  color:var(--pin);
  font-family:var(--serif);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.62;
  font-optical-sizing:auto;
}

h1,h2,h3,.grot{ font-family:var(--grot); font-weight:600; line-height:1.12; letter-spacing:-.015em; }

h1{ font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem); font-weight:700; margin:0 0 .6rem; }
h2{ font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem); margin:0 0 .7rem; }
h3{ font-size:1.06rem; font-weight:600; margin:0 0 .35rem; }

p{ margin:0 0 1rem; max-width:var(--mesure); }
a{ color:var(--pin); text-underline-offset:.18em; }

.enveloppe{ width:min(100% - 2.5rem, 68rem); margin-inline:auto; }
.etroit{ max-width:44rem; }

/* ---------- Tracé de progression ---------- */
.trace{
  position:fixed; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--mineral-2); z-index:50;
}
.trace__aiguille{
  height:100%; width:0%; background:var(--laiton);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- Écrans ---------- */
.ecran{ display:none; padding-block:var(--rythme) calc(var(--rythme) * 1.4); }
.ecran.actif{ display:block; }

/* ---------- Accueil ---------- */
.hero{ padding-block:clamp(2.5rem,8vw,5rem) 1rem; }
.hero__lede{ font-size:1.16em; max-width:38rem; color:var(--pin-clair); }

.index-profils{
  list-style:none; padding:0; margin:2.5rem 0 0;
  display:grid; gap:0;
  border-block-start:1px solid var(--mineral-2);
  max-width:40rem;
}
.index-profils li{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:.72rem;
  border-block-end:1px solid var(--mineral-2);
}
.index-profils b{ font-family:var(--grot); font-weight:600; font-size:1.02rem; white-space:nowrap; }
.index-profils span{ color:var(--pin-voile); font-size:.92rem; }

/* ---------- Avertissement ---------- */
.avis{
  border-inline-start:3px solid var(--laiton);
  padding:.1rem 0 .1rem 1.15rem;
  margin-block:2rem;
  max-width:40rem;
}
.avis p{ font-size:.95rem; color:var(--pin-clair); }
.avis p:last-child{ margin-bottom:0; }

/* ---------- Boutons ---------- */
.bouton{
  font-family:var(--grot); font-weight:600; font-size:1rem;
  background:var(--pin); color:var(--mineral);
  border:1px solid var(--pin); border-radius:2px;
  padding:.78rem 1.6rem; cursor:pointer;
  transition:background .18s ease;
}
.bouton:hover{ background:var(--pin-clair); }
.bouton--discret{
  background:transparent; color:var(--pin); border-color:var(--pin-voile);
}
.bouton--discret:hover{ background:var(--mineral-2); }
.bouton[disabled]{ opacity:.35; cursor:not-allowed; }

:where(button,a,[tabindex]):focus-visible{
  outline:2px solid var(--laiton); outline-offset:3px;
}

/* ---------- Question ---------- */
.compteur{
  font-family:var(--grot); font-size:.82rem; font-weight:500;
  color:var(--pin-voile); margin-bottom:1.1rem;
  display:flex; align-items:baseline; gap:.55rem;
}
.compteur em{ font-style:normal; color:var(--laiton); }

.question{ font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem); line-height:1.4; margin:0 0 1.6rem; max-width:38rem; }

.choix{ list-style:none; padding:0; margin:0 0 2rem; max-width:42rem; }
.choix li + li{ margin-top:.5rem; }
.choix button{
  width:100%; text-align:start; cursor:pointer;
  font-family:var(--serif); font-size:1rem; line-height:1.45; color:var(--pin);
  background:var(--craie); border:1px solid var(--mineral-2);
  border-inline-start:3px solid transparent;
  border-radius:2px; padding:.85rem 1.05rem;
  transition:border-color .15s ease, background .15s ease;
}
.choix button:hover{ border-inline-start-color:var(--laiton); }
.choix button[aria-pressed="true"]{
  border-inline-start-color:var(--laiton);
  background:var(--laiton-pale);
  border-color:var(--laiton);
}
.choix .precision{ display:block; color:var(--pin-voile); font-size:.88rem; margin-top:.15rem; }

.nav-question{ display:flex; gap:.7rem; align-items:center; }
.astuce{ font-size:.84rem; color:var(--pin-voile); margin:1.4rem 0 0; }

/* ---------- Résultat ---------- */
.resultat__eyebrow{ font-family:var(--grot); font-size:.86rem; color:var(--laiton); margin:0 0 .3rem; font-weight:600; }
.resultat__axes{ font-size:.95rem; color:var(--pin-voile); margin:-.2rem 0 1.4rem; }
.resultat__accroche{ font-size:1.12em; max-width:38rem; }

.bloc{
  margin-block:2.6rem; padding-block-start:1.5rem;
  border-block-start:1px solid var(--mineral-2);
}
.bloc:first-of-type{ border-block-start:none; padding-block-start:0; }

.signature{
  background:var(--pin); color:var(--mineral);
  padding:1.5rem 1.6rem; border-radius:2px; margin-block:2.4rem;
}
.signature h2{ color:var(--craie); font-size:1.2rem; }
.signature p{ margin-bottom:0; color:#D6DED9; }

.liste-nue{ list-style:none; padding:0; margin:0; max-width:var(--mesure); }
.liste-nue li{ padding-block:.42rem; padding-inline-start:1.1rem; position:relative; }
.liste-nue li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:1.05em;
  width:.42rem; height:1px; background:var(--laiton);
}

.palier{ margin-block:1.6rem; }
.palier h3{ font-size:1.1rem; }
.etiquettes{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.etiquette{
  font-family:var(--grot); font-size:.8rem; font-weight:500;
  border:1px solid var(--mineral-2); background:var(--craie);
  padding:.24rem .6rem; border-radius:2px; color:var(--pin-clair);
}

/* ---------- Curseur ---------- */
.curseur{ max-width:34rem; margin-block:1.1rem 1.4rem; }
.curseur__piste{ height:2px; background:var(--mineral-2); position:relative; margin-block:1.5rem .6rem; }
.curseur__repere{
  position:absolute; inset-block-start:50%; width:11px; height:11px;
  background:var(--laiton); border-radius:50%;
  transform:translate(-50%,-50%);
}
.curseur__bornes{ display:flex; justify-content:space-between; font-family:var(--grot); font-size:.82rem; color:var(--pin-voile); }

/* ---------- Radar ---------- */
.radar{ display:block; width:100%; max-width:30rem; height:auto; margin:1.2rem auto 1.8rem; }
.radar__grille{ fill:none; stroke:var(--mineral-2); stroke-width:1; }
.radar__axe{ stroke:var(--mineral-2); stroke-width:1; }
.radar__forme{ fill:rgba(176,138,62,.16); stroke:var(--laiton); stroke-width:1.6; }
.radar__point{ fill:var(--laiton); }
.radar__etiquette{ font-family:var(--grot); font-size:11px; font-weight:500; fill:var(--pin-clair); }

/* Forces détaillées */
.force{ margin-block:1.35rem; }
.force h3{ font-size:1.03rem; margin-bottom:.25rem; }
.force p{ margin-bottom:0; color:var(--pin-clair); }

/* ---------- Pied ---------- */
.pied{
  border-block-start:1px solid var(--mineral-2);
  margin-block-start:3rem; padding-block:1.6rem 3rem;
  font-size:.88rem; color:var(--pin-voile);
}
.pied p{ max-width:var(--mesure); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


/* ---------- Emplacements publicitaires ---------- */
/* Visibles uniquement sur écran large : sous 1200 px, aucune place latérale. */
.bandeau-pub{ display:none; }

@media (min-width: 1200px){
  .bandeau-pub{
    display:block; position:fixed; inset-block-start:6rem;
    width:160px; z-index:10;
  }
  .bandeau-pub--gauche{ inset-inline-start:1.5rem; }
  .bandeau-pub--droite{ inset-inline-end:1.5rem; }
  .bandeau-pub img{ display:block; width:100%; height:auto; border-radius:2px; }
  .bandeau-pub__mention{
    font-family:var(--grot); font-size:.7rem; color:var(--pin-voile);
    margin:0 0 .35rem; letter-spacing:.02em;
  }
}
@media (min-width: 1500px){
  .bandeau-pub{ width:200px; }
}

/* ---------- Liens partenaires ---------- */
.partenaires{
  margin-block-start:2.8rem; padding-block-start:1.6rem;
  border-block-start:1px solid var(--mineral-2);
}
.partenaires__intro{ color:var(--pin-clair); }
.partenaires__liste{ list-style:none; padding:0; margin:1.2rem 0 0; }
.partenaires__liste li{ border-block-end:1px solid var(--mineral-2); }
.partenaires__liste li:first-child{ border-block-start:1px solid var(--mineral-2); }
.partenaires__liste a{
  display:block; padding-block:.85rem; text-decoration:none;
  border-inline-start:3px solid transparent; padding-inline-start:.9rem;
  transition:border-color .15s ease, background .15s ease;
}
.partenaires__liste a:hover{ border-inline-start-color:var(--laiton); background:var(--craie); }
.partenaires__nom{ font-family:var(--grot); font-weight:600; font-size:1rem; }
.partenaires__desc{ display:block; font-size:.92rem; color:var(--pin-voile); margin-top:.1rem; }
.partenaires__tag{
  font-family:var(--grot); font-size:.7rem; font-weight:500;
  border:1px solid var(--mineral-2); padding:.1rem .4rem;
  border-radius:2px; margin-inline-start:.5rem; color:var(--pin-voile);
  vertical-align:.1em;
}
.partenaires__mention{ font-size:.82rem; color:var(--pin-voile); margin-top:1rem; }


/* ================= PAGES DE CONTENU ================= */
.page-contenu{ padding-block-start:0; }

/* Navigation */
.navigation{
  border-block-end:1px solid var(--mineral-2);
  background:var(--mineral); position:sticky; inset-block-start:0; z-index:40;
}
.navigation__interieur{
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; padding-block:.85rem; flex-wrap:wrap; position:relative;
}
@media (min-width: 800px){
  .navigation__marque{ position:absolute; inset-inline-start:0; }
}
.navigation__marque{
  font-family:var(--grot); font-weight:700; font-size:1.15rem;
  letter-spacing:-.02em; text-decoration:none; color:var(--pin);
}
.navigation__liens{ list-style:none; display:flex; gap:1.3rem; margin:0; padding:0; }
.navigation__liens a{
  font-family:var(--grot); font-size:.92rem; font-weight:500;
  text-decoration:none; color:var(--pin-clair); padding-block:.2rem;
  border-block-end:2px solid transparent;
}
.navigation__liens a:hover{ border-block-end-color:var(--mineral-2); }
.navigation__liens a[aria-current="page"]{ color:var(--pin); border-block-end-color:var(--laiton); }

.contenu{ padding-block:clamp(2rem,5vw,3.5rem) 2rem; }
.entete-page h1{ margin-bottom:1rem; }
.titre-barre{ text-decoration:line-through; text-decoration-thickness:2px;
  text-decoration-color:var(--laiton); color:var(--pin-voile); }
.titre-accent{ color:var(--laiton); }
.entete-page__sous{ font-family:var(--grot); font-weight:600;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem); color:var(--pin-clair);
  margin-block:-.2rem 1.2rem; }
.chapo{ font-size:1.14em; color:var(--pin-clair); max-width:40rem; }

.bloc-contenu{ margin-block:2.8rem; }
.bloc-contenu h2{ margin-bottom:.9rem; }
.sous-titre{
  font-family:var(--grot); font-size:.86rem; font-weight:600;
  color:var(--laiton); margin:1.8rem 0 .6rem;
}

/* Portrait */
.portrait{
  display:flex; align-items:center; gap:1.4rem;
  margin-block:2rem 2.4rem; flex-wrap:wrap;
}
.portrait img{
  width:130px; height:130px; object-fit:cover; border-radius:50%;
  filter:grayscale(100%) contrast(1.04);
}
.portrait__legende{ margin:0; font-family:var(--grot); font-weight:600; }
.portrait__legende span{ font-weight:500; color:var(--pin-voile); font-size:.92rem; }

/* Disciplines */
.grille-disciplines{
  display:grid; gap:1.4rem; margin-block:1.4rem 1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}
.grille-disciplines h3{ font-size:1rem; margin-bottom:.2rem; }
.grille-disciplines p{ margin:0; font-size:.96rem; color:var(--pin-clair); }

/* Contact */
.contact{ list-style:none; padding:0; margin:1.2rem 0 0; }
.contact li{ padding-block:.35rem; }
.contact a{ font-family:var(--grot); font-weight:500; }

/* Conviction */
.conviction{
  margin-block:3rem; padding:1.8rem 0 1.8rem 1.5rem;
  border-inline-start:3px solid var(--laiton);
}
.conviction p{
  font-family:var(--grot); font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);
  font-weight:600; line-height:1.32; margin:0 0 .6rem; max-width:32rem;
}
.conviction cite{
  font-family:var(--serif); font-style:normal; font-size:.92rem;
  color:var(--pin-voile);
}

.separateur{ border:none; border-block-start:1px solid var(--mineral-2); margin-block:3rem; }
.retour{ margin-block:3rem 1rem; }

/* Fiches profils */
.index-profils--liens li{ padding:0; }
.index-profils--liens a{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:.72rem; text-decoration:none;
  border-inline-start:3px solid transparent; padding-inline-start:.7rem;
  transition:border-color .15s ease;
}
.index-profils--liens a:hover{ border-inline-start-color:var(--laiton); }

.fiche-profil{
  margin-block:3.2rem; padding-block-start:2rem;
  border-block-start:1px solid var(--mineral-2);
  scroll-margin-block-start:5rem;
}
.fiche-profil h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); margin-bottom:.2rem; }
.fiche-profil__axes{ font-size:.95rem; color:var(--pin-voile); margin-bottom:1.1rem; }
.fiche-profil__accroche{ font-size:1.08em; }

.regimes{ margin:0; }
.regimes dt{
  font-family:var(--grot); font-weight:600; font-size:.94rem;
  color:var(--pin); margin-block-start:1rem;
}
.regimes dd{ margin:.2rem 0 0; color:var(--pin-clair); max-width:var(--mesure); }

/* Pied de site */
.pied-site{
  border-block-start:1px solid var(--mineral-2);
  padding-block:2rem 3rem; margin-block-start:2rem;
  font-size:.88rem; color:var(--pin-voile);
}
.pied-site a{ color:var(--pin-clair); }


/* ---------- Pictogrammes de profil ---------- */
.vignette-profil{
  display:block; width:min(280px, 70%); height:auto; aspect-ratio:1;
  object-fit:contain; margin:1.4rem 0 1.8rem; border-radius:2px;
}
.fiche-profil__entete{
  display:flex; align-items:flex-start; gap:1.4rem; flex-wrap:wrap;
  margin-bottom:1rem;
}
.fiche-profil__entete img{
  width:180px; height:180px; object-fit:contain; border-radius:2px; flex:none;
}
.fiche-profil__titres{ flex:1 1 16rem; }
.fiche-profil__titres h2{ margin-bottom:.2rem; }
@media (max-width: 560px){
  .fiche-profil__entete img{ width:140px; height:140px; }
  .vignette-profil{ width:min(220px, 80%); }
}


/* ---------- Bandeau montagne ---------- */
.bandeau-montagne{
  position:relative; overflow:hidden; border-radius:3px;
  margin-block:0 2.4rem;
  background-image:
    linear-gradient(160deg, rgba(22,48,43,.90) 0%, rgba(22,48,43,.76) 55%, rgba(22,48,43,.88) 100%),
    url("images/montagne.jpg");
  background-size:cover; background-position:center 62%;
}
.bandeau-montagne__contenu{
  padding:clamp(2rem,5vw,3.4rem) clamp(1.4rem,4vw,2.6rem);
  color:var(--mineral);
}
.bandeau-montagne h1{ color:var(--craie); margin-bottom:.5rem; }
.bandeau-montagne .titre-barre{
  color:rgba(252,252,251,.5); text-decoration-color:var(--laiton);
}
.bandeau-montagne .titre-accent{ color:#E4C77A; }
.bandeau-montagne .entete-page__sous{ color:rgba(233,237,234,.9); margin-block:0; }
.bandeau-montagne{ margin-block-end:2rem; }


/* ---------- Illustration de question ---------- */
.illustration-question{
  margin:0 0 1.6rem; display:flex; justify-content:center;
}
.illustration-question img{
  width:min(300px, 62%); height:auto; aspect-ratio:1;
  object-fit:contain; border-radius:2px;
}
@media (max-width: 560px){
  .illustration-question img{ width:min(220px, 70%); }
}


/* ---------- Bandeaux photographiques ---------- */
.bandeau-photo{
  position:relative; overflow:hidden; border-radius:3px;
  margin-block:0 2.4rem; background-size:cover; background-position:center;
}
.bandeau-photo__contenu{
  padding:clamp(2.2rem,6vw,4rem) clamp(1.4rem,4vw,2.8rem);
  color:var(--mineral); max-width:44rem;
}
.bandeau-photo h1{ color:var(--craie); }
.bandeau-photo .hero__lede,
.bandeau-photo .chapo{ color:rgba(233,237,234,.92); }

.bandeau-photo--accueil{
  background-image:
    linear-gradient(105deg, rgba(22,48,43,.93) 0%, rgba(22,48,43,.80) 58%, rgba(22,48,43,.62) 100%),
    url("images/bandeau-accueil.jpg");
}
.bandeau-photo--profils{
  background-image:
    linear-gradient(105deg, rgba(22,48,43,.92) 0%, rgba(22,48,43,.78) 60%, rgba(22,48,43,.60) 100%),
    url("images/bandeau-profils.jpg");
  background-position:center 32%;
}

/* ---------- Photo pleine largeur dans le contenu ---------- */
.illustration-large{
  display:block; width:100%; height:auto;
  border-radius:3px; margin-block:1.2rem 1.6rem;
}


/* ---------- Bannière de consentement ---------- */
.consentement{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:200;
  background:var(--pin); color:var(--mineral);
  border-block-start:3px solid var(--laiton);
  box-shadow:0 -6px 24px rgba(22,48,43,.18);
}
.consentement__interieur{
  width:min(100% - 2.5rem, 68rem); margin-inline:auto;
  padding-block:1.3rem 1.5rem;
  display:flex; gap:1.8rem; align-items:flex-end; flex-wrap:wrap;
}
.consentement__texte{ flex:1 1 26rem; }
.consentement__texte h2{
  color:var(--craie); font-size:1.05rem; margin:0 0 .45rem;
}
.consentement__texte p{
  font-size:.92rem; line-height:1.5; margin:0 0 .5rem;
  color:rgba(233,237,234,.88); max-width:46rem;
}
.consentement__texte p:last-child{ margin-bottom:0; }
.consentement__texte a{ color:#E4C77A; }

/* Les deux boutons ont exactement le même poids visuel (exigence CNIL) */
.consentement__actions{ display:flex; gap:.7rem; flex:0 0 auto; }
.consentement__actions .bouton{
  min-width:9rem; background:var(--craie); color:var(--pin); border-color:var(--craie);
}
.consentement__actions .bouton:hover{ background:#FFFFFF; }
.consentement__actions .bouton--discret{
  background:transparent; color:var(--craie); border-color:rgba(252,252,251,.55);
}
.consentement__actions .bouton--discret:hover{ background:rgba(252,252,251,.12); }

@media (max-width: 640px){
  .consentement__actions{ width:100%; }
  .consentement__actions .bouton{ flex:1; min-width:0; }
}