/* Léoria Conseil, feuille de style unique
   Charte : marine #242B5A (ancrage), or #DAA52F (accent, CTA, chiffres), rose mat #D8B8C4 (touches mineures)
   Polices : Urbanist (titres), Montserrat (texte)
   Forme : panneaux arrondis en retrait, pastilles, boutons pilule (inspiration templates Consultra / Zerovant) */

@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/Urbanist-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --marine: #242B5A;
  --marine-fonce: #242B5A; /* un seul bleu marine sur tout le site (ancien #1A1F42) */
  --marine-clair: rgba(255, 255, 255, 0.07); /* cartes posées sur un panneau marine : voile blanc, pas d'autre bleu */
  --or: #DAA52F;
  --or-fonce: #8A6512; /* or assombri pour du petit texte sur fond clair (contraste AA) */
  --rose: #D8B8C4;
  --noir: #000000;
  --blanc: #FFFFFF;
  --texte: #1E2233;
  --texte-doux: #4A4F66;
  --texte-sur-marine: #D9DBE8;
  --fond-doux: #F4F4F7;
  --dore-clair: #F6EFDD; /* fonds dorés clairs (bande d'appel à l'action, Réalisations de l'accueil, pictogrammes) */
  --hauteur-entete: 4.5rem; /* en-tête collant (72 px) */
  /* Échelle typographique unique */
  --t-h1: clamp(2.25rem, 4vw, 3.5rem);          /* 36 à 56 px */
  --t-h2: clamp(1.75rem, 2.6vw, 2.5rem);        /* 28 à 40 px */
  --t-h3: clamp(1.25rem, 1.5vw, 1.5rem);        /* 20 à 24 px */
  --t-chapeau: clamp(1.0625rem, 1.2vw, 1.1875rem); /* 17 à 19 px */
  --t-texte: clamp(1rem, 0.95rem + 0.1vw, 1.0625rem); /* 16 à 17 px */
  --t-petit: 0.875rem;                          /* 14 px */
  --trait: #E3E4EC;

  --titre: "Urbanist", "Poppins", system-ui, sans-serif;
  --corps: "Montserrat", "Lato", system-ui, sans-serif;

  --largeur: 90rem; /* 1 440 px */
  --gouttiere: clamp(1.25rem, 5vw, 5rem); /* 20 à 80 px */
  --retrait: clamp(0.5rem, 1.5vw, 1.25rem); /* marge des panneaux arrondis par rapport au bord de page */
  --rayon: 1rem;
  --rayon-grand: clamp(1.25rem, 2.5vw, 2rem);
  --ombre: 0 12px 32px -16px rgba(36, 43, 90, 0.35);
}

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

html { -webkit-text-size-adjust: 100%; }
/* Ancres : le titre ciblé s'arrête sous l'en-tête fixe (hauteur de l'en-tête + 24 px) */
main [id] { scroll-margin-top: calc(var(--hauteur-entete) + 24px); }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--corps);
  font-size: var(--t-texte);
  line-height: 1.65;
}

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

a { color: var(--marine); text-underline-offset: 0.2em; }
a:hover { color: var(--or-fonce); }

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--titre);
  color: var(--marine);
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); font-weight: 600; }

/* Mot mis en valeur dans un titre : surligné or sur fond clair, texte or sur fond marine */
.accent {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(218, 165, 47, 0.45) 62%);
  padding: 0 0.1em;
}
.hero .accent, .panneau-marine .accent {
  background: none;
  color: var(--or);
  padding: 0;
}

p { margin: 0 0 1em; max-width: 70ch; text-wrap: pretty; }

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.lien-evitement {
  position: absolute;
  left: -9999px;
}
.lien-evitement:focus {
  left: 1rem; top: 1rem;
  background: var(--blanc);
  padding: 0.5rem 1rem;
  z-index: 20;
}

/* En-tête (collant) */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete .conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--marine);
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.marque img { width: 2.5rem; }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-family: var(--titre);
  font-weight: 500;
  text-decoration: none;
  color: var(--texte);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--marine); border-bottom-color: var(--rose); }
.nav a[aria-current="page"] { color: var(--marine); border-bottom-color: var(--or); }
.nav .nav-cta a.bouton { border: 1px solid var(--or); padding: 0.4rem 0.4rem 0.4rem 1rem; font-size: 0.9rem; color: var(--marine-fonce); }
.nav .nav-cta a.bouton:hover { color: var(--blanc); }
.nav .nav-cta a.bouton::after { width: 1.75rem; height: 1.75rem; }

/* Menu mobile : bouton affiché par site.js, menu replié sous 1 080 px (67.5rem) */
.menu-bouton {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  color: var(--marine);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 999px;
  cursor: pointer;
}
.menu-icone,
.menu-icone::before,
.menu-icone::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.menu-icone { position: relative; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
.menu-icone::before { top: -6px; }
.menu-icone::after { top: 6px; }
.menu-bouton[aria-expanded="true"] .menu-icone { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-icone::before { transform: translateY(6px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-icone::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 67.5rem) {
  .js .menu-bouton:not([hidden]) { display: inline-flex; }
  .js .nav { display: none; width: 100%; }
  .js .nav.ouvert { display: block; }
  .js .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav a {
    display: block;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--trait);
    font-size: 1.1rem;
  }
  .js .nav a[aria-current="page"] { border-bottom-color: var(--trait); box-shadow: inset 3px 0 0 var(--or); padding-left: 0.75rem; }
  .js .nav .nav-cta { padding-top: 1rem; }
  .js .nav .nav-cta a.bouton { display: flex; justify-content: space-between; font-size: 1.05rem; }
}

/* En-tête entre 1 080 et 1 300 px : menu complet sur une seule ligne, à côté du logo (version resserrée) */
@media (min-width: 67.5625rem) and (max-width: 81.25rem) {
  .entete .conteneur { gap: 0.75rem; }
  .marque { font-size: 1.15rem; gap: 0.45rem; }
  .marque img { width: 2.1rem; }
  .nav ul { gap: 0.25rem 0.7rem; }
  .nav a { font-size: 0.9rem; }
  .nav .nav-cta a.bouton { font-size: 0.84rem; padding-left: 0.85rem; gap: 0.5rem; }
}

/* Boutons pilule avec flèche */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
  min-height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--marine);
  color: var(--marine);
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bouton::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--marine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
  transition: transform 0.2s ease;
}
.bouton:hover { background: var(--marine); color: var(--blanc); }
.bouton:hover::after { transform: rotate(45deg); background-color: var(--or); }
.bouton-or { background: var(--or); border-color: var(--or); color: var(--marine-fonce); }
.bouton-or:hover { background: var(--marine-fonce); border-color: var(--or); color: var(--blanc); }
.bouton-or:hover::after { background-color: var(--or); }

/* Bouton principal d'appel à l'action : toujours sur une seule ligne */
.bouton-rdv { white-space: nowrap; }
@media (max-width: 24rem) {
  .bouton-rdv { font-size: 0.95rem; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; }
  .bouton-rdv::after { width: 1.75rem; height: 1.75rem; }
}

/* Pastille au-dessus des titres */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--titre);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blanc);
  background: var(--marine);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: 1rem;
}
.surtitre::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--or);
}
.surtitre a { color: inherit; }
.hero .surtitre, .panneau-marine .surtitre {
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanc);
}

/* Sections et panneaux */
main section { padding: clamp(3rem, 7vw, 5.5rem) 0; }

/* Panneaux arrondis posés en retrait du bord de page */
.hero, .bandeau-cta, .panneau-marine, section.fond-doux {
  margin: var(--retrait);
  border-radius: var(--rayon-grand);
}
.fond-doux { background: var(--fond-doux); }
.panneau-marine { background: var(--marine); color: var(--texte-sur-marine); }
.panneau-marine h2, .panneau-marine h3 { color: var(--blanc); }

.entete-section { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.entete-section p:not(.surtitre) { color: var(--texte-doux); font-size: 1.1rem; }
.panneau-marine .entete-section p:not(.surtitre) { color: var(--texte-sur-marine); }

.intro { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.intro .chapeau {
  font-size: 1.15rem;
  color: var(--texte-doux);
  max-width: 44rem;
}

/* Accueil : panneau marine avec visuel et carte chiffre flottante */
.hero { background: var(--marine); color: var(--blanc); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero .conteneur {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.hero .conteneur > * { min-width: 0; }
.hero h1 { color: var(--blanc); }
/* Accueil : le H1 porte le mot-clé (discret), l'accroche est l'élément le plus visible */
.hero h1.titre-discret {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--or);
  margin-bottom: 0.9rem;
}
.hero .accroche-principale {
  font-family: var(--titre);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--blanc);
  margin: 0 0 0.6em;
}
/* Accroche sur deux lignes fixes : chaque moitié de phrase reste d'un seul tenant */
/* La taille suit la largeur de la colonne (unité cqi) pour que la plus longue moitié tienne toujours */
.hero .conteneur > div:first-child { container-type: inline-size; }
.hero .accroche-principale { font-size: min(var(--t-h1), 7.3cqi); }
.hero .accroche-principale .ligne { display: block; white-space: nowrap; }
.hero .chapeau { color: var(--texte-sur-marine); font-size: 1.15rem; max-width: 36rem; }
.hero .sous-titre-hero {
  font-family: var(--titre);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--blanc);
  max-width: 36rem;
  margin: 0 0 1.25rem;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero .bouton:not(.bouton-or) { border-color: rgba(255, 255, 255, 0.5); color: var(--blanc); }
.hero .bouton:not(.bouton-or)::after { background-color: var(--blanc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242B5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.hero .bouton:not(.bouton-or):hover { background: var(--blanc); color: var(--marine); }
.hero .bouton:not(.bouton-or):hover::after { background-color: var(--or); }

.hero-visuel {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--rayon-grand);
  background: var(--marine);
  display: grid;
  place-items: center;
  margin-bottom: 2rem; /* place pour la carte flottante */
}
.hero-visuel > img { width: 58%; opacity: 0.9; }
.hero-visuel > img.photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 1; }
.carte-flottante {
  position: absolute;
  left: -1rem;
  bottom: -2rem;
  max-width: 15rem;
  background: var(--or);
  color: var(--marine-fonce);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  box-shadow: var(--ombre);
  font-size: 0.9rem;
  line-height: 1.4;
}
.carte-flottante strong {
  display: block;
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}
@media (min-width: 52rem) {
  .hero .conteneur { grid-template-columns: 1.15fr 1fr; }
  .carte-flottante { left: -2.5rem; }
}

.hero-visuel.avec-photo { aspect-ratio: 4 / 4.6; background: var(--marine-clair); }
.hero-visuel.avec-photo > img.photo { object-position: center 20%; }

/* Parcours : texte + portrait */
.parcours-grille { display: grid; gap: 2rem; align-items: start; }
.parcours-grille .portrait { width: 100%; max-width: 26rem; border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
@media (min-width: 52rem) {
  .parcours-grille { grid-template-columns: 1.4fr 1fr; gap: 4rem; }
  .parcours-grille .portrait { justify-self: end; }
}

.chiffres.chiffres-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.chiffres-compact li { padding: 1rem 1.1rem; font-size: 0.88rem; }
.chiffres-compact strong { font-size: 1.8rem; }
.texte-parcours { max-width: 46rem; font-size: 1.05rem; }
.texte-parcours strong { color: var(--marine); font-family: var(--titre); font-size: 1.1rem; }

/* Frise chronologique */
.frise { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--trait); max-width: 50rem; }
.frise > li { position: relative; padding: 0 0 2.25rem; }
.frise > li::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 7px);
  top: 0.3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--or);
}
.frise > li:first-child::before { background: var(--or); }
.frise .periode { font-family: var(--titre); font-weight: 600; font-size: 0.9rem; color: var(--or-fonce); margin-bottom: 0.25rem; }
.frise h3 { margin-bottom: 0.5rem; }
.frise p { color: var(--texte-doux); margin-bottom: 0.5rem; }
.frise .resultats { color: var(--marine); font-weight: 600; font-size: 0.95rem; }
.formation { color: var(--texte-doux); font-size: 0.95rem; margin-top: 0.5rem; }
.frise-details { margin: 0.25rem 0 0.5rem; padding-left: 1.1rem; color: var(--texte-doux); }
.frise-details li { margin-bottom: 0.4rem; }
.frise-details li::marker { color: var(--or); }
.frise-details strong { color: var(--marine); font-weight: 600; }
.outils { margin: 1.5rem 0 0; font-size: 0.95rem; }
.panneau-marine .outils { color: var(--texte-sur-marine); }

/* Accompagnement : accroche en italique, encart « Exemple de mission » discret (illustration, pas fiche produit) */
.accroche { font-style: italic; }
.exemple-mission {
  align-self: start;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  color: var(--texte-doux);
}
.fond-doux .exemple-mission { background: var(--blanc); }
.exemple-mission p { margin: 0 0 0.5rem; }
.exemple-mission .exemple-titre { font-family: var(--titre); font-weight: 600; color: var(--marine); font-size: 1rem; }
.exemple-mission .exemple-prix { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--trait); color: var(--marine); font-weight: 600; }
.bloc-texte { max-width: 46rem; }
.cta-offre { margin: 0; }
.mention-indicative { font-style: italic; color: var(--texte-doux); max-width: 46rem; }

/* FAQ : accordéons natifs (details/summary), accessibles au clavier */
main section.faq { padding-top: 0; }
.faq-groupe { margin-bottom: 3rem; max-width: 52rem; }
.faq-groupe h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: 0.75rem; }
.faq-item { border-bottom: 1px solid var(--trait); }
.faq-item:first-of-type { border-top: 1px solid var(--trait); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--trait);
  font-family: var(--titre);
  font-size: 1.2rem;
  color: var(--marine);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.faq-item[open] > summary::after { content: "−"; background: var(--or); border-color: var(--or); }
.faq-item > summary:hover .faq-question { color: var(--or-fonce); }
.faq-question { font-size: 1.08rem; font-weight: 600; margin: 0; line-height: 1.35; }
.faq-reponse { padding: 0 0 1.25rem; max-width: 46rem; }
.faq-reponse > p { margin-bottom: 0.75rem; }
.faq-plus { margin: 0.25rem 0 0.75rem; }
.faq-plus > summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--titre);
  font-weight: 600;
  color: var(--marine);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.faq-plus > summary::-webkit-details-marker { display: none; }
.faq-plus > summary::before { content: "▸ "; color: var(--or-fonce); }
.faq-plus[open] > summary::before { content: "▾ "; }
.faq-plus > p { margin: 0.6rem 0 0; padding: 0.9rem 1.1rem; background: var(--fond-doux); border-radius: 0.6rem; color: var(--texte-doux); }
.faq-liens { font-size: 0.92rem; color: var(--texte-doux); margin: 0; }

/* Contact : formulaire et colonne latérale */
.contact-grille { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 60rem) { .contact-grille { grid-template-columns: 1.7fr 1fr; } }
.contact-cote { display: grid; gap: 1.25rem; }
.contact-grille h2 { font-size: 1.3rem; }
.carte-formulaire { padding: clamp(1.25rem, 3vw, 2.25rem); }
.formulaire { display: grid; gap: 1.1rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .formulaire { grid-template-columns: 1fr 1fr; } }
.formulaire[hidden] { display: none; }
.formulaire .champ-large { grid-column: 1 / -1; }
.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ label { font-family: var(--titre); font-weight: 600; color: var(--marine); font-size: 0.95rem; }
.champ label span { color: var(--or-fonce); }
.champ input, .champ textarea {
  font: inherit;
  color: var(--texte);
  background: var(--blanc);
  border: 1px solid #C9CBD8;
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  min-height: 2.75rem;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--or); outline-offset: 1px; border-color: var(--marine); }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mention-form { font-size: 0.85rem; color: var(--texte-doux); margin: 0; }
.formulaire button[disabled] { opacity: 0.6; cursor: wait; }
.etat-envoi { border-radius: 0.6rem; padding: 0.9rem 1.1rem; font-weight: 500; }
.etat-ok { background: #EEF6EE; color: #1F5130; border: 1px solid #BFDDC4; }
.etat-erreur { background: #FDF3EC; color: #7A3410; border: 1px solid #F0CDB5; }

/* Bande de pastilles (leviers) */
.bande-leviers { padding: 2rem 0; }
.bande-leviers .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.bande-leviers .libelle { font-family: var(--titre); font-weight: 600; color: var(--marine); margin: 0; }
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pastilles li {
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--blanc);
  color: var(--texte-doux);
}

/* Grilles de cartes */
.grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.carte p:last-child { margin-bottom: 0; }
.carte .lien-carte { margin-top: auto; padding-top: 1rem; font-family: var(--titre); font-weight: 600; }
.panneau-marine .carte { background: var(--marine-clair); border-color: rgba(255, 255, 255, 0.08); }
.panneau-marine .carte p { color: var(--texte-sur-marine); }
.panneau-marine .carte a { color: var(--blanc); }
.panneau-marine .carte a:hover { color: var(--or); }
.numero-carte {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--or);
  color: var(--marine-fonce);
  font-family: var(--titre);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.grille-reco { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* Offres */
.offre {
  display: grid;
  gap: 1.5rem 3rem;
}
@media (min-width: 52rem) {
  .offre { grid-template-columns: 1.6fr 1fr; }
}
.offre .numero {
  display: inline-block;
  font-family: var(--titre);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marine-fonce);
  background: var(--or);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  margin-bottom: 1rem;
}
.offre .cible, .offre-detail .cible { font-size: 1.1rem; color: var(--texte-doux); }
.liste-puces { padding-left: 1.2rem; margin: 0 0 1.5rem; }
.liste-puces li { margin-bottom: 0.5rem; }
.liste-puces li::marker { color: var(--or); }
.encart {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.75rem;
  align-self: start;
  box-shadow: var(--ombre);
}
.encart h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.encart .liste-puces { margin-bottom: 1.25rem; }
.prix {
  font-family: var(--titre);
  color: var(--marine);
  font-size: 1.1rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
}
.prix strong { font-size: 1.8rem; font-weight: 700; }
.note-prix { font-size: 0.9rem; color: var(--texte-doux); margin: 0.5rem 0 0; }

.accroche {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--marine);
  border-left: 3px solid var(--rose);
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.leviers dt {
  font-family: var(--titre);
  font-weight: 600;
  color: var(--marine);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.leviers dd { margin: 0; }
.panneau-marine .leviers dt { color: var(--blanc); }
.panneau-marine .pastilles li { background: transparent; border-color: rgba(255, 255, 255, 0.2); color: var(--texte-sur-marine); }

/* Cas clients */
/* Rubriques Objectif / Méthode / Résultat : trois lignes empilées, libellé à gauche, texte à droite */
.cas-blocs { display: grid; margin-top: 2rem; border-top: 1px solid var(--trait); }
.cas-blocs > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 42rem);
  gap: 0.5rem 2.5rem;
  padding: 1.5rem;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--trait);
}
.cas-blocs h3 { margin: 0.2rem 0 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--marine); }
.cas-blocs p { margin: 0; }
/* Ligne Résultat mise en valeur : fond légèrement teinté, filet marine à gauche, libellé or */
.cas-blocs .resultat {
  background: var(--dore-clair);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: var(--rayon);
  color: var(--marine);
}
.cas-blocs .resultat h3 { color: var(--or-fonce); }
@media (max-width: 40rem) {
  .cas-blocs > div { grid-template-columns: minmax(0, 1fr); }
  .cas-blocs > div { padding: 1.25rem 1.1rem; }
}
.cas-sous-titre { color: var(--texte-doux); font-size: 1.1rem; }

/* Bandeau de chiffres des cas : chiffres marine, petit trait or au-dessus, largeur selon le nombre de chiffres */
.chiffres.chiffres-cas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  padding: 0;
  margin: 1.75rem 0 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.chiffres.chiffres-cas li { padding: 0; max-width: 15rem; }
.chiffres.chiffres-cas li + li { border: 0; }
.chiffres-cas strong::before { content: ""; display: block; width: 2rem; height: 3px; margin-bottom: 0.75rem; background: var(--or); border-radius: 2px; }
/* Carte de chiffres clés avec séparateurs */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  list-style: none;
  padding: 0.5rem;
  margin: 2rem 0 0;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.chiffres li {
  padding: 1.25rem 1.5rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
  line-height: 1.45;
}
.chiffres li + li { border-left: 1px solid var(--trait); }
@media (max-width: 40rem) {
  .chiffres li + li { border-left: 0; border-top: 1px solid var(--trait); }
}
.chiffres strong {
  display: block;
  font-family: var(--titre);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--marine);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

@media (max-width: 40rem) {
  .chiffres.chiffres-cas { gap: 1.25rem 1.5rem; }
  .chiffres.chiffres-cas li { flex: 0 1 8.5rem; }
}

/* Recommandations */
.reco {
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.reco::before {
  content: "«";
  font-family: var(--titre);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--or);
  margin-bottom: 0.75rem;
}
.reco blockquote { margin: 0 0 1.25rem; }
.reco figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  font-size: 0.9rem;
  color: var(--texte-doux);
}
.reco figcaption strong { color: var(--marine); font-family: var(--titre); font-size: 1.05rem; }

/* Pages de texte (mentions légales, articles) */
.texte-legal p, .texte-legal .a-rediger { max-width: 44rem; }
.texte-legal h2 { font-size: 1.35rem; margin-top: 2.5rem; }

/* Articles Ressources */
main article.article { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.article .conteneur { max-width: 48rem; }
.article h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
.meta-article { color: var(--texte-doux); font-size: 0.9rem; margin-bottom: 2rem; }
.article-corps { font-size: 1.075rem; line-height: 1.75; }
.article-corps > p:first-child { font-family: var(--titre); font-size: 1.35rem; font-weight: 500; line-height: 1.45; color: var(--marine); }
.article-corps ul { padding-left: 1.2rem; margin: 0 0 1.25em; }
.article-corps li { margin-bottom: 0.6rem; }
.article-corps li::marker { color: var(--or); }
.article-corps .phrase-seule { font-family: var(--titre); font-size: 1.25rem; font-weight: 600; color: var(--marine); }
.article-corps h2 { font-size: 1.35rem; margin-top: 2.25rem; }
.auteur {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--fond-doux);
  border-radius: var(--rayon);
}
.auteur img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: center 15%; flex: none; }
.auteur p { margin: 0; font-size: 0.95rem; color: var(--texte-doux); }
.auteur strong { color: var(--marine); font-family: var(--titre); font-size: 1.05rem; }
.article-corps .visuel { margin: 2rem 0; }
.article-corps .visuel img { width: 100%; border-radius: var(--rayon); border: 1px solid var(--trait); }
.article-corps .visuel-carre img { max-width: 36rem; }
.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin: 1.5rem 0 0; }
.galerie img { width: 100%; border-radius: 0.75rem; border: 1px solid var(--trait); }
.carte-article .date { font-size: 0.85rem; color: var(--texte-doux); margin-bottom: 0.5rem; }
.carte-article h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.carte-article h3 a { text-decoration: none; }
.carte-article h3 a:hover { text-decoration: underline; }
.carte-article .surtitre { align-self: flex-start; }
.carte-article h3 + p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Contenu en attente de rédaction : visible en développement, à retirer avant mise en ligne */
.a-rediger {
  border: 1px dashed var(--or);
  background: #FDF8EC;
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}
.a-rediger::before {
  content: "Contenu en attente";
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  color: var(--or-fonce);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

/* Bandeau d'appel à l'action */
.bandeau-cta {
  position: relative;
  overflow: hidden;
  background: var(--dore-clair);
  color: var(--texte);
}
/* Lionne au trait en filigrane, discrète sur le fond doré clair */
.bandeau-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/lionne-bleu.png") no-repeat right 4% center / auto 85%;
  opacity: 0.12;
  pointer-events: none;
}
.bandeau-cta .conteneur { position: relative; }
.bandeau-cta h2 { color: var(--marine); max-width: 36rem; }
.bandeau-cta p { color: var(--texte); max-width: 36rem; }
.bandeau-cta p strong { color: var(--marine); font-family: var(--titre); font-size: 1.35rem; font-weight: 600; }

/* Pied de page */
.pied {
  background: var(--marine-fonce);
  color: #C9CCDD;
  font-size: 0.9rem;
  padding: 3rem 0 2rem;
  margin-top: var(--retrait);
}
.pied .conteneur {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.pied img { width: 9rem; }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { color: var(--or); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.4rem; }
.pied li a { display: inline-block; padding: 0.2rem 0; }
.pied .titre-pied { font-family: var(--titre); color: var(--blanc); font-weight: 600; margin-bottom: 0.75rem; }

/* Petits écrans */
@media (max-width: 52rem) {
  .hero .actions .bouton { flex: 1 1 auto; justify-content: space-between; }
  .hero-visuel { aspect-ratio: 16 / 10; margin-left: 1rem; }
  .hero-visuel.avec-photo { aspect-ratio: 4 / 3.8; }
  .carte-flottante { left: -1rem; }
  .encart, .carte, .reco { padding: 1.25rem; }
  .bandeau-cta::before { background-size: auto 45%; background-position: right -2rem bottom 1rem; }
}
@media (max-width: 24rem) {
  .marque { font-size: 1.15rem; gap: 0.45rem; }
  .marque img { width: 2rem; }
  .menu-bouton { padding: 0.5rem 0.85rem; min-width: 2.75rem; justify-content: center; }
  .menu-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

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

/* Composant image (rendu par tools/layout.ps1 à partir de <figure class="image" data-image=…>) :
   ratio fixe, dimensions déclarées, chargement différé, WebP. Fichier absent : emplacement de secours. */
.image { margin: 0; position: relative; aspect-ratio: var(--ratio, 4 / 5); max-width: 100%; overflow: hidden; border-radius: var(--rayon-grand); }
.image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Emplacement de secours : aplat aux couleurs de la charte (production) */
.image-secours { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: 1.25rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rose) 45%, var(--blanc)), color-mix(in srgb, var(--marine) 12%, var(--blanc))); }
/* En local seulement (site.js) : nom du fichier attendu et description de la photo */
.image-secours-nom { font-family: var(--titre); font-weight: 700; color: var(--marine); font-size: 0.95rem; overflow-wrap: anywhere; }
.image-secours-description { color: var(--texte-doux); font-size: 0.85rem; line-height: 1.45; }
.image-secours.local { border: 2px dashed color-mix(in srgb, var(--marine) 35%, transparent); border-radius: inherit; }
/* Accueil : bloc À propos (photo à gauche, regard vers le texte ; photo au-dessus sur mobile) */
.a-propos .conteneur { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.a-propos .image { width: 100%; max-width: 30rem; }
.a-propos-texte h2 { margin-top: 0; }
.a-propos-texte p { max-width: 38rem; }
.volets { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.75rem; max-width: 38rem; }
.volets li { padding: 0; }
.a-propos-action { margin-top: 1.75rem; }
@media (max-width: 52rem) {
  .a-propos .conteneur { grid-template-columns: minmax(0, 1fr); }
  .a-propos .image { max-width: 26rem; }
}

/* Accueil : mention Activateur France Num, près des recommandations */
.bandeau-francenum { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.bandeau-francenum p { margin: 0; font-family: var(--titre); font-weight: 600; color: var(--marine); }
.image-logo { width: 4rem; flex: none; border-radius: 0.5rem; }
.image-logo > img { object-fit: contain; }
.image-logo .image-secours { padding: 0.35rem; gap: 0.15rem; }
.image-logo .image-secours-nom, .image-logo .image-secours-description { display: none; }
/* Page Accompagnement : grand numéro et pictogramme au trait en tête de chaque bloc, plus d'air entre les blocs */
.offre-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.offre-numero { font-family: var(--titre); font-weight: 700; font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; color: var(--marine); letter-spacing: -0.02em; }
.offre-numero::after { content: ""; display: block; width: 2.25rem; height: 3px; margin-top: 0.5rem; background: var(--or); border-radius: 2px; }
.offre-picto { width: 2.5rem; height: 2.5rem; color: var(--marine); flex: none; }
#presence-digitale, #coherence-strategique, #intelligence-artificielle, #sujet-ponctuel { padding-block: clamp(2.65rem, 6vw, 5rem); } /* réduit d'un tiers (ancien clamp(4rem, 9vw, 7.5rem)) */
#mise-en-oeuvre { padding-block: clamp(2rem, 4.7vw, 3.65rem); }
.mention-francenum { font-size: 0.95rem; color: var(--texte-doux); padding-left: 0.9rem; border-left: 3px solid var(--or); }
.liste-fleches { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.liste-fleches li { padding-left: 1.6rem; position: relative; }
.liste-fleches li::before { content: "→"; position: absolute; left: 0; color: var(--or-fonce); font-weight: 600; }
.mention-sur-devis { color: var(--marine); font-weight: 600; }#sujet-ponctuel .cta-offre { grid-column: 1; }

.image-vignette .image-secours { padding: 0.75rem 1rem; gap: 0.25rem; }
.image-vignette .image-secours-nom { font-size: 0.75rem; line-height: 1.35; }
.image-vignette .image-secours-description { font-size: 0.75rem; line-height: 1.35; }
/* Vignette : description visible au survol seulement (attribut title) */
.image-vignette .image-secours-description { display: none; }
/* Page Contact : portrait à côté du titre (au-dessus sur mobile) */
.contact-entete .conteneur { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.contact-entete .image { width: 100%; max-width: 20rem; }
@media (min-width: 52rem) {
  .contact-entete .conteneur { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
  .contact-entete .image { max-width: none; }
}
@media (max-width: 52rem) {
  .contact-entete .image { order: -1; max-width: 16rem; }
}

/* Trois blocs numérotés, côte à côte sur ordinateur ; le bloc 1 (rendez-vous) est prioritaire */
.contact-blocs { display: grid; gap: 1.25rem; align-items: start; }
/* Sous 900 px : la colonne s'efface, les blocs s'affichent dans l'ordre 01, 02, 03 */
.contact-colonne { display: contents; }
.contact-colonne > #rendez-vous { order: 1; }
.contact-blocs > #formulaire { order: 2; }
.contact-colonne > .contact-bloc:last-child { order: 3; }
/* Au-dessus de 900 px : 2 colonnes alignées en haut ; à gauche 01 puis 03, fixes au défilement ; à droite 02 (formulaire) */
@media (min-width: 56.25rem) {
  .contact-blocs { grid-template-columns: 1fr 1fr; }
  .contact-colonne { display: grid; gap: 1.25rem; align-self: start; position: sticky; top: calc(var(--hauteur-entete) + 24px); }
}
.contact-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: clamp(1.25rem, 2.5vw, 2rem); min-width: 0; }
.contact-bloc h3 { font-size: 1.3rem; margin-top: 0.5rem; }
.contact-numero { display: block; font-family: var(--titre); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--marine); }
.contact-numero::after { content: ""; display: block; width: 1.75rem; height: 3px; margin-top: 0.5rem; background: var(--or); border-radius: 2px; }
.contact-bloc-prioritaire { border: 2px solid var(--marine); box-shadow: var(--ombre); }
.contact-bloc-prioritaire .contact-numero { font-size: 3rem; }
.contact-bloc-prioritaire h3 { font-size: 1.55rem; }
.contact-adresse { font-weight: 600; color: var(--marine); overflow-wrap: anywhere; }
.contact-bloc .formulaire { grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
.contact-bloc .formulaire .champ-large { grid-column: auto; }
.agenda { margin-top: 1.25rem; }
.agenda-mention { font-size: 0.85rem; color: var(--texte-doux); margin-top: 1rem; }
.agenda-lien { font-size: 0.95rem; margin: 0.5rem 0 0; }
.agenda-cadre { display: block; width: 100%; height: 44rem; border: 0; border-radius: calc(var(--rayon) - 0.25rem); background: var(--fond-doux); }
.contact-zone { margin: 2rem 0 0; color: var(--texte-doux); }/* Un élément masqué reste masqué, même s'il porte une classe qui fixe son affichage (.bouton, etc.) */
[hidden] { display: none !important; }
.contact-bloc .bouton { white-space: nowrap; }

/* Accueil, entre 600 et 1 080 px : photo du haut de page limitée à 520 px de haut, recadrée sur le visage */
@media (min-width: 37.5rem) and (max-width: 67.5rem) {
  .hero-visuel.avec-photo { aspect-ratio: auto; height: min(520px, 125vw); max-height: 520px; }
  .hero-visuel.avec-photo > img.photo { position: absolute; inset: 0; object-fit: cover; object-position: center 22%; }
}
/* Accueil : cartes Accompagnement en 2 x 2, pictogramme au trait dans un cercle doré clair */
.grille.grille-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .grille.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.picto-cercle { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--dore-clair); color: var(--marine); margin-bottom: 1.25rem; }

/* Accueil : section Réalisations sur fond doré clair, recommandations en avant, chiffres au second plan */
.panneau-dore { background: var(--dore-clair); margin: var(--retrait); border-radius: var(--rayon-grand); }
.grille.recos-accueil { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 48rem) { .grille.recos-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recos-accueil .reco { border: 0; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 1px 2px rgba(36, 43, 90, 0.06); }
.recos-accueil .reco blockquote p { font-family: var(--titre); font-size: clamp(1.25rem, 1.55vw, 1.625rem); font-weight: 500; line-height: 1.4; color: var(--marine); }
.chiffres.chiffres-accueil {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(36, 43, 90, 0.15);
  border-radius: 0;
}
@media (min-width: 56.25rem) { .chiffres.chiffres-accueil { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chiffres.chiffres-accueil li, .chiffres.chiffres-accueil li + li { padding: 0; border: 0; }
.chiffres-accueil strong { font-size: clamp(2rem, 2.6vw, 2.75rem); }
.chiffre-libelle { display: block; color: var(--texte); }
.chiffre-source { display: block; margin-top: 0.45rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 700; color: #4A4E6E; } /* contraste 7:1 sur le fond doré clair (seuil AA : 4,5:1) */
.lien-realisations { margin: 2rem 0 0; }
.panneau-dore .bandeau-francenum { border-top-color: rgba(36, 43, 90, 0.15); }

/* Accueil : « Ce sur quoi j'interviens », étiquettes non cliquables */
.bande-leviers .pastilles li { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 10px; background: var(--blanc); cursor: default; }
.bande-leviers .pastilles li::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--or); }
/* Page Accompagnement : raccourcis vers les sections, sous l'introduction */
.raccourcis ul { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.raccourcis a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--titre); font-weight: 600; color: var(--marine); text-decoration: none; padding: 0.25rem 0; }
.raccourcis svg { flex: none; color: var(--marine); }
.raccourcis span { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.raccourcis a:hover span { color: var(--or-fonce); }

/* Page Accompagnement : les 3 accompagnements, sans colonne vide */
.offre-detail .picto-cercle { width: 3rem; height: 3rem; margin-bottom: 1rem; }
.offre-colonnes { display: grid; gap: 0.5rem 3rem; }
@media (min-width: 56.25rem) { .offre-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offre-droite > :last-child { margin-bottom: 0; }
/* Bandeau « Exemple de mission » sur toute la largeur : titre et description à gauche, prix et bouton à droite */
.exemple-mission.exemple-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--fond-doux);
  border: 0;
  border-radius: var(--rayon);
}
.fond-doux .exemple-mission.exemple-bandeau { background: var(--blanc); }
.exemple-bandeau .exemple-texte p { margin: 0; }
.exemple-bandeau .exemple-texte .exemple-titre { margin-bottom: 0.2rem; }
.exemple-bandeau .exemple-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.exemple-bandeau .exemple-prix { margin: 0; padding: 0; border: 0; white-space: nowrap; }
@media (max-width: 56.25rem) {
  .exemple-mission.exemple-bandeau, .exemple-bandeau .exemple-action { flex-direction: column; align-items: flex-start; }
}
/* Page Réalisations : raccourcis + bouton vers les recommandations, pictogramme à gauche du tag, espacement réduit */
.raccourcis .raccourci-bouton { margin-left: 0.5rem; }
.bouton-marine { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.bouton-marine::after { background-color: var(--or); }
.bouton-marine:hover { background: var(--blanc); color: var(--marine); }
.raccourcis .bouton-marine { font-size: 1rem; }
.guillemet-or { font-family: var(--titre); font-size: 1.5rem; line-height: 1; color: var(--or); margin-right: -0.25rem; }
.cas-tag { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cas-tag .picto-cercle { width: 2.75rem; height: 2.75rem; margin: 0; }
.cas-tag .surtitre { margin: 0; }
main section.cas { padding-block: clamp(2rem, 4.7vw, 3.65rem); } /* réduit d'un tiers */
/* Recommandation dans un cas */
/* Carte blanche, contour doré fin, alignée sur la colonne de texte du cas (départ des textes Problème, Solution, Résultat ; bord droit de la ligne Résultat) */
.reco-cas { margin: 1.5rem 0 0 calc(4px + 1.5rem + 11rem + 2.5rem); padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--blanc); border: 1px solid var(--or); border-radius: var(--rayon); }
@media (max-width: 40rem) { .reco-cas { margin-left: calc(4px + 1.1rem); } }
.reco-cas::before { content: "«"; display: block; font-family: var(--titre); font-size: 3rem; line-height: 0.6; color: var(--marine); margin-bottom: 0.75rem; }
.reco-cas blockquote { margin: 0 0 1rem; }
.reco-cas blockquote p { font-style: italic; color: var(--marine); margin: 0; }
.reco-cas figcaption { font-size: 0.9rem; color: var(--texte-doux); }
.reco-cas figcaption strong { color: var(--marine); font-family: var(--titre); }.raccourcis a.bouton { padding: 0.5rem 0.5rem 0.5rem 1.1rem; gap: 0.6rem; }
.raccourcis a.bouton-marine { color: var(--blanc); }
.raccourcis a.bouton-marine:hover { color: var(--marine); }
.raccourcis .bouton span { text-decoration: none; }
/* Recommandations : 2 par ligne au maximum (le conteneur plus large en aurait mis 3) */
@media (min-width: 48rem) { .grille.grille-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Page Ressources, sans visuels : article mis en avant sur fond marine, puis grille de cartes blanches */
.grille.grille-articles { display: block; max-width: none; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-bottom: 0.75rem; }
.article-meta .surtitre { margin: 0; }
.article-meta .date { margin: 0; font-size: 0.85rem; color: var(--texte-doux); }
.carte-article .lien-carte, .article-une .lien-carte { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--titre); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.carte-article .lien-carte::after, .article-une .lien-carte::after { content: "→"; display: inline-block; text-decoration: none; }
/* Toute la carte est cliquable : le lien du titre couvre la carte */
.article-une, .carte-article { position: relative; }
.article-une h2 a, .carte-article h3 a { text-decoration: none; color: inherit; }
.article-une h2 a::after, .carte-article h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.article-une:focus-within, .carte-article:focus-within { outline: 2px solid var(--or); outline-offset: 3px; }
.article-une h2 a:focus-visible, .carte-article h3 a:focus-visible { outline: none; }

/* Article mis en avant : bloc pleine largeur, fond marine */
.article-une { display: flex; flex-direction: column; align-items: flex-start; background: var(--marine); color: var(--blanc); border-radius: var(--rayon-grand); padding: clamp(1.75rem, 4vw, 3.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.article-une-texte { display: flex; flex-direction: column; align-items: flex-start; }
.etiquette-une { margin: 0 0 1rem; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--dore-clair); color: var(--marine); font-family: var(--titre); font-weight: 600; font-variant: small-caps; letter-spacing: 0.05em; font-size: 0.95rem; }
.article-une .surtitre { background: rgba(255, 255, 255, 0.12); color: var(--blanc); }
.article-une .date { color: var(--texte-sur-marine); }
/* Titre sur 2 ou 3 lignes : largeur limitée */
.article-une h2 { font-family: var(--titre); font-size: clamp(1.875rem, 3.2vw, 3.25rem); color: var(--blanc); max-width: 30ch; margin: 0.25rem 0 0.75rem; }
.article-une h2 + p { color: rgba(255, 255, 255, 0.82); max-width: 60ch; font-size: 1.1rem; }
.article-une .lien-carte { color: var(--or); text-decoration-color: var(--or); margin-top: 0.5rem; }
.article-une:hover h2 a { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 3px; text-underline-offset: 0.15em; }

/* Les 7 autres articles : grille 3 / 2 / 1, cartes blanches sans contour sur le fond gris clair */
.articles-grille { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .articles-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .articles-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte-article { display: flex; flex-direction: column; background: var(--blanc); border: 0; border-radius: var(--rayon); padding: clamp(1.25rem, 2vw, 1.75rem); transition: transform 0.2s ease, box-shadow 0.2s ease; }
/* Fin trait doré au-dessus de la catégorie */
.carte-article::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 1rem; background: var(--or); border-radius: 2px; }
.carte-article h3 { font-family: var(--titre); font-size: clamp(1.3125rem, 1.5vw, 1.625rem); line-height: 1.25; color: var(--marine); margin-bottom: 0.6rem; }
.carte-article h3 + p { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1.25rem; color: var(--texte-doux); }
/* « Lire l'article » collé en bas : les liens d'une même ligne sont alignés */
.carte-article .lien-carte { margin-top: auto; color: var(--marine); text-decoration-color: var(--or); }
.carte-article:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(36, 43, 90, 0.45); }
.carte-article:hover h2 a { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) { .carte-article:hover { transform: none; } }
/* Logo Activateur France Num : toujours sur fond blanc (pastille blanche sur le fond doré clair), hauteur 64 px, proportions d'origine */
.image.image-logo { width: auto; aspect-ratio: auto; padding: 0.5rem; background: var(--blanc); border-radius: 0.6rem; overflow: visible; }
.image.image-logo > img { width: auto; height: 64px; object-fit: contain; }
/* Mention et logo Activateur France Num : un seul lien vers la page France Num */
a.bandeau-francenum { text-decoration: none; }
.bandeau-francenum span { font-family: var(--titre); font-weight: 600; color: var(--marine); text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
a.bandeau-francenum:hover span { color: var(--or-fonce); }
.mention-francenum a { color: inherit; text-decoration-color: var(--or); }
/* Page Parcours : expériences en deux colonnes (entreprise à gauche, rôle à droite), séparées par un filet fin */
.experiences { border-top: 1px solid var(--trait); }
.experience { display: grid; gap: 0.75rem 3rem; padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--trait); }
@media (min-width: 56.25rem) { .experience { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } }
.experience .periode { margin: 0 0 0.35rem; font-family: var(--titre); font-weight: 600; font-size: 0.9rem; color: var(--or-fonce); }
.experience h3 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 2vw, 2rem); color: var(--marine); }
.experience .contexte { margin: 0; font-size: 0.9rem; color: var(--texte-doux); }
.experience .poste { margin: 0 0 0.85rem; font-family: var(--titre); font-weight: 600; font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.3; color: var(--marine); }
.experience-intro { color: var(--texte); }
.resultats-pastilles { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.resultats-pastilles li { padding: 0.3rem 0.8rem; border-radius: 0.5rem; background: var(--dore-clair); color: var(--marine); font-weight: 700; font-size: 0.95rem; }
.responsabilites { margin: 0; padding-left: 1.2rem; color: var(--texte); }
.responsabilites li { margin-bottom: 0.45rem; }
.responsabilites li:last-child { margin-bottom: 0; }
.responsabilites li::marker { color: var(--or); }
.frise-details.responsabilites { margin: 0; color: var(--texte); }
.experiences + .formation { margin-top: 1.5rem; }
/* ===== Échelle typographique unique : appliquée partout (remplace les tailles propres à chaque composant) ===== */
.article h1 { font-size: var(--t-h1); }
.faq-groupe h2, .texte-legal h2, .article-corps h2, .article-une h2 { font-size: var(--t-h2); }
.contact-bloc h3, .contact-bloc-prioritaire h3, .carte-article h3, .experience h3, .faq-question { font-size: var(--t-h3); }
.intro .chapeau, .hero .chapeau, .entete-section p:not(.surtitre), .article-une h2 + p { font-size: var(--t-chapeau); }
.texte-parcours, .texte-parcours strong, .article-corps, .offre .cible, .offre-detail .cible, .cas-sous-titre, .prix { font-size: var(--t-texte); }
.surtitre, .carte-flottante, .chiffres-compact li, .chiffres li, .frise .periode, .formation, .outils, .exemple-mission, .faq-liens,
.champ label, .mention-form, .pastilles li, .note-prix, .reco figcaption, .reco-cas figcaption, .meta-article, .auteur p,
.carte-article .date, .article-meta .date, .pied, .mention-francenum, .agenda-mention, .agenda-lien,
.experience .periode, .experience .contexte, .resultats-pastilles li, .etiquette-une { font-size: var(--t-petit); }
/* Intro de page : tous les paragraphes d'introduction ont le même style */
.intro p.chapeau { color: var(--texte-doux); }
/* Bouton de retour en haut de page (créé par site.js) */
.retour-haut {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--marine);
  color: var(--blanc);
  box-shadow: var(--ombre);
  cursor: pointer;
}
.retour-haut:hover { background: var(--or); color: var(--marine); }
.retour-haut:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
@media (max-width: 56.25rem) {
  .retour-haut { width: 2.75rem; height: 2.75rem; }
  /* En bas de page, le bouton se pose sous le dernier lien du pied de page au lieu de le masquer */
  .pied { padding-bottom: 5.5rem; }
}
/* Page Parcours : logo de chaque entreprise, au-dessus de son nom */
.logo-entreprise { display: block; width: auto; height: 32px; max-width: 140px; object-fit: contain; object-position: left center; margin: 0.6rem 0; }

/* Page Accompagnement : photo de chaque accompagnement (4:3, non recadrée), sous « Pour qui » */
.image-accompagnement { width: 100%; margin: 0; border-radius: var(--rayon); }

/* Page Accompagnement : photo (40 %) et accroche côte à côte, centrées verticalement ; puis Pour qui, liste, bandeau en pleine largeur */
.offre-rangee { display: grid; gap: 1.25rem 2.5rem; margin-bottom: 1.75rem; }
@media (min-width: 56.25rem) { .offre-rangee { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; } }
.offre-rangee .accroche { margin: 0; }
.offre-suite > :last-child { margin-bottom: 0; }
@media (min-width: 56.25rem) {
  .liste-puces.liste-deux-colonnes { columns: 2; column-gap: 3rem; }
  .liste-deux-colonnes li { break-inside: avoid; }
}

/* Introductions de page : pleine largeur du conteneur, 900 px au maximum */
.intro p.chapeau, .intro .chapeau { max-width: 900px; }
/* ===== Page Réalisations : cas en cartes (identité à gauche 22 %, contenu à droite 78 %) ===== */
.intro-realisations { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 2rem; }
.intro-realisations .surtitre { justify-self: start; }
.intro-bouton { margin: 0.5rem 0 0; }
@media (min-width: 56.25rem) {
  .intro-realisations { grid-template-columns: minmax(0, 1fr) auto; }
  .intro-realisations > * { grid-column: 1; }
  .intro-realisations .intro-bouton { grid-column: 2; grid-row: 2; margin: 0; }
}
main section.cas { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
.cas-carte { display: grid; gap: 1.5rem; background: var(--blanc); border: 1px solid #E6E4EE; border-radius: var(--rayon-grand); padding: clamp(1.25rem, 3vw, 2.5rem); }
.cas-carte-gris { background: #F7F6FA; }
@media (min-width: 56.25rem) {
  .cas-carte { grid-template-columns: minmax(0, 22fr) minmax(0, 78fr); gap: 0; }
  .cas-identite { padding-right: 2rem; border-right: 1px solid #E6E4EE; }
  .cas-contenu { padding-left: 2.5rem; }
}
.cas-identite { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.cas-identite .surtitre { margin: 0; }
.cas-logo { display: grid; place-items: center; width: 6rem; height: 6rem; padding: 0.75rem; background: var(--blanc); border: 1px solid #E6E4EE; border-radius: 0.9rem; }
.cas-logo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.cas-logo-picto { color: var(--marine); display: grid; place-items: center; }
.cas-logo-picto svg { width: 2.5rem; height: 2.5rem; }
.cas-secteur { margin: 0; font-variant: all-small-caps; letter-spacing: 0.08em; font-weight: 600; font-size: var(--t-petit); color: var(--texte-doux); }
.cas-secteur::before { content: ""; display: block; width: 1.75rem; height: 2px; margin-bottom: 0.6rem; background: var(--or); border-radius: 2px; }
.cas-contenu h2 { margin: 0 0 0.4rem; color: var(--marine); }
.cas-contenu .cas-sous-titre { margin: 0 0 0.5rem; }
/* Bandeau des chiffres : fond doré clair, filets dorés verticaux */
.cas-contenu .chiffres.chiffres-cas { display: flex; flex-wrap: wrap; gap: 0; margin: 1.25rem 0 0; padding: 1rem 0; background: var(--dore-clair); border: 0; border-radius: var(--rayon); }
.cas-contenu .chiffres.chiffres-cas li { flex: 1 1 0; max-width: none; padding: 0.25rem 1.5rem; }
.cas-contenu .chiffres.chiffres-cas li + li { border-left: 1px solid rgba(218, 165, 47, 0.55); }
.cas-contenu .chiffres-cas strong::before { content: none; }
/* Problème, Solution, Résultat : trois colonnes égales, filets verticaux, alignées en haut */
.cas-contenu .cas-blocs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.75rem; border: 0; }
.cas-contenu .cas-blocs > div, .cas-contenu .cas-blocs .resultat { display: block; padding: 0; border: 0; border-radius: 0; background: none; color: var(--texte); }
@media (min-width: 56.25rem) {
  .cas-contenu .cas-blocs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; }
  .cas-contenu .cas-blocs > div { padding: 0 1.5rem; }
  .cas-contenu .cas-blocs > div:first-child { padding-left: 0; }
  .cas-contenu .cas-blocs > div:last-child { padding-right: 0; }
  .cas-contenu .cas-blocs > div + div { border-left: 1px solid #E6E4EE; }
}
.cas-contenu .cas-blocs .picto-cercle { width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; }
.cas-contenu .cas-blocs h3, .cas-contenu .cas-blocs .resultat h3 { margin: 0 0 0.5rem; font-size: var(--t-petit); text-transform: uppercase; letter-spacing: 0.1em; color: var(--marine); }
.cas-contenu .cas-blocs p { margin: 0; }
.cas .reco-cas { margin: 1.25rem 0 0; }
/* Mobile : chiffres les uns sous les autres */
@media (max-width: 56.25rem) {
  .cas-contenu .chiffres.chiffres-cas { flex-direction: column; padding: 0.5rem 1.25rem; }
  .cas-contenu .chiffres.chiffres-cas li { padding: 0.75rem 0; }
  .cas-contenu .chiffres.chiffres-cas li + li { border-left: 0; border-top: 1px solid rgba(218, 165, 47, 0.55); }
}
/* Page Accompagnement : pictogramme à gauche du titre, centré sur sa première ligne, 16 px d'écart */
.offre-titre { display: flex; align-items: flex-start; gap: 16px; font-size: var(--t-h2); margin-bottom: 0.6em; }
.offre-titre .picto-cercle { flex: none; margin: calc((1.15em - 3rem) / 2) 0 0; }
.offre-titre h2 { margin: 0; font-size: 1em; line-height: 1.15; }
/* Recommandation dans la carte du cas, sous les trois colonnes : sans cadre, séparée par un filet fin */
.cas-contenu .reco-cas { margin: 28px 0 0; padding: 28px 0 0; border: 0; border-top: 1px solid #E6E4EE; border-radius: 0; background: none; max-width: none; }
/* Bandeau d'un seul chiffre : largeur ajustée au contenu */
.cas-contenu .chiffres.chiffres-cas.chiffres-seul { width: fit-content; max-width: 100%; }
.cas-contenu .chiffres-seul li { flex: none; }.cas-contenu .reco-cas blockquote p { max-width: none; }

/* Page Accompagnement : mention France Num sur une ligne (ordinateur) */
@media (min-width: 56.25rem) { .expertise-growth .mention-francenum { max-width: none; } }
/* « Et ensuite » et « Un sujet précis » : même structure que les accompagnements, paragraphes limités à 900 px */
.offre-texte p { max-width: 900px; }
.offre-texte { margin-bottom: 1.25rem; }
#mise-en-oeuvre .offre-texte { margin-bottom: 0; }
.offre-texte .accroche { margin-bottom: 1rem; }
@media (min-width: 56.25rem) {
  .liste-fleches.liste-deux-colonnes { display: block; columns: 2; column-gap: 3rem; }
  .liste-fleches.liste-deux-colonnes li { margin-bottom: 0.5rem; }
}

/* Pied de page : icône LinkedIn à côté du lien */
.pied-linkedin { display: flex; align-items: center; gap: 0.6rem; }
.pied .icone-linkedin { display: inline-flex; padding: 0.2rem; color: var(--blanc); }
.pied .icone-linkedin:hover { color: var(--or); }
/* ===== Largeurs de texte : règle unique pour tout le site =====
   Titres : toute la largeur de leur conteneur. Paragraphes et listes de texte : 900 px au maximum.
   Blocs et cartes : toute la largeur du conteneur. Exceptions conservées : colonnes côte à côte voulues
   (photo + texte, colonnes des Réalisations, cartes en grille), images, logos, bandeaux de chiffres. */
h1, h2, h3,
.bandeau-cta h2, .article-une h2 { max-width: none; text-wrap: balance; }
p, .hero .chapeau, .hero .sous-titre-hero, .intro .chapeau, .intro p.chapeau, .entete-section p:not(.surtitre),
.bandeau-cta p, .a-propos-texte p, .article-une h2 + p, .texte-legal p, .offre-texte p { max-width: 900px; }
.liste-puces, .liste-fleches, .responsabilites, .volets, .frise-details,
.article-corps ul, .article-corps ol, .texte-legal ul, .faq-reponse ul, .faq-reponse ol { max-width: 900px; }
.entete-section, .bloc-texte, .texte-parcours, .frise, .faq-groupe, .faq-reponse,
.texte-legal .a-rediger, .article .conteneur { max-width: none; }
.article .conteneur { max-width: var(--largeur); }/* Exception voulue : la mention France Num tient sur une ligne sur ordinateur (demande du 22/10) */
.mention-indicative { max-width: 900px; }

/* Page 404 */
.liens-404 { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.liens-404 a { font-family: var(--titre); font-weight: 600; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.page-404 { padding-block: clamp(3rem, 8vw, 6rem); }

/* Articles : encart auteure (photo ronde, nom en gras, lien vers le Parcours) et bloc « Pour aller plus loin » */
.auteur > div { display: grid; gap: 0.4rem; }
.auteur a { font-family: var(--titre); font-weight: 600; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.plus-loin { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--or); background: var(--fond-doux); border-radius: 0 var(--rayon) var(--rayon) 0; }
.plus-loin-titre { margin: 0 0 0.5rem; font-family: var(--titre); font-weight: 600; color: var(--marine); }
.plus-loin ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.plus-loin li::marker { color: var(--or); }
.plus-loin a { color: var(--marine); text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }.lien-cas { margin: 0.9rem 0 0; font-family: var(--titre); font-weight: 600; }
.lien-cas a { text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.lien-cas a::after { content: " →"; }

/* Accueil, sous 900 px : la photo du bloc À propos passe sous le texte (évite deux photos d'affilée) */
@media (max-width: 56.25rem) { .a-propos .image { order: 2; } }

/* Page Accompagnement IA : sections de contenu */
.ia-section h2 { margin-bottom: 1rem; }
.liste-numerotee { list-style: none; counter-reset: etape; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; max-width: 900px; }
.liste-numerotee li { counter-increment: etape; position: relative; padding-left: 3.25rem; min-height: 2.25rem; }
.liste-numerotee li::before { content: counter(etape); position: absolute; left: 0; top: -0.1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dore-clair); color: var(--marine); font-family: var(--titre); font-weight: 700; }
.liste-numerotee strong, .ia-section .liste-puces strong { color: var(--marine); }
.lien-voir { font-family: var(--titre); font-weight: 600; white-space: nowrap; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.lien-voir::after { content: " →"; }
/* ===== Accompagnements : rangée photo + accroche en bloc marine ===== */
.offre-rangee .accroche {
  display: flex;
  align-items: center;
  margin: 0;
  max-width: none;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  border: 0;
  border-radius: 20px;
  background: var(--marine);
  color: var(--blanc);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
}
.offre-rangee .image-accompagnement { margin: 0; }
@media (min-width: 56.25rem) {
  /* Photo et bloc marine de même hauteur : le bloc s'étire, son texte est centré verticalement */
  .offre-rangee { align-items: stretch; }
  /* La photo alterne de côté : à droite pour le deuxième accompagnement */
  #coherence-strategique .offre-rangee { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  #coherence-strategique .offre-rangee .image-accompagnement { order: 2; }
}
/* « Pour qui » : une ligne en gras, marine, juste avant la liste */
.offre-suite .cible { font-weight: 700; color: var(--marine); margin-bottom: 0.75rem; }
/* Fonds alternés : deuxième accompagnement et « Et ensuite » sur gris clair, coins arrondis */
#coherence-strategique.fond-doux, #mise-en-oeuvre.fond-doux { background: #F7F6FA; }
/* ===== Accompagnements : accroche en carte marine posée sur la photo (remplace l'étirement à la hauteur de la photo) ===== */
.offre-rangee .accroche {
  position: relative;
  z-index: 1;
  display: block;
  align-self: center;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  border-left: 5px solid #DAA52F;
  border-radius: 20px;
  font-size: 1.125rem;   /* 18 px sur mobile */
  line-height: 1.5;
  box-shadow: 0 18px 40px -20px rgba(36, 43, 90, 0.55);
}
@media (min-width: 56.25rem) {
  .offre-rangee { align-items: center; }
  .offre-rangee .accroche { font-size: clamp(1.3125rem, 1.5vw, 1.375rem); margin-left: calc(-2.5rem - 40px); }   /* 21 à 22 px ; franchit l'écart de la grille et chevauche la photo de 40 px */
  #coherence-strategique .offre-rangee .accroche { margin-left: 0; margin-right: calc(-2.5rem - 40px); }      /* photo à droite : chevauchement vers la droite */
}
/* ===== Largeur des textes : plus de limite à 900 px. Introductions, paragraphes isolés et listes occupent toute
   la largeur de leur conteneur, comme les titres. Les colonnes voulues (photo + accroche, À propos, Réalisations,
   cartes, formulaire, expériences du Parcours) gardent leur propre largeur de colonne. */
p, .hero .sous-titre-hero, .hero .chapeau, .intro .chapeau, .intro p.chapeau, .entete-section p:not(.surtitre),
.bandeau-cta h2, .bandeau-cta p, .a-propos-texte p, .article-une h2 + p, .texte-legal p, .texte-legal .a-rediger, .offre-texte p,
.mention-indicative, .liste-puces, .liste-fleches, .liste-numerotee, .responsabilites, .volets, .frise-details,
.article-corps ul, .article-corps ol, .texte-legal ul, .faq-reponse, .faq-reponse ul, .faq-reponse ol, .reco-cas, .bloc-texte { max-width: none; }
/* Chapô sous les titres de page : plus grand, pour des lignes lisibles sur grand écran */
.intro .chapeau, .intro p.chapeau { font-size: clamp(1.125rem, 1.4vw, 1.4375rem); }
/* ===== Harmonisation typographique ===== */
/* 1. « Pour qui » : Urbanist SemiBold 19 px, marine */
.offre-detail .cible, .offre-suite .cible { font-family: var(--titre); font-weight: 600; font-size: 1.1875rem; color: var(--marine); }
/* 2. Gras dans les paragraphes et les listes : une seule graisse, Montserrat SemiBold */
main p strong, main li strong, main dd strong, .texte-parcours strong, .auteur strong { font-family: var(--corps); font-weight: 600; font-size: inherit; }
/* 3. Liens de suite (« En savoir plus sur l'accompagnement IA ») : Urbanist SemiBold 17 px, comme les autres */
.offre-suite .lien-carte, .lien-voir, .lien-cas { font-family: var(--titre); font-weight: 600; font-size: 1.0625rem; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* 4. Bandeaux « Concrètement » : prix en Urbanist SemiBold 16 px, comme le titre du bandeau */
.exemple-bandeau .exemple-prix, .exemple-mission .exemple-prix { font-family: var(--titre); font-weight: 600; font-size: 1rem; }
.exemple-mission .exemple-titre { font-size: 1rem; }
/* 5. Signatures des recommandations : 17 px partout, nom en Urbanist Bold, fonction en Montserrat Regular */
.reco figcaption, .reco-cas figcaption { font-family: var(--corps); font-weight: 400; font-size: 1.0625rem; }
.reco figcaption strong, .reco-cas figcaption strong { font-family: var(--titre); font-weight: 700; font-size: inherit; }
/* 6. Accroches en italique : 18 px sur mobile, 22 px sur ordinateur, partout */
.accroche, .offre-rangee .accroche, .offre-texte .accroche, .bloc-texte .accroche { font-size: 1.125rem; }
@media (min-width: 56.25rem) { .accroche, .offre-rangee .accroche, .offre-texte .accroche, .bloc-texte .accroche { font-size: 1.375rem; } }
/* 7. Source des chiffres clés de l'accueil : 12 px */
.chiffre-source { font-size: 12px; }
/* 8. Grands chiffres : une seule taille, 38 px, pour tous les chiffres clés */
.chiffres strong, .chiffres.chiffres-compact strong, .chiffres-compact strong, .chiffres-accueil strong, .chiffres-cas strong, .carte-flottante strong { font-size: 2.375rem; }
/* ===== Rythme vertical resserré (sur tout le site) ===== */
:root { --marge-section: clamp(2rem, 3.4vw, 3rem); }   /* 32 px sur mobile, 48 px sur ordinateur */
/* 1. Marges des sections, fonds alternés compris */
main section, main section.cas, main section.fond-doux, main section.panneau-marine, main section.panneau-dore, main section.bandeau-cta,
#presence-digitale, #coherence-strategique, #intelligence-artificielle, #sujet-ponctuel, #mise-en-oeuvre, .ia-section, .page-404 { padding-block: var(--marge-section); }
.bande-leviers { padding-block: 1.5rem; }
/* 2. Haut de page : 56 px en haut (32 px sur mobile), 24 px en bas */
main section.intro, main section.intro.page-404 { padding-top: clamp(2rem, 3.9vw, 3.5rem); padding-bottom: 1.5rem; }
main section.hero { padding-block: clamp(2rem, 3.9vw, 3.5rem); }
/* 3. Espaces internes réduits en proportion */
.entete-section { margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); }
.offre-rangee { margin-bottom: 1.25rem; }
.exemple-mission.exemple-bandeau { margin-top: 1.5rem; }
.cas-contenu .cas-blocs { margin-top: 1.25rem; }
.lien-realisations { margin-top: 1.5rem; }
.chiffres.chiffres-accueil { margin-top: clamp(1.5rem, 3vw, 2rem); padding-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.raccourcis ul { margin-top: 1.25rem; }
.hero .actions { margin-top: 1.5rem; }
/* Accueil : photo du haut de page un peu moins haute, pour que la suite apparaisse sans défilement */
.hero-visuel.avec-photo { aspect-ratio: 4 / 3.4; }
.hero-visuel.avec-photo > img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }   /* l'image ne doit pas agrandir le cadre */
/* 4. Parcours : la photo ne dépasse pas la hauteur du texte à côté (recadrée en gardant le visage) */
@media (min-width: 52rem) {
  .parcours-grille { align-items: stretch; }
  .parcours-grille .portrait { height: 0; min-height: 100%; object-fit: cover; object-position: center 12%; }
}
@media (max-width: 52rem) { .parcours-grille .portrait { max-height: 26rem; object-fit: cover; object-position: center 12%; } }
/* ===== Bandeau de bas de page : titre, bouton, puis mention ; cartouche compact ===== */
main section.bandeau-cta { padding-block: 1.75rem; margin-top: 0; }
@media (min-width: 56.25rem) { main section.bandeau-cta { padding-block: 2.5rem; } }   /* 40 px sur ordinateur, 28 px sur mobile */
.bandeau-cta h2 { margin-bottom: 1rem; }
.bandeau-mention, .bandeau-cta p.bandeau-mention { margin: 12px 0 0; font-family: var(--corps); font-weight: 400; font-size: 15px; color: var(--texte-doux); }
/* Lionne en décor : plus petite, elle ne dicte plus la hauteur du cartouche */
.bandeau-cta::before { background-size: auto 70%; background-position: right 4% center; }
@media (max-width: 52rem) { .bandeau-cta::before { background-size: auto 55%; background-position: right -1.5rem center; } }

/* ===== Bloc de fin des pages Accompagnement : bouton, puis note ; cartouche gris compact ===== */
main section.conclusion-accompagnement { padding-block: 1.5rem; margin-top: 0; }
@media (min-width: 56.25rem) { main section.conclusion-accompagnement { padding-block: 2rem; } }   /* 32 px sur ordinateur, 24 px sur mobile */
.conclusion-accompagnement p { margin: 0; }
.conclusion-accompagnement .mention-indicative { margin-top: 12px; font-family: var(--corps); font-weight: 400; font-style: italic; font-size: 15px; color: var(--texte-doux); }

/* Barres d'accroche : toutes dorées */
.accroche { border-left-color: #DAA52F; }
/* Accueil : photo du haut de page en portrait 4:5, environ 45 % de la largeur du haut de page sur ordinateur */
.hero-visuel.avec-photo { aspect-ratio: 4 / 5; }
.hero-visuel.avec-photo > img.photo { object-position: center 18%; }
@media (min-width: 52rem) { .hero .conteneur { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }

/* Page Accompagnement : accroches de « Et ensuite » et « Un sujet précis » au même style que les accompagnements,
   en pleine largeur (pas de photo à côté, donc pas de chevauchement) */
.offre-texte .accroche {
  max-width: none;
  margin: 0 0 1.25rem;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  border-left: 5px solid #DAA52F;
  border-radius: 20px;
  background: var(--marine);
  color: var(--blanc);
  font-style: italic;
  line-height: 1.5;
  box-shadow: 0 18px 40px -20px rgba(36, 43, 90, 0.55);
}
/* Accueil : les deux boutons du haut de page côte à côte dès que la colonne de texte les contient (empilés sinon) */
@container (min-width: 35rem) {
  .hero .actions { flex-wrap: nowrap; gap: 0.75rem; }
  .hero .actions .bouton { flex: none; font-size: 0.95rem; padding-left: 1rem; gap: 0.5rem; }
}

/* Réalisations : sous-titre du cas, lien vers le retour d'expérience dans la carte */
.cas-contenu .lien-cas { margin: 1.25rem 0 0; }
/* Recommandations : grille équilibrée, dernière ligne incomplète centrée (quel que soit le nombre de cartes) */
#recommandations .grille-reco { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
#recommandations .grille-reco > .reco { flex: 0 1 100%; }
@media (min-width: 48rem) { #recommandations .grille-reco > .reco { flex-basis: calc(50% - 0.625rem); } }

/* Ressources : « Lire l'article → », un seul soulignement continu sous le texte et la flèche */
.carte-article .lien-carte, .article-une .lien-carte { display: inline; align-self: flex-start; }
.carte-article .lien-carte::after, .article-une .lien-carte::after { content: "\00a0→"; display: inline; text-decoration: inherit; }
.carte-article .lien-carte { margin-top: auto; padding-top: 0.75rem; }

/* Contact : les trois blocs sont des options au choix, sans numéro */
.contact-bloc h3 { margin-top: 0; }.carte-article .lien-carte, .article-une .lien-carte { width: fit-content; }

/* ===== Accueil, haut de page : photo à environ 40 % et texte réparti sur la hauteur de la photo ===== */
.hero-visuel.avec-photo { aspect-ratio: 4 / 5.2; }                       /* portrait, légèrement plus étroit que la photo */
.hero-visuel.avec-photo > img.photo { object-position: 28% 16%; }        /* coupe un peu à droite, visage dans le tiers supérieur */
@media (min-width: 52rem) {
  .hero .conteneur { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: stretch; }
  .hero .hero-visuel { align-self: start; }
  /* Colonne de texte étirée sur la hauteur de la photo : haut aligné sur la photo, boutons sur son bas */
  .hero .conteneur > div:first-child { display: flex; flex-direction: column; padding-bottom: 2rem; }
  .hero .surtitre { align-self: flex-start; margin-bottom: 1.25rem; }
  .hero h1.titre-discret { margin-bottom: 0.9rem; }
  .hero .accroche-principale { margin-bottom: 0; }
  .hero .sous-titre-hero { margin-top: auto; padding-top: 1.75rem; margin-bottom: 1.25rem; }
  .hero .chapeau { margin-bottom: 0; }
  .hero .actions { margin-top: auto; padding-top: 2.5rem; }
}
/* ===== Accueil, haut de page : texte centré face à la photo (sans étirement), espacements gradués ===== */
.hero-visuel.avec-photo { aspect-ratio: 5 / 6; }   /* 5:6 plutôt que 4:5 : boutons visibles sans défiler à 1 366 × 650 */
@media (min-width: 52rem) {
  .hero .conteneur { align-items: center; }
  .hero .hero-visuel { align-self: auto; }
  .hero .conteneur > div:first-child { display: block; padding-bottom: 0; }
  .hero .surtitre { margin-bottom: 16px; }
  .hero h1.titre-discret { margin-bottom: 12px; }
  .hero .accroche-principale { margin-bottom: 28px; }
  .hero .sous-titre-hero { margin: 0 0 16px; padding-top: 0; }
  .hero .chapeau { margin-bottom: 0; }
  .hero .actions { margin-top: 36px; padding-top: 0; }
}@media (min-width: 52rem) { .hero .hero-visuel { margin-bottom: 0; } }   /* centrage exact texte / photo ; le badge déborde dans la marge du panneau */
@media (min-width: 52rem) { main section.hero { padding-top: 8px; } }   /* haut du bloc marine resserré : boutons visibles à 1 366 × 650 */

/* ===== Accompagnement « Faire de votre présence en ligne une source de clients » : expertise growth et deux formats ===== */
.format-corps .liste-puces strong { font-weight: 600; color: var(--marine); }
.expertise-growth { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.expertise-growth h3, .formats h3 { font-size: var(--t-h3); color: var(--marine); margin: 0 0 0.75rem; }
.expertise-growth p { margin: 0; }
.expertise-growth .mention-francenum { margin-top: 1.25rem; }
.formats { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.formats-grille { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 48rem) { .formats-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.format-carte { display: flex; flex-direction: column; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; }
.format-carte .format-image { margin: 12px 12px 0; border-radius: var(--rayon); overflow: hidden; }
.format-corps { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2vw, 1.75rem); }
.format-corps h4 { font-family: var(--titre); font-weight: 600; font-size: clamp(1.3125rem, 1.5vw, 1.5rem); line-height: 1.25; color: var(--marine); margin: 0 0 0.6rem; }
.format-corps p { margin: 0 0 1rem; }
.format-corps .liste-puces { margin: 0 0 1.25rem; }
.format-corps .format-prix { margin: auto 0 0; padding-top: 0.75rem; border-top: 1px solid var(--trait); font-family: var(--titre); font-weight: 600; font-size: 1rem; color: var(--marine); }

/* Accueil : trois cartes d'accompagnement sur une ligne */
.grille.grille-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56.25rem) { .grille.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Parcours, mobile (moins de 600 px) : chiffres les uns sous les autres, chiffre à gauche à largeur fixe, libellé à droite, filet horizontal pleine largeur entre les lignes */
@media (max-width: 37.4375rem) {
  .chiffres.chiffres-compact { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .chiffres.chiffres-compact li { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; }
  .chiffres.chiffres-compact li + li { border-left: 0; border-top: 1px solid var(--trait); }
  .chiffres.chiffres-compact li strong { flex: 0 0 6.5rem; margin: 0; font-family: var(--titre); font-weight: 600; font-size: 1.875rem; line-height: 1.1; }
}