/* ==========================================================================
   BETHA-Conseil — Feuille de styles principale

   Charte arrêtée par la cliente : sobriété, fonds pâles, pas d'images de fond.
   Couleurs et pictogrammes viennent du kit graphique validé pour l'accueil
   (originaux/kit-accueil) : bleu #123E8A, orange #FF7425, crème #FBF5ED.
   Titres en Libre Baskerville, texte en Karla : le contraste serif /
   sans-serif que le guide demande de conserver.

   La chaleur ne vient donc plus des fonds mais de la typographie et des
   accents ; les surfaces, elles, restent claires et calmes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette du kit graphique validé pour l'accueil (guide de passation,
     originaux/kit-accueil). Elle remplace les quatre couleurs du logo
     données plus tôt : c'est la charte de la maquette approuvée.

     L'orange du kit (#FF7425) plafonne à 2,5:1 sur le crème : il ne porte
     que des aplats, des filets et des pictogrammes. Deux versions assombries
     de la même teinte prennent le relais dès qu'il y a du texte :
       --corail-600 pour les grands titres (3,3:1 minimum, seuil 3:1)
       --corail-700 pour le texte courant (4,7:1 minimum, seuil 4,5:1) */
  --corail-500: #ff7425;
  --corail-600: #e05c0e;
  --corail-700: #b2460a;
  --corail-300: #ffb07c;
  --corail-100: #fff0e4;

  /* Crème de fond #FBF5ED ; les cartes sont blanches, comme le guide les
     liste. Les deux crèmes plus soutenus sont dérivés, pour les sections
     alternées et les filets. */
  --creme-50: #ffffff;
  --creme-100: #fbf5ed;
  --creme-200: #f5ebdd;
  --creme-300: #eadcc9;

  /* Bleu principal #123E8A pour les titres (9,3:1), bleu des pictogrammes
     #0D47C8 pour les liens et surtitres (7:1). */
  --bleu-900: #123e8a;
  --bleu-700: #0d47c8;
  --bleu-500: #3a6ad6;
  --bleu-100: #e8f0ff;

  /* Jaune du logo : absent du kit, gardé pour d'éventuels filets. */
  --jaune-500: #f8c010;
  --jaune-100: #fdf3d2;

  /* Vert — uniquement pour l'état « message envoyé » */
  --vert-400: #5f7d6a;
  --vert-100: #e6ede8;

  /* Textes : anthracite et secondaire du guide, tous deux chauds. */
  --encre: #252321;
  --encre-700: #252321;
  --encre-500: #5e5955;
  --blanc: #ffffff;

  /* Sémantique */
  --bg: var(--creme-100);
  --bg-alt: var(--creme-200);
  --text: var(--encre-700);
  --heading: var(--bleu-900);
  --accent: var(--corail-700);

  /* Typographie */
  --font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Manuscrite, réservée aux signatures des bandeaux. */
  --font-main: "Caveat", "Segoe Script", cursive;

  /* Échelle typographique fluide. Libre Baskerville a une hauteur d'x large :
     à corps égal elle paraît nettement plus grosse que Fraunces, d'où des
     paliers de titre revus à la baisse. */
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.93rem);
  --step-0: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.14rem, 1.08rem + 0.3vw, 1.32rem);
  --step-2: clamp(1.34rem, 1.24rem + 0.5vw, 1.66rem);
  --step-3: clamp(1.56rem, 1.4rem + 0.8vw, 2.05rem);
  /* Les deux plus grands paliers descendent plus bas qu'avant sur petit
     écran : à 320 px, le titre de la page stratégique tenait sur cinq lignes. */
  /* « Aligner la police sur les autres titres : moins grand » (améliorations
     finales) : les titres de section et des pages internes descendent d'un
     cran. Seul le titre de l'accueil garde le grand palier. */
  --step-4: clamp(1.5rem, 1.28rem + 1vw, 2.15rem);
  --step-5: clamp(1.85rem, 1.3rem + 2.6vw, 3.3rem);

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  /* Espacements fluides. --space-xl était fixe à 80 px : les sections dites
     « serrées » se retrouvaient plus aérées que les autres sur mobile. */
  --space-lg: clamp(2rem, 1.5rem + 2vw, 3rem);
  --space-xl: clamp(3rem, 2rem + 4vw, 5rem);
  --space-2xl: clamp(3.25rem, 8vw, 8rem);

  /* Formes régulières : les angles asymétriques d'avant tiraient vers le
     dessiné à la main, à rebours de la sobriété demandée. */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-round: 999px;
  --blob: 50%;

  /* « Éviter les ombres fortes et les effets 3D » (guide) : des ombres à
     peine perceptibles, teintées de l'anthracite chaud. Les cartes blanches
     sur crème se détachent déjà d'elles-mêmes. */
  --shadow-sm: 0 1px 2px rgb(37 35 33 / 4%), 0 2px 8px rgb(37 35 33 / 3%);
  --shadow: 0 1px 3px rgb(37 35 33 / 5%), 0 6px 18px rgb(37 35 33 / 5%);
  --shadow-lg: 0 2px 6px rgb(37 35 33 / 5%), 0 12px 30px rgb(37 35 33 / 7%);

  --container: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset et bases
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le grain de papier qui couvrait la page a sauté : « si les images de fond
   alourdissent, on oublie ». Sur un crème aussi pâle, il ne se voyait guère
   mais recouvrait chaque pixel d'un SVG en position fixe. */

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

h1,
h2,
h3,
h4 {
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

h3,
h4 { text-wrap: pretty; }

p {
  text-wrap: pretty;
}

a {
  color: var(--bleu-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--corail-700);
}

ul,
ol {
  padding-left: 1.25rem;
}

:focus-visible {
  outline: 3px solid var(--corail-600);
  outline-offset: 3px;
  border-radius: 4px;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--bg-alt); }

/* Ce pavé a été sombre — brun, puis bleu. La cliente n'en veut plus : « enlève
   ces gros blocs de fond couleur bleu ». Il se démarque désormais par une
   pêche très diluée, dans la lignée des fonds pâles demandés. Le nom de la
   classe est conservé : il désigne la section qui tranche, pas sa couleur. */
.section--sombre {
  /* La branche de la signature déborde volontairement : sans rognage, elle
     provoque un défilement horizontal sur mobile. */
  overflow: hidden;
  background: var(--corail-100);
}

.section--sombre .section__head h2 { color: var(--bleu-900); }

.section--sombre .section__head .eyebrow { color: var(--corail-700); }

.section--sombre .section__head .lead { color: var(--encre-700); }
.section--tight { padding-block: var(--space-xl); }

/* Pages de prestation : un tiers d'espace en moins entre les blocs, à la
   demande de la cliente — le catalogue arrivait trop bas. */
.section--resserree { padding-block: clamp(2.2rem, 5.3vw, 5.3rem); }
.section--tight.section--resserree { padding-block: clamp(2rem, 1.35rem + 2.7vw, 3.3rem); }
.page-hero + .section--resserree { padding-top: clamp(1.5rem, 3.5vw, 3rem); }

.section__head {
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Surtitre : un trait tracé à la main plutôt qu'une barre géométrique. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-sm);
  color: var(--bleu-700);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Le surtitre « À propos » porte ses deux traits, comme dans la maquette. */
.eyebrow::before,
.section__head--center .eyebrow::after,
.apropos__texte .eyebrow::after {
  content: "";
  width: 1.9rem;
  height: 6px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6'%3E%3Cpath d='M1 4c6-3 12 1 18-1s12-2 20 1' fill='none' stroke='%23ff7425' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lead {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--encre-500);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--encre);
  color: var(--creme-50);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--creme-50);
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.92rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}


/* L'orange du kit en aplat, avec du texte anthracite (5,8:1) : en blanc il
   tomberait à 2,7:1. Plus d'ombre colorée — le guide écarte les ombres
   fortes. */
.btn--primary {
  background: var(--corail-500);
  color: var(--encre);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--corail-300);
  color: var(--encre);
}

.btn--ghost {
  background: transparent;
  border-color: var(--creme-300);
  color: var(--encre);
}

.btn--ghost:hover {
  border-color: var(--corail-500);
  background: var(--creme-100);
  color: var(--corail-700);
}

.btn--light {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 38%);
  color: var(--blanc);
}

.btn--light:hover {
  background: rgb(255 255 255 / 24%);
  color: var(--blanc);
}

.btn__icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(251 245 237 / 86%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--creme-200);
  box-shadow: var(--shadow-sm);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--encre);
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* La marque est plus haute que large : on fixe la hauteur et on laisse la
   largeur suivre, sinon le β se trouve écrasé. */
.brand__mark {
  width: auto;
  height: 2.4rem;
  flex: none;
}

/* La variante du pied de page est un macaron, donc carrée. */
.site-footer .brand__mark {
  width: 2.4rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  padding-block: 0.4rem;
  color: var(--encre-700);
  font-size: var(--step--1);
  font-weight: 400;
  text-decoration: none;
}

/* Soulignement tracé, pas une barre pleine. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 5' preserveAspectRatio='none'%3E%3Cpath d='M1 3.2c10-2.4 22-2.4 32-.8s18 .6 26-.9' fill='none' stroke='%23ff7425' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.nav__link:hover { color: var(--encre); }

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link[aria-current="page"] {
  color: var(--bleu-700);
  font-weight: 700;
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--creme-300);
  border-radius: 14px 14px 14px 4px;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex;
    position: relative;
  }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md) 1.25rem var(--space-lg);
    background: var(--creme-50);
    border-bottom: 1px solid var(--creme-200);
    box-shadow: var(--shadow);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0.35s;
  }

  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--creme-200);
    font-size: var(--step-0);
  }

  .nav__link::after { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--space-xl);
  /* Crème uni, comme le veut le guide : les halos d'avant noyaient la bulle
     de la signature, qui porte seule la couleur du bandeau. */
  background: var(--creme-100);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.6fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.hero__title {
  margin-bottom: var(--space-md);
  font-size: var(--step-5);
  line-height: 1.1;
}

/* Le mot mis en avant est souligné d'un trait dessiné, pas coloré à plat. */
.hero__title em {
  position: relative;
  font-style: italic;
  color: var(--corail-600);
  white-space: nowrap;
}

.hero__title em::after {
  content: "";
  position: absolute;
  left: 40%;
  right: -0.1em;
  bottom: -0.16em;
  height: 0.22em;
  background: no-repeat center / 100% 100% url("/assets/img/trait-orange.svg");
}

/* Texte plus long que l'ancien : en romain, seuls les passages clés en gras,
   comme sur la maquette. */
.hero__text {
  max-width: 40rem;
  margin-bottom: var(--space-md);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  line-height: 1.65;
  color: var(--encre);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Visuel légèrement pivoté : une photo posée, pas un bloc aligné au pixel. */
/* Le bandeau ne porte plus de photo mais la signature manuscrite de la
   maquette : une phrase posée sur une bulle pâle, avec une branche en trait. */
.hero__visual {
  display: grid;
  justify-items: end;
}

.hero__visual .signature { width: min(100%, 17rem); padding: 2rem; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { justify-items: center; }
}

/* ---- Signature manuscrite, commune à tous les bandeaux ---- */
.signature {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-sm);
  width: min(100%, 26rem);
  aspect-ratio: 1;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

/* La bulle est un pseudo-élément : elle ne doit pas rogner la branche, qui
   déborde volontairement. */
.signature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--corail-100);
  border-radius: 62% 38% 44% 56% / 52% 48% 52% 48%;
}

/* Les enfants doivent passer au-dessus de la bulle : celle-ci est en position
   absolue, elle se peindrait sinon par-dessus le texte. */
.signature > :not(.signature__branche) {
  position: relative;
  z-index: 1;
}

.signature__branche {
  position: absolute;
  top: -16%;
  right: -20%;
  width: min(58%, 330px);
  height: auto;
  opacity: 0.72;
  pointer-events: none;
}

@media (max-width: 900px) {
  .signature__branche { opacity: 0.28; width: min(48%, 260px); }
}

.signature__texte {
  max-width: 14em;
  color: var(--bleu-900);
  font-family: var(--font-main);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  transform: rotate(-3deg);
}

/* Soulignement au trait, comme le mot mis en avant du titre. */
.signature__texte::after {
  content: "";
  display: block;
  width: 62%;
  height: 0.5rem;
  margin: 0.35rem auto 0;
  background: no-repeat center / 100% 100% url("/assets/img/trait-orange.svg");
}

.signature__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bleu-700);
  font-family: var(--font-main);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
  font-weight: 600;
  line-height: 1.5;
  transform: rotate(-3deg);
}

/* Page VAE : la bulle et, dessous, les trois mots décalés à droite, hors de
   la bulle et soulignés de leur propre trait — la disposition de la maquette. */
.signature-bloc {
  display: grid;
  justify-items: end;
}

.signature-bloc .signature__liste {
  margin: -1.5rem 0.5rem 0 0;
  text-align: right;
  transform: rotate(-5deg);
}

.signature-bloc .signature__liste::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 0.45rem;
  margin: 0.2rem 0 0 auto;
  background: no-repeat center / 100% 100% url("/assets/img/trait-orange.svg");
}

.page-hero__grille .signature-bloc { justify-self: end; }

@media (max-width: 62rem) {
  .page-hero__grille .signature-bloc { justify-self: center; }
}

/* Bandeaux des pages internes : deux colonnes, signature à droite. */
.page-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.45fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.page-hero__grille .signature {
  justify-self: end;
  width: min(100%, 15rem);
  padding: 1.75rem;
}

@media (max-width: 62rem) {
  .page-hero__grille { grid-template-columns: 1fr; }
  /* Sur mobile la signature est ornementale : elle passe après le propos. */
  .page-hero__grille .signature { justify-self: center; }
}
/* --------------------------------------------------------------------------
   7. Secteurs d'intervention
   -------------------------------------------------------------------------- */
/* Guide : cinq éléments sur une ligne en desktop, deux sur tablette, un sur
   mobile. */
.sectors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.75rem;
}

@media (max-width: 900px) {
  .sectors { grid-template-columns: repeat(2, 1fr); }
}

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

/* Plus de cartes bordées : l'icône respire directement sur le fond. */
.sector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: var(--space-md) var(--space-sm);
  background: transparent;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}

.sector:hover { background: var(--creme-200); }

/* Disque de 72 px, pictogramme de 42 px : les cotes du guide. */
.sector__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-round);
}

.sector__icon--peche { background: var(--corail-100); }
.sector__icon--bleu { background: var(--bleu-100); }

.sector__icon img { width: 2.625rem; height: 2.625rem; }



.sector__name {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.3;
  color: var(--encre);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   8. Cartes de la page Prestations
   -------------------------------------------------------------------------- */

/* Accroche : une ligne colorée sous le titre. L'orange du logo ne plafonne
   qu'à 2,3:1 sur fond clair — inutilisable en texte. --corail-700 garde la
   même famille chromatique en restant lisible (5,9:1). */
.prestation__tagline {
  margin-top: 0.7rem;
  margin-bottom: 0.6rem;
  color: var(--corail-700);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.4;
}

.service__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--corail-700);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}

.service__link svg {
  width: 1em;
  height: 1em;
  transition: transform 0.25s var(--ease);
}

.service__link:hover svg { transform: translateX(4px); }

/* Intertitre centré, en orange, avec ses deux traits : « Trois types de
   prestations ». */
.services__intertitre { margin-bottom: var(--space-lg); }
.services__intertitre .eyebrow { color: var(--corail-700); }
.services__intertitre .lead { color: var(--encre-700); }

/* La section est pêche : la bulle de même teinte y disparaîtrait. */
.section--sombre .signature::before { background: #ffe0c8; }

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-md);
}

.service {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--creme-50);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease);
}

.service:hover { box-shadow: var(--shadow); }

/* En-tête de carte : l'icône à gauche, le titre et l'accroche à côté. */
.service__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.service__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--corail-100);
  border-radius: var(--radius-round);
  color: var(--corail-700);
}

/* Alternance pêche / bleu de la maquette. */
.service__icon--bleu {
  background: var(--bleu-100);
  color: var(--bleu-700);
}

.service__icon svg { width: 1.6rem; height: 1.6rem; }

.service__title {
  margin-bottom: 0.35rem;
  font-size: var(--step-1);
}

.service__tagline {
  color: var(--corail-700);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* Le résumé, plus grand et centré, comme le lien qui ferme la carte. */
.service__text {
  margin-bottom: var(--space-sm);
  color: var(--encre-700);
  font-size: var(--step-0);
  line-height: 1.55;
  text-align: center;
}

.service__list {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.service__list li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.6rem;
  color: var(--encre-500);
}

/* Puce en forme de petite coche tracée. */
.service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95rem;
  height: 0.95rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.8c1.6.6 2.9 1.8 3.8 3.2C7.8 8.6 9.8 5.8 13.2 3.4' fill='none' stroke='%23ff7425' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.service .service__link {
  align-self: center;
  text-align: center;
}

/* Mot mis en avant d'un titre : italique corail. Le trait ne souligne que
   « sens », à la demande de la cliente. */
.titre-accent em {
  font-style: italic;
  color: var(--corail-600);
}

.titre-accent__trait {
  position: relative;
  white-space: nowrap;
}

.titre-accent__trait::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.18em;
  height: 0.22em;
  background: no-repeat center / 100% 100% url("/assets/img/trait-orange.svg");
}

/* ---- Citation et appel, sous les cartes ----
   Plus de rectangle : une bande pleine largeur dont le bord supérieur ondule,
   comme sur l'exemple de la maquette. */
.temoignage {
  position: relative;
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
  background: var(--bleu-100);
}

.temoignage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(1.5rem, 3vw, 2.5rem);
  background: no-repeat center bottom / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 36C220 4 470 2 720 26s500 34 720 6V60H0z' fill='%23e8f0ff'/%3E%3C/svg%3E");
}

.temoignage__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.temoignage__citation {
  position: relative;
  margin: 0;
  padding-left: clamp(2.75rem, 5vw, 4rem);
}

/* Les grands guillemets de la maquette, en pur décor. */
.temoignage__citation::before {
  content: "“";
  position: absolute;
  top: -0.3em;
  left: 0;
  color: #b9c9ef;
  font-family: var(--font-heading);
  font-size: clamp(3.75rem, 6vw, 5rem);
  line-height: 1;
}

.temoignage__citation blockquote { margin: 0; }

.temoignage__citation p {
  color: var(--encre);
  font-size: var(--step-0);
  font-style: italic;
  line-height: 1.6;
}

.temoignage__citation figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-sm);
  color: var(--encre-500);
  font-size: var(--step--1);
}

.temoignage__citation figcaption::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--corail-500);
}

.temoignage__appel {
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid #c9d7f5;
}

.temoignage__appel .eyebrow { margin-bottom: 0.4rem; }
.temoignage__appel .eyebrow::before { display: none; }

.temoignage__titre {
  margin-bottom: var(--space-sm);
  font-size: var(--step-2);
}

@media (max-width: 52rem) {
  .temoignage__inner { grid-template-columns: 1fr; }
  .temoignage__appel {
    padding: var(--space-md) 0 0;
    border-left: 0;
    border-top: 1px solid #c9d7f5;
  }
}

/* --------------------------------------------------------------------------
   9. À propos
   -------------------------------------------------------------------------- */
.about__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

/* Portrait en forme organique : le premier signal « humain » de la page. */
.about__portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--blob);
  background: linear-gradient(160deg, var(--corail-100), var(--bleu-100));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__name { margin-bottom: 0.25rem; }

.about__role {
  display: block;
  margin-bottom: var(--space-md);
  color: var(--corail-700);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.about__text > p + p { margin-top: var(--space-sm); }

.about__creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
}

.about__creds li {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 1.15rem;
  background: var(--creme-100);
  border: 0;
  border-left: 3px solid var(--corail-300);
  border-radius: 4px 14px 14px 4px;
  font-size: var(--step--1);
  color: var(--encre-700);
}

.about__creds li:nth-child(even) { border-left-color: var(--bleu-500); }

@media (max-width: 820px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__portrait { max-width: 20rem; }
}

/* --------------------------------------------------------------------------
   10. Appel à l'action
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  /* Fond pâle, comme partout ailleurs : plus d'aplat bleu. Ce qui distingue
     ce bloc du reste de la page n'est plus sa couleur mais son filet. */
  background: var(--creme-50);
  border: 1px solid var(--corail-300);
  color: var(--encre-700);
  text-align: center;
}

.cta h2 {
  margin-bottom: 0.6rem;
  color: var(--bleu-900);
  font-size: var(--step-2);
}

.cta p {
  max-width: 38rem;
  margin: 0 auto var(--space-md);
  font-size: var(--step-0);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Le bloc n'étant plus sombre, le bouton reprend l'orange ordinaire et le
   second passe en contour, comme dans la maquette. */
.cta .btn--light {
  background: transparent;
  border-color: var(--corail-300);
  color: var(--corail-700);
}

.cta .btn--light:hover {
  background: var(--corail-100);
  color: var(--corail-700);
}

/* --------------------------------------------------------------------------
   11. Bandeau des pages internes
   -------------------------------------------------------------------------- */
/* La branche de la signature déborde volontairement : sans rognage elle
   provoque un défilement horizontal sous 400 px. */
.page-hero {
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--creme-100);
}

.page-hero__inner { max-width: 46rem; }

/* Le chapô seulement : la même règle sur .page-hero rattrapait aussi le texte
   manuscrit de la bulle, qui passait en noir avec un interligne de paragraphe. */
.page-hero__inner p {
  margin-top: var(--space-sm);
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--encre-700);
}

/* Le surtitre reste un surtitre, pas un paragraphe de chapô. */
.page-hero .eyebrow {
  margin-top: 0;
  color: var(--bleu-700);
  font-size: var(--step--1);
  line-height: 1.4;
}

.breadcrumb {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--encre-500);
}

.breadcrumb a {
  color: var(--encre-500);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--corail-700);
  text-decoration: underline;
}

.breadcrumb li + li::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--creme-300);
}

/* --------------------------------------------------------------------------
   11 bis. Pages de détail d'une prestation
   -------------------------------------------------------------------------- */
/* Deux colonnes : le propos à gauche, les étapes à droite. Elles se
   superposent en dessous de 60rem, l'ordre du HTML étant déjà le bon. */
.prestation__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 62rem) {
  .prestation__grille { grid-template-columns: 1fr; }
}

.prestation__colonne { min-width: 0; }

/* La phrase que la cliente voulait « en orange » : la couleur ne suffisant
   pas à porter du sens, elle vient avec un filet. */
.prestation__chapeau {
  margin-top: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 3px solid var(--corail-500);
  color: var(--corail-700);
  font-size: var(--step-1);
  line-height: 1.45;
}

.etapes {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.etape {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--creme-50);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.etape__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--corail-100);
  border-radius: var(--radius-round);
  color: var(--corail-700);
}

.etape__icone svg { width: 1.5rem; height: 1.5rem; }

/* Un cran sous --step-1 : « Des modalités adaptées à votre organisation »
   tient ainsi sur une ligne, comme le demandait la cliente. */
.etape__titre {
  margin-bottom: 0.35rem;
  font-size: clamp(1.08rem, 1.02rem + 0.25vw, 1.2rem);
  text-wrap: wrap;
}

/* Parcours long : les étapes passent en grille pleine largeur. En dessous de
   deux colonnes, la file verticale reste lisible telle quelle. */
/* Colonnes imposées plutôt qu'auto-fit : à six étapes, le remplissage
   automatique donnait un rang de quatre puis un rang de deux. */
.etapes--grille {
  grid-template-columns: 1fr;
  margin-top: var(--space-lg);
  gap: var(--space-md);
}

@media (min-width: 40rem) {
  .etapes--grille { grid-template-columns: repeat(2, 1fr); }
}

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

.etapes--grille .etape {
  flex-direction: column;
  gap: var(--space-sm);
}

.etape__rang {
  color: var(--corail-700);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.prestation__chapeau--centre {
  max-width: 44rem;
  margin-inline: auto;
  border-left: 0;
  border-top: 3px solid var(--corail-500);
  padding: var(--space-sm) 0 0;
  text-align: center;
}

/* Phrase de synthèse, pleine largeur, entre deux sections. */
.bandeau {
  padding: var(--space-md) clamp(var(--space-md), 5vw, var(--space-lg));
  background: var(--bleu-100);
  border-radius: var(--radius-lg);
  color: var(--bleu-900);
  font-size: var(--step-1);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

/* Les quatre volets de l'accompagnement stratégique. */
.volets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-md);
}

.volet {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--creme-50);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.volet__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-sm);
  background: var(--bleu-100);
  border-radius: var(--radius-round);
  color: var(--bleu-700);
}

.volet__icone svg { width: 1.4rem; height: 1.4rem; }

.volet__titre {
  margin-bottom: 0.5rem;
  font-size: var(--step-1);
}

.volet__texte {
  margin-bottom: var(--space-sm);
  color: var(--encre-700);
}

.volet__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.volet__liste li {
  position: relative;
  margin-bottom: 0.45rem;
  padding-left: 1.5rem;
  color: var(--encre-500);
}

.volet__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.9rem;
  height: 0.9rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.8c1.6.6 2.9 1.8 3.8 3.2C7.8 8.6 9.8 5.8 13.2 3.4' fill='none' stroke='%23ff7425' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Encart de modalité — la VAE à distance. */
.encart {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bleu-100);
  border-radius: var(--radius);
  color: var(--bleu-900);
}

.encart__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--blanc);
  border-radius: var(--radius-round);
  color: var(--bleu-700);
}

.encart__icone svg { width: 1.35rem; height: 1.35rem; }

.encart__titre {
  font-size: var(--step-1);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.prestation__encarts {
  display: grid;
  gap: var(--space-md);
}

/* Côte à côte, les deux encarts prennent la même hauteur. */
.prestation__encarts--seuls {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: stretch;
}

@media (min-width: 52rem) {
  .prestation__encarts--seuls:has(.aside--qualiopi) {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.aside {
  padding: var(--space-md);
  background: var(--creme-50);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.aside h3 { margin-bottom: 0.6rem; }
.aside p { color: var(--encre-500); }
.aside .btn { margin-top: var(--space-sm); }

.aside--qualiopi {
  padding: 1.25rem;
  background: transparent;
  border: 1px solid var(--creme-300);
  box-shadow: none;
  font-size: var(--step--1);
}

.aside--qualiopi img {
  width: min(100%, 9rem);
  height: auto;
  margin-bottom: 0.6rem;
}

.aside--qualiopi h3 {
  margin-bottom: 0.35rem;
  font-size: var(--step-0);
}

.aside--qualiopi a {
  display: inline-block;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */
/* Plus de bandeau au-dessus : la page s'ouvre sur le formulaire. */
.section--contact { padding-top: var(--space-xl); }

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.contact-card {
  padding: var(--space-md);
  background: var(--creme-100);
  border: 0;
  border-radius: var(--radius);
}

.section--alt .contact-card { background: var(--creme-50); }

.contact-list {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  gap: 0.9rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--creme-200);
}

.contact-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.contact-list svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  margin-top: 0.3rem;
  color: var(--corail-600);
}

.contact-list span {
  display: block;
  font-size: var(--step--1);
  color: var(--encre-500);
}

.contact-list a,
.contact-list strong {
  color: var(--encre);
  font-weight: 700;
  text-decoration: none;
}

.contact-list a:hover {
  color: var(--corail-700);
  text-decoration: underline;
}

.form { display: grid; gap: var(--space-sm); }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.field { display: grid; gap: 0.4rem; }

.field label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--encre);
}

.field .req { color: var(--corail-700); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.82rem 1rem;
  background: var(--blanc);
  border: 1px solid var(--creme-300);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--encre);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--corail-500);
  box-shadow: 0 0 0 3px rgb(255 116 37 / 24%);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field__error {
  display: none;
  font-size: var(--step--1);
  color: #b3391f;
}

.field.has-error input,
.field.has-error textarea { border-color: #b3391f; }
.field.has-error .field__error { display: block; }

.form__consent {
  display: flex;
  align-items: start;
  gap: 0.65rem;
  font-size: var(--step--1);
  color: var(--encre-500);
}

.form__consent input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  flex: none;
  accent-color: var(--corail-600);
}

.form__status {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
}

.form__status.is-visible { display: block; }

.form__status--ok {
  background: var(--vert-100);
  color: #2f4a3a;
  border: 1px solid var(--vert-400);
}

.form__status--error {
  background: #fbeae5;
  color: #8f2d17;
  border: 1px solid #eab5a4;
}

@media (max-width: 820px) {
  .contact__inner { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13. Contenu rédactionnel (pages légales)
   -------------------------------------------------------------------------- */
.prose { max-width: 46rem; }

.prose h2 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: var(--step-2);
}

.prose h3 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  font-size: var(--step-1);
}

.prose p,
.prose ul { margin-bottom: var(--space-sm); }

.prose li { margin-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-xl) var(--space-md);
  background: var(--encre);
  color: rgb(251 245 237 / 66%);
  font-size: var(--step--1);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-lg) var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgb(251 245 237 / 14%);
}

/* Le logo Qualiopi doit rester sur fond blanc : c'est sa règle d'usage. */
.site-footer__qualiopi {
  display: block;
  max-width: 14rem;
  padding: 0.7rem 0.8rem;
  background: var(--blanc);
  border-radius: var(--radius-sm);
  transition: transform 0.25s var(--ease);
}

.site-footer__qualiopi:hover { opacity: 0.9; }

.site-footer__qualiopi img {
  width: 100%;
  height: auto;
}

.site-footer .brand { color: var(--creme-50); }

.site-footer__tagline {
  margin-top: var(--space-sm);
  max-width: 24rem;
}

.site-footer h4 {
  margin-bottom: var(--space-sm);
  color: var(--corail-300);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-footer ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: rgb(251 245 237 / 76%);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--corail-300);
  text-decoration: underline;
}

/* Bandeau réglementaire : mentions légales, CGV, Qualiopi, réclamations… */
.site-footer__legal {
  padding-top: var(--space-md);
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.84rem;
}

/* Indique le format pour que personne ne soit surpris par un téléchargement. */
.site-footer__format {
  padding: 0.1rem 0.35rem;
  border: 1px solid rgb(251 245 237 / 26%);
  border-radius: 4px;
  color: rgb(251 245 237 / 52%);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.site-footer__legal a:hover .site-footer__format {
  border-color: var(--corail-300);
  color: var(--corail-300);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgb(251 245 237 / 14%);
  font-size: 0.82rem;
}

/* Mentions légales : volontairement discrètes, mais pas illisibles — 0,78rem
   est le plancher en dessous duquel la ligne devient décorative. */
.site-footer__mentions {
  margin-top: var(--space-sm);
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.72;
}

/* Zone d'intervention, sous les coordonnées de la page Contact. */
.contact__zone {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: var(--bleu-100);
  border-radius: var(--radius-sm);
  color: var(--encre);
  font-size: var(--step--1);
}

.contact__zone svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--bleu-700);
}

@media (max-width: 960px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   15. Animations d'apparition
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   16. « À propos » — esquisse suivant la structure demandée par la cliente

   Reprend l'organisation du document fourni (identité, parcours, interventions,
   attention portée) dans le langage visuel du site : sable et terre cuite
   plutôt que tableaux gris, formes asymétriques, puces tracées.
   -------------------------------------------------------------------------- */
/* Présentation de la page 1 de la maquette : la photo à gauche, l'identité
   et la biographie à droite. */
.apropos__presentation {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.apropos__photo {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
}

/* [1] « Photo beaucoup moins grande, et sans cadre rose » : le portrait est
   déjà détouré en rond, il se pose directement sur le fond. */
.apropos__portrait {
  width: min(100%, 14rem);
  height: auto;
}

/* Expérience et parcours côte à côte, séparés d'un filet, comme sur la
   maquette. */
.apropos__atouts {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.apropos__parcours {
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--creme-300);
}

@media (max-width: 40rem) {
  .apropos__atouts { grid-template-columns: 1fr; }
  .apropos__parcours {
    padding: var(--space-md) 0 0;
    border-left: 0;
    border-top: 1px solid var(--creme-300);
  }
}

/* L'icône au-dessus du chiffre, comme sur la maquette. */
.apropos__experience {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.35rem;
}

.apropos__experience-icone {
  margin-bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--corail-100);
  border-radius: var(--radius-round);
  color: var(--corail-700);
}

.apropos__experience-icone svg { width: 1.7rem; height: 1.7rem; }

.apropos__chiffre {
  color: var(--corail-700);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
}

.apropos__texte .eyebrow { color: var(--bleu-700); }

.apropos__role {
  margin-top: 0.35rem;
  color: var(--bleu-700);
  font-size: var(--step-1);
  line-height: 1.3;
}

.apropos__bio {
  max-width: 62ch;
  margin: var(--space-md) 0 var(--space-lg);
}

.apropos__bio p + p {
  margin-top: var(--space-sm);
}


.apropos__titre {
  margin-bottom: 0.8rem;
  font-size: var(--step-1);
}

/* Puces en forme de petite coche tracée. */
.apropos__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.apropos__liste li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.6rem;
  color: var(--encre-700);
}

.apropos__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95rem;
  height: 0.95rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.8c1.6.6 2.9 1.8 3.8 3.2C7.8 8.6 9.8 5.8 13.2 3.4' fill='none' stroke='%23ff7425' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Bande « Une attention est portée à », remontée sous les secteurs. */
.attention {
  padding-block: var(--space-lg);
  background: var(--corail-100);
}

.attention__intro {
  margin-bottom: var(--space-md);
  color: var(--corail-700);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* Le document énonce les trois attentions en une phrase ; les séparer les rend
   lisibles d'un coup d'œil, et les filets verticaux gardent le lien. */
.attention__valeurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention__valeurs li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-inline: var(--space-sm);
  border-left: 1px solid var(--creme-300);
}

.attention__valeurs li:first-child { border-left: 0; }

.attention__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-round);
}

.attention__icone--peche { background: var(--creme-50); }
.attention__icone--bleu { background: var(--bleu-100); }

.attention__icone img { width: 2.3rem; height: 2.3rem; }

.attention__texte {
  color: var(--encre);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
}

/* Le réseau conclut la présentation, à la première personne. */
.apropos__reseau {
  max-width: 62ch;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--creme-300);
  color: var(--encre-700);
}

.apropos + .section--tight { padding-top: 0; }

@media (max-width: 900px) {
  .attention__valeurs { grid-template-columns: 1fr; gap: var(--space-sm); }

  .attention__valeurs li {
    padding-inline: 0;
    border-left: 0;
  }
}

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

/* --------------------------------------------------------------------------
   17. Ajustements mobiles

   Mesurés à 375 px, l'accueil faisait 10 235 px — une douzaine d'écrans de
   téléphone — et la page contact débordait à 320 px. Les postes les plus
   lourds : les secteurs (942 px pour cinq pictogrammes), le pied de page
   (1 249 px sur chaque page) et les bulles manuscrites (plus de 300 px pour
   une phrase décorative).
   -------------------------------------------------------------------------- */

/* Cibles tactiles : les liens « Découvrir… » des cartes montaient à 24 px de
   haut. On leur donne la hauteur d'un doigt sans changer leur apparence. */
.service__link {
  min-height: 2.75rem;
}

/* Page contact : l'adresse e-mail ne pouvait pas passer à la ligne et
   élargissait toute la colonne, d'où un débordement à 320 px. */
.contact__inner > * { min-width: 0; }
.contact-list a { overflow-wrap: anywhere; }

/* Case de consentement : la phrase entière est déjà cliquable, la case
   elle-même gagne un peu de surface. */
.form__consent input {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
}

/* Pied de page : les petites étiquettes « PDF » tombaient à 10 px. */
.site-footer__format { font-size: 0.7rem; }
.site-footer__mentions { font-size: 0.8rem; }

/* ---- Tablette et en dessous ---------------------------------------------- */
@media (max-width: 62rem) {
  /* Bandeaux des pages internes : la bulle reste, en plus petit, centrée
     sous le propos. */
  .page-hero__grille .signature { width: min(100%, 13rem); padding: 1.75rem; }
}

/* ---- Téléphone ----------------------------------------------------------- */
@media (max-width: 40rem) {
  /* Deux boutons de même largeur, empilés : l'un était large, l'autre
     étroit. */
  .hero__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* La bulle du bandeau d'accueil : même phrase, deux fois moins de place. */
  .hero__visual .signature { width: min(100%, 14rem); padding: 1.5rem; }

  /* Secteurs : le guide veut une colonne sur mobile. En lignes — pastille à
     gauche, libellé à droite — elle tient en un tiers de la hauteur. */
  .sectors { gap: 0.25rem; }

  .sector {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.55rem 0.5rem;
    text-align: left;
  }

  .sector__icon { width: 3.25rem; height: 3.25rem; flex: none; }
  .sector__icon img { width: 1.9rem; height: 1.9rem; }
  .sector__name { font-size: var(--step-1); }

  /* Cartes et blocs : un cran de rembourrage en moins. */
  .service,
  .volet,
  .etape,
  .aside,
  .contact-card { padding: 1.35rem; }

  /* Étapes en grille (VAE) : l'icône passe à côté du titre, comme dans la
     colonne des autres pages, au lieu de s'empiler au-dessus. */
  .etapes--grille .etape { flex-direction: row; }

  /* À propos : portrait plus petit, centré au-dessus du nom. */
  .apropos__portrait { width: min(100%, 9.5rem); }
  .apropos__presentation { gap: var(--space-md); }

  .attention__valeurs li { padding-block: 0.5rem; }
  .attention__icone { width: 3.25rem; height: 3.25rem; }
  .attention__icone img { width: 1.9rem; height: 1.9rem; }

  /* Pied de page : la colonne « Navigation » répète le menu de l'en-tête,
     toujours accessible. Le bandeau réglementaire, lui, reste. */
  .site-footer__nav { display: none; }
  .site-footer__grid { gap: var(--space-md); padding-bottom: var(--space-md); }
  .site-footer__qualiopi { max-width: 11rem; }
}