/* ==========================================================================
   LFT Performance Santé
   Thème clair, bleu profond institutionnel.
   Bandeaux photo sombres pour les titres, structure par filets.
   Typo : Archivo
   ==========================================================================

   VISUELS
   Chaque zone photo porte un attribut data-photo ; le script pose l'image
   en variable CSS --img. Un dégradé de repli est toujours dessiné dessous :
   si un fichier manque, la page reste intacte, sans trou.
   ========================================================================== */

:root {
  --papier:     #FFFFFF;
  --creme:      #F5F3EF;
  --creme-2:    #EDE9E2;
  --encre:      #2E4459;

  --bleu:       #3D5670;
  --bleu-fonce: #2B4059;
  --bleu-clair: #6E8CA8;
  --bleu-pale:  #E6EDF3;

  --gris:       #5A6672;
  --gris-2:     #8E969F;
  --filet:      #E2DED6;
  --filet-2:    #C9C3B8;

  /* sur fond sombre */
  --nuit:       #2B4059;
  --texte-nuit: #E4EAF0;
  --gris-nuit:  #AFC0D0;
  --filet-nuit: #4A607A;

  --max:    76rem;
  --rythme: clamp(4rem, 8vw, 7rem);

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.4375rem;
  --t-xl:   1.8125rem;
  --t-2xl:  clamp(1.875rem, 4vw, 3rem);
  --t-3xl:  clamp(2.5rem, 6.5vw, 4.75rem);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 6.25rem; background: var(--papier); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Les titres reprennent le serif des documents de Théo ; le texte courant
   reste en Archivo pour la lisibilité à l'écran. */
h1, h2, .titre-section, .heros__titre, .banniere h1, .appel h2, .tarifs__nom,
.volet h3, .consentement h2 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:focus-visible { outline: 2px solid var(--bleu-clair); outline-offset: 3px; }
::selection { background: var(--bleu-pale); }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--encre); color: #fff; padding: .75rem 1.25rem;
}
.saut-contenu:focus { left: 0; }

/* --- Trame ---------------------------------------------------------------- */

.enveloppe {
  width: 100%; max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section { padding-block: var(--rythme); position: relative; }
.section--creme { background: var(--creme); }
.section + .section:not(.section--creme) { border-top: 1px solid var(--filet); }

.entete-section { max-width: 44rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.entete-section--centre { margin-inline: auto; text-align: center; }

/* Le libellé est précédé d'un petit anneau ouvert, repris du cercle du logo
   LFT et de l'anneau qui entoure le portrait. */
.libelle {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--bleu-clair); margin-bottom: 1rem;
}

.libelle::before {
  content: '';
  width: .4rem; height: .4rem; flex: none;
  border-radius: 50%;
  background: var(--bleu);
}

.sombre .libelle::before { background: #BBD0E2; }

.entete-section--centre .libelle { justify-content: center; }

.titre-section {
  font-size: var(--t-2xl); font-weight: 600;
  line-height: 1.14; letter-spacing: -.012em;
  color: var(--encre); margin: 0;
}

.titre-section em { font-style: normal; color: var(--bleu); }

.intro { font-size: var(--t-md); color: var(--gris); margin: 1rem 0 0; max-width: 52ch; }
.entete-section--centre .intro { margin-inline: auto; }

/* --- En-tête -------------------------------------------------------------- */

.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
}

/* Au-dessus d'un bandeau sombre, les liens doivent rester lisibles. */
.entete .nav__lien, .entete .logo__nom { color: #fff; }
.entete .logo__nom small { color: rgba(255,255,255,.62); }

.entete--defile {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--filet);
}

.entete--defile .nav__lien { color: var(--gris); }
.entete--defile .nav__lien:hover { color: var(--encre); }
.entete--defile .nav__lien[aria-current="page"] { color: var(--encre); }
.entete--defile .logo__nom { color: var(--encre); }
.entete--defile .logo__nom small { color: var(--gris-2); }
.entete--defile .burger { color: var(--encre); border-color: var(--filet-2); }

.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 5.5rem;
}

.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }

.logo__sigle {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  background: var(--bleu);
  font-size: .8rem; font-weight: 800; letter-spacing: -.02em; color: #fff;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

/* Logo fourni par le client. Deux versions : la claire s'affiche sur les
   fonds sombres, la foncée sur les fonds clairs. La bascule se fait en CSS,
   sans recharger d'image. */
.logo__image {
  height: 3.5rem; width: auto; max-width: 12rem;
  flex: none; object-fit: contain;
}

.logo__image[hidden] { display: none; }

/* Tant qu'aucun logo n'est détecté, le sigle et le nom tiennent la place. */
html.a-logo .logo__sigle,
html.a-logo .logo__nom { display: none; }

/* En-tête posé sur le bandeau sombre : version claire */
.entete .logo__image--fonce { display: none; }
.entete .logo__image--clair { display: block; }

/* En-tête devenu blanc au défilement : version foncée */
.entete--defile .logo__image--clair { display: none; }
.entete--defile .logo__image--fonce { display: block; }

/* Pied de page sur fond crème : version foncée */
.pied .logo__image--clair { display: none; }
.pied .logo__image--fonce { display: block; }

/* Menu mobile ouvert : l'en-tête a un fond blanc derrière le logo */
@media (max-width: 60rem) {
  .entete .logo__image { height: 2.9rem; }
}

.logo__nom {
  font-size: .95rem; font-weight: 700; line-height: 1.15;
  letter-spacing: .01em;
}

.logo__nom small {
  display: block; font-size: .6rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; margin-top: .22rem;
}

.nav { display: flex; align-items: center; gap: .2rem; }

.nav__lien {
  position: relative;
  font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  padding: .5rem .9rem; transition: color .15s, opacity .15s;
}

.nav__lien:hover { opacity: .75; }

.nav__lien[aria-current="page"]::after {
  content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .15rem;
  height: 2px; background: var(--bleu-clair);
}

.entete--defile .nav__lien[aria-current="page"]::after { background: var(--bleu); }

.nav__cta { margin-left: .7rem; }

.burger {
  display: none; background: none; border: 1px solid rgba(255,255,255,.4);
  cursor: pointer; width: 2.6rem; height: 2.6rem; padding: .6rem; color: #fff;
}

.burger svg { width: 100%; height: 100%; }

@media (max-width: 60rem) {
  .burger { display: grid; place-items: center; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--filet);
    padding: .5rem clamp(1.25rem, 5vw, 3rem) 1.5rem;
  }
  .nav[data-ouvert="oui"] { display: flex; }
  .nav .nav__lien { color: var(--gris); padding: .9rem .25rem; font-size: var(--t-md); border-bottom: 1px solid var(--filet); }
  .nav .nav__lien[aria-current="page"] { color: var(--encre); }
  .nav__lien[aria-current="page"]::after { display: none; }
  .nav__cta { margin: 1rem 0 0; justify-content: center; }
}

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

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--bleu); background: var(--bleu); color: #fff;
  transition: background .16s, border-color .16s, color .16s;
}

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

.bouton--ligne { background: transparent; color: var(--encre); border-color: var(--filet-2); }
.bouton--ligne:hover { background: var(--encre); border-color: var(--encre); color: #fff; }

/* sur fond sombre */
.sombre .bouton--ligne,
.banniere .bouton--ligne,
.heros .bouton--ligne,
.entete:not(.entete--defile) .bouton--ligne {
  color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08);
}

.sombre .bouton--ligne:hover,
.banniere .bouton--ligne:hover,
.heros .bouton--ligne:hover { background: #fff; color: var(--encre); border-color: #fff; }

.bouton--large { width: 100%; }
.bouton svg { width: 1em; height: 1em; flex: none; }

/* --- Visuels -------------------------------------------------------------- */

.visuel {
  position: absolute; inset: 0;
  background-color: var(--nuit);
  background-image:
    var(--img, none),
    radial-gradient(70rem 40rem at 22% 16%, rgba(78, 115, 150, .6), transparent 62%),
    linear-gradient(152deg, #3D5670 0%, #2B4059 62%);
  background-size: cover, auto, auto;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* variante claire, pour les cartes sur fond blanc */
.visuel--clair {
  background-color: var(--creme-2);
  background-image:
    var(--img, none),
    radial-gradient(50rem 30rem at 25% 20%, #E4DFD5, transparent 62%),
    linear-gradient(152deg, #EDE9E2 0%, #F5F3EF 60%);
}

.visuel--haut { background-position: center 24%, center, center; }

.voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(25,38,54,.80) 0%, rgba(25,38,54,.62) 45%, rgba(25,38,54,.92) 100%),
    linear-gradient(90deg, rgba(25,38,54,.86) 0%, rgba(25,38,54,.3) 62%, rgba(25,38,54,.5) 100%);
}

.voile--dense { background: linear-gradient(180deg, rgba(25,38,54,.88) 0%, rgba(25,38,54,.8) 50%, rgba(25,38,54,.95) 100%); }

/* Sur fond clair, un simple voile blanc pour garder le texte lisible. */
.voile--clair {
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 58%, rgba(255,255,255,.66) 100%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,.7) 100%);
}

/* --- Blocs sombres -------------------------------------------------------- */

.sombre { color: var(--texte-nuit); }
.sombre .titre-section, .sombre h1, .sombre h2, .sombre h3 { color: #fff; }
.sombre .intro, .sombre p { color: var(--gris-nuit); }
.sombre .libelle { color: #BBD0E2; }

/* --- Accueil -------------------------------------------------------------- */

.heros {
  position: relative; overflow: hidden;
  min-height: min(46rem, 100svh);
  display: grid; align-items: center;
  padding-block: 9rem 6rem;
}

.heros__contenu { position: relative; z-index: 3; }

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem 1rem; margin-bottom: 1.75rem;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  font-size: var(--t-sm); color: #fff;
}

.badge svg { width: 1rem; height: 1rem; color: #BBD0E2; flex: none; }

.heros__titre {
  font-size: var(--t-3xl); font-weight: 600;
  line-height: 1.06; letter-spacing: -.018em;
  color: #fff; margin: 0 0 1.4rem; max-width: 15ch; text-wrap: balance;
}

.heros__titre span { color: #BBD0E2; }

.heros__texte {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  color: var(--gris-nuit); max-width: 44ch; margin: 0 0 2.25rem;
}

.heros__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.defilement {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 3; width: 1.5rem; height: 2.5rem;
  border: 2px solid rgba(255,255,255,.3); border-radius: 99px;
  display: grid; justify-items: center; padding-top: .42rem;
}

.defilement::after { content: ''; width: .26rem; height: .26rem; border-radius: 50%; background: #BBD0E2; }

@media (prefers-reduced-motion: no-preference) {
  .defilement::after { animation: glisse 1.9s ease-in-out infinite; }
}

@keyframes glisse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(.7rem); opacity: .25; }
}

/* Bandeau des pages intérieures */
.banniere {
  position: relative; overflow: hidden;
  padding-block: clamp(8rem, 15vw, 10.5rem) clamp(3rem, 6vw, 4.5rem);
}

.banniere__contenu { position: relative; z-index: 3; }

.banniere h1 {
  font-size: clamp(2.125rem, 5.5vw, 3.5rem); font-weight: 600;
  line-height: 1.08; letter-spacing: -.015em;
  color: #fff; margin: 0; max-width: 17ch;
}

.banniere h1 span { color: #BBD0E2; }

.banniere p { font-size: var(--t-md); color: var(--gris-nuit); max-width: 48ch; margin: 1rem 0 0; }

/* --- Volets (services) ---------------------------------------------------- */

.volets { display: grid; gap: 1.5rem; }

@media (min-width: 54rem) { .volets { grid-template-columns: 1fr 1fr; } }

.volet {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--filet);
  isolation: isolate;
}

.volet__corps { position: relative; z-index: 3; }

.volet__cible {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--bleu-clair); margin: 0 0 .7rem;
}

.volet h3 {
  font-size: var(--t-xl); font-weight: 600; line-height: 1.16;
  letter-spacing: -.02em; color: var(--encre); margin: 0 0 .85rem;
}

.volet > .volet__corps > p { color: var(--gris); margin: 0 0 1.5rem; max-width: 40ch; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  color: var(--bleu);
  padding-bottom: .28rem; border-bottom: 1px solid var(--bleu);
  transition: gap .18s;
}

.lien-fleche:hover { gap: .85rem; }
.lien-fleche svg { width: .95em; height: .95em; flex: none; }

/* --- Listes --------------------------------------------------------------- */

.points { list-style: none; margin: 0 0 1.75rem; padding: 0; }

.points li {
  position: relative; padding: .7rem 0 .7rem 1.5rem;
  border-top: 1px solid var(--filet);
  font-size: var(--t-sm);
}

.points li:last-child { border-bottom: 1px solid var(--filet); }

.points li::before {
  content: ''; position: absolute; left: 0; top: 1.25rem;
  width: .55rem; height: 1px; background: var(--bleu-clair);
}

.sombre .points li { border-color: var(--filet-nuit); }

/* --- Méthode -------------------------------------------------------------- */

.bande { position: relative; overflow: hidden; padding-block: var(--rythme); }
.bande > .enveloppe { position: relative; z-index: 3; }

.etapes { border-top: 1px solid var(--filet); }
.sombre .etapes { border-color: var(--filet-nuit); }

.etape {
  display: grid; gap: .45rem 2.5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--filet);
  align-items: baseline;
}

.sombre .etape { border-color: var(--filet-nuit); }

@media (min-width: 52rem) {
  .etape { grid-template-columns: 4rem 15rem 1fr; }
}

.etape__rang {
  font-size: var(--t-md); font-weight: 600;
  color: var(--bleu-clair); font-variant-numeric: tabular-nums;
}

.sombre .etape__rang { color: #BBD0E2; }

.etape h3 { font-size: var(--t-md); font-weight: 600; margin: 0; line-height: 1.3; }
.etape p { margin: 0; font-size: var(--t-sm); max-width: 58ch; }

/* --- Tarifs --------------------------------------------------------------- */

.tarifs-defilement { overflow-x: auto; }

.tarifs { width: 100%; min-width: 46rem; border-collapse: collapse; text-align: left; }

.tarifs th, .tarifs td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top; font-size: var(--t-sm);
}

.tarifs thead th { vertical-align: bottom; border-bottom: 1px solid var(--filet-2); }
.tarifs thead th:first-of-type { width: 16rem; }

.tarifs .colonne-phare { background: var(--bleu-pale); }

.tarifs__nom {
  display: block; font-size: var(--t-md); font-weight: 600;
  letter-spacing: -.015em; color: var(--encre); margin-bottom: .18rem;
}

.tarifs__note { display: block; font-weight: 400; color: var(--gris-2); }

.tarifs__prix {
  display: block; margin-top: 1rem;
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.03em;
  line-height: 1; color: var(--encre);
}

.tarifs__prix small { font-size: var(--t-sm); font-weight: 400; color: var(--gris); letter-spacing: 0; }

.tarifs__ruban {
  display: inline-block; margin-bottom: .55rem;
  padding: .18rem .6rem; background: var(--bleu); color: #fff;
  font-size: var(--t-xs); font-weight: 700;
}

.tarifs tbody th { font-weight: 500; color: var(--gris); }
.tarifs .oui { color: var(--bleu); font-weight: 600; }
.tarifs .non { color: var(--gris-2); }
.tarifs tfoot td { border-bottom: 0; padding-top: 1.5rem; }

.note-devis { margin-top: 1.75rem; font-size: var(--t-sm); color: var(--gris); }
.note-devis a { color: var(--bleu); font-weight: 600; }

/* --- Parcours ------------------------------------------------------------- */

.parcours { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

@media (min-width: 58rem) { .parcours { grid-template-columns: auto 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); } }

/* Portrait rond, avec un anneau discret et un cercle décalé en arrière-plan
   qui reprend le geste du logo. */
.portrait {
  position: relative;
  width: min(17rem, 68vw);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-inline: auto;
}

.portrait .visuel {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--filet-2), 0 18px 40px -22px rgba(46, 68, 89, .55);
}

/* Anneau décalé, en écho au cercle du logo */
.portrait::before {
  content: '';
  position: absolute; inset: -1.15rem;
  border-radius: 50%;
  border: 1px solid var(--filet-2);
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(-20deg);
}

@media (min-width: 58rem) {
  .portrait { margin-inline: 0; }
}

.parcours p { color: var(--gris); max-width: 62ch; margin: 0; }
.parcours p + p { margin-top: 1rem; }

.jalons { margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--filet); }

.jalon {
  display: grid; gap: .2rem 2rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-sm);
}

@media (min-width: 34rem) { .jalon { grid-template-columns: 9rem 1fr; } }

.jalon dt {
  color: var(--bleu-clair); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  padding-top: .18rem;
}

.jalon dd { margin: 0; color: var(--encre); }

/* --- Rendez-vous ---------------------------------------------------------- */

.rdv__zone { border: 1px solid var(--filet); background: var(--papier); overflow: hidden; }

.consentement {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  padding: clamp(2rem, 5vw, 3.25rem); max-width: 48rem;
}

.consentement__icone {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: var(--bleu-pale); color: var(--bleu);
}

.consentement__icone svg { width: 1.4rem; height: 1.4rem; }
.consentement h2 { font-size: var(--t-lg); font-weight: 600; margin: 0; letter-spacing: -.015em; }
.consentement p { margin: 0; font-size: var(--t-sm); color: var(--gris); }
.consentement a:not(.bouton) { color: var(--bleu); }

.rdv__repli { margin-top: 1.15rem; font-size: var(--t-sm); color: var(--gris); }
.rdv__repli a { color: var(--bleu); font-weight: 600; }

/* --- Contact -------------------------------------------------------------- */

.contacts { display: grid; gap: 1.25rem; margin: 0; }

@media (min-width: 48rem) { .contacts { grid-template-columns: repeat(3, 1fr); } }

.contact {
  display: block; text-decoration: none;
  border: 1px solid var(--filet);
  background: var(--papier);
  padding: 1.6rem;
  transition: border-color .2s, background .2s;
}

a.contact:hover { border-color: var(--bleu); background: var(--creme); }

.contact__icone {
  display: grid; place-items: center; margin-bottom: 1rem;
  width: 2.5rem; height: 2.5rem;
  background: var(--bleu-pale); color: var(--bleu);
}

.contact__icone svg { width: 1.15rem; height: 1.15rem; }

.contact dt {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-2); font-weight: 700; margin-bottom: .4rem;
}

.contact dd { margin: 0; font-size: var(--t-md); font-weight: 600; color: var(--encre); letter-spacing: -.01em; }

/* --- Appel final ---------------------------------------------------------- */

.appel { position: relative; overflow: hidden; }

.appel__contenu {
  position: relative; z-index: 3;
  display: grid; gap: 1.75rem; align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}

@media (min-width: 54rem) { .appel__contenu { grid-template-columns: 1fr auto; } }

.appel h2 {
  font-size: var(--t-2xl); font-weight: 600;
  letter-spacing: -.014em; line-height: 1.12; color: #fff;
  margin: 0 0 .8rem; max-width: 17ch;
}

.appel p { color: var(--gris-nuit); max-width: 46ch; margin: 0; }

/* --- Pied de page --------------------------------------------------------- */

.pied {
  background: var(--creme);
  border-top: 1px solid var(--filet);
  padding-block: 2.75rem 1.75rem;
  font-size: var(--t-sm); color: var(--gris);
}

.pied .logo__nom { color: var(--encre); }
.pied .logo__nom small { color: var(--gris-2); }

.pied__haut {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  justify-content: space-between; align-items: center;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--filet);
}

.pied__liens { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pied__liens a { text-decoration: none; }
.pied__liens a:hover { color: var(--encre); }

.pied__bas {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  justify-content: space-between; padding-top: 1.2rem;
  font-size: var(--t-xs); color: var(--gris-2);
}

/* --- Pages de texte ------------------------------------------------------- */

.page-texte { padding-block: 0 0; max-width: 46rem; }

.page-texte h2 {
  font-size: var(--t-md); font-weight: 600; color: var(--encre);
  margin: 2.25rem 0 .6rem; padding-top: 1.15rem;
  border-top: 1px solid var(--filet);
}

.page-texte p, .page-texte li { color: var(--gris); }
.page-texte a { color: var(--bleu); }
.page-texte ul { padding-left: 1.2rem; }

/* Champ à compléter : discret, sans effet sur la mise en page. */
.a-remplir { color: var(--bleu); border-bottom: 1px dotted var(--bleu-clair); }
.sombre .a-remplir, .banniere .a-remplir { color: #BBD0E2; border-bottom-color: #BBD0E2; }

/* --- Apparition au défilement --------------------------------------------- */

/* Le contenu n'est masqué que si le script a confirmé qu'il prend en charge
   les apparitions. Sans JS, ou en mouvement réduit, tout reste visible. */
@media (prefers-reduced-motion: no-preference) {
  html.anime .monte { opacity: 0; transform: translateY(16px); }

  html.anime .monte.vu {
    opacity: 1; transform: none;
    transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
  }

  html.anime .monte:nth-child(2).vu { transition-delay: .07s; }
  html.anime .monte:nth-child(3).vu { transition-delay: .14s; }
  html.anime .monte:nth-child(4).vu { transition-delay: .21s; }
}

/* --- Bandeau cookies ------------------------------------------------------
   Refuser est au même niveau qu'accepter, comme l'exige la CNIL.
   Le bandeau ne masque pas le contenu : il se pose en bas de l'écran.
   -------------------------------------------------------------------------- */

.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--papier);
  border-top: 1px solid var(--filet-2);
  box-shadow: 0 -12px 32px -18px rgba(14, 26, 43, .35);
  transform: translateY(105%);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.cookies--visible { transform: none; }

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

.cookies__interieur {
  width: 100%; max-width: var(--max);
  margin-inline: auto;
  padding: 1.25rem clamp(1.25rem, 5vw, 3rem);
  display: grid; gap: 1.1rem; align-items: center;
}

@media (min-width: 56rem) {
  .cookies__interieur { grid-template-columns: 1fr auto; gap: 2.5rem; }
}

.cookies__texte strong {
  display: block; font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu); margin-bottom: .4rem;
}

.cookies__texte p {
  margin: 0; font-size: var(--t-sm); color: var(--gris);
  max-width: 70ch; line-height: 1.55;
}

.cookies__texte a { color: var(--bleu); font-weight: 600; }

.cookies__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.cookies__actions .bouton { flex: 1 1 auto; min-width: 9rem; }

@media (min-width: 56rem) {
  .cookies__actions .bouton { flex: 0 0 auto; }
}

/* Actions du bloc de repli, quand les cookies sont refusés */
.consentement__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.consentement a[data-gerer-cookies] { font-size: var(--t-sm); color: var(--bleu); }

/* Tableau des cookies, page confidentialité */
.tableau-cookies {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: var(--t-sm);
}

.tableau-cookies th, .tableau-cookies td {
  padding: .8rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--filet);
}

.tableau-cookies thead th {
  color: var(--encre); font-weight: 600;
  border-bottom-color: var(--filet-2);
}

.tableau-cookies td { color: var(--gris); }

/* --- Bloc tarif d'une offre ----------------------------------------------- */

.offre-pied {
  display: grid; gap: 1.5rem; align-items: center;
  margin-top: 2.5rem; padding: 1.75rem 0;
  border-top: 1px solid var(--filet-2);
  border-bottom: 1px solid var(--filet-2);
}

@media (min-width: 58rem) {
  .offre-pied { grid-template-columns: auto 1fr auto; gap: 3rem; }
}

.offre-prix strong {
  display: block;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  font-weight: 600; letter-spacing: -.012em; line-height: 1;
  color: var(--encre);
}

.offre-prix strong small {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-sm); font-weight: 400; color: var(--gris);
  letter-spacing: 0;
}

.offre-prix > span {
  display: block; margin-top: .5rem;
  font-size: var(--t-sm); color: var(--gris); max-width: 32ch;
}

.offre-option {
  padding-left: 1.5rem;
  border-left: 2px solid var(--bleu-clair);
}

.offre-option__titre {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu-clair); margin-bottom: .35rem;
}

.offre-option p { margin: 0; font-size: var(--t-sm); color: var(--gris); }

/* Sans bloc « option », la grille n'a que deux colonnes : sans cette règle,
   le bouton s'étirerait sur toute la largeur restante. */
.offre-pied > .bouton { justify-self: end; }
.offre-option strong { color: var(--encre); }

@media (max-width: 57.99rem) {
  .offre-option { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 1.25rem; }
  .offre-pied .bouton { justify-self: start; }
}

/* --- Encart d'information -------------------------------------------------- */

.encart {
  margin-top: 2rem; padding: 1.4rem 1.6rem;
  background: var(--creme-2);
  border-left: 3px solid var(--bleu-clair);
  font-size: var(--t-sm); color: var(--gris); line-height: 1.6;
}

.encart strong { color: var(--encre); }

/* Les listes détaillées des offres supportent des lignes plus longues */
.points li strong { color: var(--encre); font-weight: 600; }


/* --- Avis clients ---------------------------------------------------------- */

/* Les colonnes s'adaptent au nombre d'avis : une carte seule occupe une
   largeur lisible au lieu d'un tiers de page avec du vide à côté. */
.avis {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 26rem));
}

.avis__carte {
  background: var(--papier);
  border: 1px solid var(--filet);
  padding: 1.75rem;
  display: flex; flex-direction: column;
}

.avis__texte {
  font-family: 'Lora', Georgia, serif;
  font-size: var(--t-md); line-height: 1.6;
  color: var(--encre); margin: 0 0 1.5rem;
  quotes: '\00AB\00A0' '\00A0\00BB';
}

.avis__texte::before { content: open-quote; color: var(--bleu-clair); }
.avis__texte::after  { content: close-quote; color: var(--bleu-clair); }

.avis__signature {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--filet);
  font-size: var(--t-sm);
}

.avis__nom { display: block; font-weight: 600; color: var(--encre); }

.avis__meta {
  display: block; margin-top: .2rem;
  color: var(--gris-2); font-size: var(--t-xs);
}

.avis__mention {
  margin-top: 1.75rem;
  font-size: var(--t-xs); color: var(--gris-2);
  max-width: 76ch; line-height: 1.6;
}

/* --- Lien vers le profil LinkedIn ----------------------------------------- */

.reseau {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--gris);
  transition: color .15s;
}

.reseau:hover { color: var(--bleu); }

.reseau svg {
  width: 1.05rem; height: 1.05rem; flex: none;
  color: var(--bleu-clair);
  transition: color .15s;
}

.reseau:hover svg { color: var(--bleu); }