:root {
  color-scheme: light;
  --focus: #e89500;
  --teal: #064858;
  --teal-dark: #033b49;
  --mustard: #e8aa20;
  --cream: #f7f2e9;
  --site-width: 1536px;
  --header-height: 138px;
  --top-band-height: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f4f0e8; }
body { font-family: Arial, Helvetica, sans-serif; color: var(--teal-dark); }

/* En-tête homogène inspiré du visuel validé */
.site-header {
  position: relative;
  z-index: 50;
  width: 100%;
  background: #f5f2ee;
  border-bottom: 1px solid rgba(6,72,88,.08);
  box-shadow: 0 4px 18px rgba(0,39,51,.055);
}
.header-inner {
  width: min(100%, var(--site-width));
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 22px clamp(26px, 4vw, 86px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.site-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.site-logo img {
  display: block;
  width: clamp(335px, 25vw, 410px);
  height: auto;
  max-height: 96px;
  object-fit: contain;
}
.site-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  margin-left: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 2.35vw, 46px);
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 0;
  color: #17384a;
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -10px;
  height: 4px;
  border-radius: 999px;
  background: var(--mustard);
  transition: right .2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--mustard); }
.nav-links .with-caret::before {
  content: "▾";
  order: 2;
  margin-left: 7px;
  font-size: .8em;
  transform: translateY(-1px);
}
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #e7aa21;
  color: #17384a;
  text-decoration: none;
  font-size: clamp(16px, 1.08vw, 18px);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.header-cta:hover { filter: brightness(.98); }
.header-cta .heart { margin-left: 10px; font-size: 1.1em; line-height: 1; }
.menu-toggle { display: none; }

.page-shell {
  width: 100%;
  min-height: calc(100vh - var(--header-height) - var(--top-band-height));
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.page-canvas {
  position: relative;
  width: min(100%, var(--site-width));
  aspect-ratio: var(--design-width) / var(--cropped-height);
  overflow: hidden;
  line-height: 0;
  background: #fff;
  box-shadow: 0 0 42px rgba(0,39,51,.10);
}
.page-art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(-1 * var(--crop-ratio));
  user-select: none;
  -webkit-user-drag: none;
}
.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 8px;
  text-decoration: none;
  background: rgba(255,255,255,0);
  line-height: normal;
  cursor: pointer;
}
.hotspot:hover { background: rgba(232,149,0,.055); }
.hotspot:focus-visible,
.nav-links a:focus-visible,
.menu-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.local-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  padding: 7px 10px;
  border: 1px solid rgba(0,61,74,.18);
  border-radius: 999px;
  color: #064858;
  background: rgba(255,255,255,.88);
  box-shadow: 0 5px 18px rgba(0,0,0,.08);
  font: 600 11px/1.1 Arial, sans-serif;
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
body.show-local-badge .local-badge { opacity: 1; }

@media (max-width: 1024px) {
  :root { --header-height: 112px; --top-band-height: 0px; }
  .header-inner { padding: 16px 20px; gap: 16px; }
  .site-logo img { width: clamp(255px, 34vw, 330px); max-height: 80px; }
  .menu-toggle {
    display: inline-flex;
    position: relative;
    z-index: 3;
    flex: 0 0 50px;
    width: 50px;
    height: 46px;
    border: 1px solid rgba(6,72,88,.16);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--teal);
    cursor: pointer;
  }
  .menu-toggle-lines { display: grid; gap: 5px; }
  .menu-toggle-lines span { display: block; width: 22px; height: 2px; border-radius: 3px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: 16px 18px 20px;
    background: #f5f2ee;
    border-top: 1px solid rgba(6,72,88,.08);
    box-shadow: 0 18px 28px rgba(0,39,51,.12);
  }
  .site-navigation.open { display: block; }
  .nav-links { display: grid; gap: 3px; }
  .nav-links a { min-height: 52px; padding: 14px 12px; border-radius: 10px; font-size: 18px; }
  .nav-links a::after { display: none; }
  .nav-links a.active { background: rgba(232,149,0,.08); }
  .header-cta {
    display: none;
  }
}
@media (max-width: 520px) {
  html, body { background: #fff; }
  .header-inner { padding-inline: 14px; }
  .site-logo img { width: min(240px, 68vw); }
  .page-canvas { box-shadow: none; }
  .hotspot:hover { background: transparent; }
}

/* Correction visuelle : les maquettes source contiennent une basket qui dépasse sous leur ancien en-tête.
   On masque uniquement ce débordement sans recadrer le contenu utile. */
body[data-page="index.html"] .page-canvas::before,
body[data-page="contact.html"] .page-canvas::before,
body[data-page="premier-echange.html"] .page-canvas::before,
body[data-page="observation-orthopedagogique.html"] .page-canvas::before,
body[data-page="accompagnement-parental.html"] .page-canvas::before,
body[data-page="ateliers-interventions.html"] .page-canvas::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 5.4%;
  width: 7.6%;
  height: 18px;
  background: linear-gradient(90deg, #fdf8f2 0%, #fdfaf6 55%, #fff 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  body[data-page] .page-canvas::before { height: 14px; }
}

@media print {
  .site-header, .hotspot, .local-badge { display: none !important; }
  .page-canvas { box-shadow: none; width: 100%; }
}

/* Politique de confidentialité et liens légaux */
.site-legal-footer {
  width: 100%;
  min-height: 62px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  color: rgba(255,255,255,.88);
  background: var(--teal);
  font-size: 13px;
  line-height: 1.4;
}
.site-legal-footer a { color: #fff; text-underline-offset: 4px; }
.site-legal-footer a:hover { color: #ffd478; }
.legal-main { width: 100%; background: linear-gradient(180deg, #fff 0%, #fbf7f0 100%); }
.legal-hero {
  padding: clamp(52px, 8vw, 96px) 24px clamp(42px, 6vw, 72px);
  text-align: center;
  color: var(--teal-dark);
  background:
    radial-gradient(circle at 12% 25%, rgba(232,149,0,.11), transparent 27%),
    radial-gradient(circle at 88% 10%, rgba(6,72,88,.10), transparent 30%),
    #fffaf3;
}
.legal-eyebrow { margin: 0 0 12px; color: var(--mustard); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.legal-hero h1 { margin: 0 auto 18px; max-width: 900px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 6vw, 70px); line-height: 1.02; font-weight: 600; }
.legal-hero > p:not(.legal-eyebrow):not(.legal-update) { max-width: 780px; margin: 0 auto; font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.legal-update { margin: 22px 0 0; font-size: 14px; color: #587079; }
.legal-alert { max-width: 1050px; margin: 34px auto 0; padding: 18px 22px; border: 1px solid rgba(232,149,0,.35); border-left: 6px solid var(--mustard); border-radius: 14px; background: #fff7e7; color: #563c0c; line-height: 1.55; }
.legal-content { max-width: 1050px; margin: 0 auto; padding: 38px 24px 88px; }
.legal-content section { padding: 30px 0; border-bottom: 1px solid rgba(6,72,88,.12); }
.legal-content section:last-child { border-bottom: 0; }
.legal-content h2 { margin: 0 0 16px; font-family: Georgia, 'Times New Roman', serif; color: var(--teal); font-size: clamp(25px, 3vw, 34px); line-height: 1.2; }
.legal-content p, .legal-content li { font-size: 16px; line-height: 1.75; }
.legal-content ul { margin: 12px 0 0; padding-left: 24px; }
.legal-content li + li { margin-top: 7px; }
.legal-content a { color: var(--teal); font-weight: 700; text-underline-offset: 3px; }
.legal-card, .legal-note { margin-top: 16px; padding: 20px 22px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0,39,51,.07); }
.placeholder-card { border: 1px dashed rgba(232,149,0,.7); }
.to-complete { padding: 1px 5px; border-radius: 5px; background: #fff0c7; color: #6a4700; }
.legal-note { border-left: 5px solid var(--mustard); background: #fffaf0; }
.legal-table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid rgba(6,72,88,.12); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0,39,51,.05); }
.legal-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(6,72,88,.09); line-height: 1.55; }
.legal-table th { color: #fff; background: var(--teal); }
.legal-table tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  .site-legal-footer { padding-inline: 18px; text-align: center; }
  .legal-alert { margin-inline: 16px; }
  .legal-content { padding-inline: 18px; }
  .legal-content section { padding-block: 24px; }
}

/* Accueil validé — maquette intégrée comme page locale interactive */
body.home-approved {
  background: #fff;
}
body.home-approved .home-shell {
  min-height: 0;
  background: #fff;
}
body.home-approved .home-canvas {
  width: min(100%, 1537px);
  aspect-ratio: 1537 / 1023;
  box-shadow: 0 0 42px rgba(0,39,51,.10);
  background: #fff;
}
body.home-approved .home-art {
  width: 100%;
  height: auto;
  margin-top: 0;
}
body.home-approved .page-canvas::before {
  display: none !important;
}
body.home-approved .home-hotspot {
  z-index: 4;
  border-radius: 14px;
}
body.home-approved .home-hotspot:hover {
  background: rgba(232,149,0,.075);
  box-shadow: inset 0 0 0 2px rgba(232,149,0,.28);
}
body.home-approved .home-hotspot:focus-visible {
  outline: 4px solid #e89500;
  outline-offset: -4px;
  background: rgba(255,255,255,.12);
}
@media (max-width: 700px) {
  body.home-approved .home-canvas {
    box-shadow: none;
  }
  body.home-approved .site-legal-footer {
    font-size: 12px;
  }
}

/* Qui suis-je ? — parcours validé, construit en vrais éléments HTML */
body.about-redesign {
  background: #fff;
}
.about-main {
  width: 100%;
  background: #fff;
}
.about-parcours {
  width: min(100%, 1536px);
  margin: 0 auto;
  padding: clamp(48px, 5vw, 78px) clamp(18px, 1.6vw, 26px) clamp(58px, 6vw, 94px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(44px, 4.7vw, 76px);
  align-items: start;
}
.about-visual {
  min-width: 0;
}
.about-visual img {
  display: block;
  width: 100%;
  max-width: 724px;
  height: auto;
  margin: 0 auto;
  border-radius: 38px;
  box-shadow: 0 20px 44px rgba(5, 59, 73, .07);
}
.about-copy {
  min-width: 0;
  padding-top: clamp(2px, .8vw, 13px);
  color: #052f3b;
}
.about-eyebrow {
  margin: 0 0 24px;
  color: #d88d00;
  font: 800 clamp(14px, 1.18vw, 18px)/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.about-copy h1 {
  margin: 0 0 clamp(38px, 4vw, 58px);
  max-width: 680px;
  color: #063e4b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 5.15vw, 78px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
}
.about-intro {
  max-width: 680px;
}
.about-intro p {
  margin: 0;
  color: #082f3a;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.58;
}
.about-intro p + p {
  margin-top: 24px;
}
.about-highlights {
  display: grid;
  gap: 14px;
  margin-top: clamp(34px, 3.5vw, 48px);
  max-width: 680px;
}
.about-highlight {
  position: relative;
  padding: 14px 0 13px 21px;
  border-left: 5px solid #e3a11a;
}
.about-highlight h2 {
  margin: 0 0 5px;
  color: #052f3b;
  font: 800 clamp(17px, 1.45vw, 21px)/1.25 Arial, Helvetica, sans-serif;
}
.about-highlight p {
  margin: 0;
  color: #5f6c70;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .about-parcours {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 38px;
  }
  .about-copy h1 {
    font-size: clamp(44px, 5.6vw, 62px);
  }
}

@media (max-width: 820px) {
  .about-parcours {
    grid-template-columns: 1fr;
    padding-top: 38px;
    gap: 42px;
  }
  .about-visual {
    order: 2;
  }
  .about-copy {
    order: 1;
    padding-top: 0;
  }
  .about-copy h1,
  .about-intro,
  .about-highlights {
    max-width: none;
  }
  .about-copy h1 {
    font-size: clamp(43px, 9vw, 64px);
    line-height: 1.02;
    margin-bottom: 30px;
  }
  .about-eyebrow {
    margin-bottom: 16px;
  }
  .about-visual img {
    width: min(100%, 724px);
    border-radius: 28px;
  }
}

@media (max-width: 520px) {
  .about-parcours {
    padding: 30px 16px 52px;
    gap: 34px;
  }
  .about-copy h1 {
    font-size: clamp(39px, 12vw, 52px);
  }
  .about-intro p {
    font-size: 17px;
    line-height: 1.62;
  }
  .about-highlight {
    padding-left: 16px;
    border-left-width: 4px;
  }
  .about-highlight h2 {
    font-size: 18px;
  }
  .about-highlight p {
    font-size: 16px;
  }
  .about-visual img {
    border-radius: 22px;
    box-shadow: 0 14px 32px rgba(5, 59, 73, .07);
  }
}


/* Pages simples complémentaires */
.placeholder-main {
  width: 100%;
  background: linear-gradient(180deg, #fff 0%, #faf6ef 100%);
}
.placeholder-hero {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(52px, 7vw, 92px) clamp(18px, 3vw, 28px) clamp(64px, 8vw, 100px);
}
.placeholder-eyebrow {
  margin: 0 0 16px;
  color: var(--mustard);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.placeholder-hero h1 {
  margin: 0 0 20px;
  max-width: 800px;
  color: var(--teal);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
}
.placeholder-hero p {
  max-width: 760px;
  margin: 0;
  color: #274853;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.7;
}
.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.placeholder-card {
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(6,72,88,.08);
  box-shadow: 0 14px 32px rgba(0,39,51,.06);
}
.placeholder-card h2 {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: 24px;
}
.placeholder-card p { margin: 0; font-size: 16px; line-height: 1.65; }


/* Ajouts Qui suis-je — visuels fournis par l’utilisateur */
.about-added-visual {
  width: min(100%, 1536px);
  margin: 0 auto;
  padding: 0 clamp(18px, 1.6vw, 26px) clamp(30px, 3vw, 46px);
}
.about-added-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.about-added-visual-last {
  padding-bottom: clamp(54px, 6vw, 90px);
}
@media (max-width: 820px) {
  .about-added-visual {
    padding-inline: 16px;
    padding-bottom: 22px;
  }
  .about-added-visual-last {
    padding-bottom: 48px;
  }
}


/* === PAGE A PROPOS HARMONISEE === */
body.about-redesign {
  background: #fff;
}
.about-main--harmonised {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.about-hero {
  position: relative;
  padding: clamp(58px, 6.3vw, 92px) 24px clamp(48px, 5.4vw, 78px);
  background:
    radial-gradient(circle at 10% 30%, rgba(232,149,0,.075), transparent 27%),
    radial-gradient(circle at 88% 8%, rgba(6,72,88,.055), transparent 28%),
    #fff;
}
.about-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(92%, 1220px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(6,72,88,.16), transparent);
}
.about-hero-inner {
  width: min(100%, 1050px);
  margin: 0 auto;
  text-align: center;
}
.about-kicker,
.about-section-eyebrow {
  margin: 0 0 14px;
  color: #d88d00;
  font: 800 14px/1.25 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.about-hero h1 {
  margin: 0 auto clamp(26px, 3vw, 38px);
  max-width: 980px;
  color: #063e4b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.about-lead {
  max-width: 900px;
  margin: 0 auto;
  color: #173d48;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.7;
}
.about-lead-secondary {
  margin-top: 15px;
  color: #52686f;
  font-size: clamp(17px, 1.28vw, 20px);
}
.about-section {
  width: min(100%, 1536px);
  margin: 0 auto;
  padding-inline: clamp(18px, 3vw, 48px);
}
.about-section--parcours {
  padding-top: clamp(46px, 5vw, 70px);
  padding-bottom: clamp(54px, 5.5vw, 82px);
}
.about-parcours-figure {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: clamp(12px, 1.5vw, 20px);
  border: 1px solid rgba(6,72,88,.08);
  border-radius: 34px;
  background: #fffaf2;
  box-shadow: 0 22px 58px rgba(4,54,67,.07);
}
.about-parcours-figure img {
  display: block;
  width: min(100%, 820px);
  height: auto;
  margin: 0 auto;
  border-radius: 26px;
}
.about-section--visual {
  padding-top: clamp(10px, 1vw, 18px);
  padding-bottom: clamp(34px, 4.5vw, 66px);
}
.about-wide-visual {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(6,72,88,.065);
  border-radius: 30px;
  background: #fffaf4;
  box-shadow: 0 22px 55px rgba(4,54,67,.065);
}
.about-wide-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.about-section--esprit {
  padding-bottom: clamp(60px, 6vw, 92px);
}
.about-closing {
  padding: clamp(52px, 5.4vw, 78px) 24px;
  background: #f8f2e8;
  border-top: 1px solid rgba(6,72,88,.07);
}
.about-closing-inner {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 44px;
  align-items: center;
}
.about-closing h2 {
  margin: 0 0 12px;
  color: #063e4b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(31px, 3vw, 44px);
  line-height: 1.12;
}
.about-closing p:not(.about-section-eyebrow) {
  max-width: 760px;
  margin: 0;
  color: #4e666d;
  font-size: 17px;
  line-height: 1.65;
}
.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 15px 28px;
  border-radius: 999px;
  color: #143746;
  background: #e7aa21;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(190,124,0,.16);
}
.about-cta:hover {
  transform: translateY(-1px);
}
.about-cta:focus-visible {
  outline: 3px solid #064858;
  outline-offset: 4px;
}

@media (max-width: 820px) {
  .about-hero {
    padding-inline: 18px;
  }
  .about-hero h1 {
    font-size: clamp(40px, 9vw, 58px);
  }
  .about-section {
    padding-inline: 16px;
  }
  .about-parcours-figure,
  .about-wide-visual {
    border-radius: 22px;
  }
  .about-parcours-figure img {
    border-radius: 16px;
  }
  .about-closing-inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .about-cta {
    width: fit-content;
  }
}

@media (max-width: 520px) {
  .about-hero {
    padding-top: 42px;
    padding-bottom: 46px;
  }
  .about-hero h1 {
    font-size: clamp(37px, 11.5vw, 49px);
  }
  .about-lead {
    font-size: 17px;
    line-height: 1.65;
  }
  .about-lead-secondary {
    font-size: 16px;
  }
 .about-section--parcours {
    padding-top: 42px;
    padding-bottom: 46px;
  }
  .about-parcours-figure {
    padding: 8px;
  }
  .about-section--visual {
    padding-bottom: 28px;
  }
  .about-section--esprit {
    padding-bottom: 48px;
  }
  .about-closing {
    padding: 44px 18px 50px;
  }
  .about-cta {
    width: 100%;
  }
}


/* =========================================================
   HARMONISATION GLOBALE — typographie + en-tête
   Les contenus, textes, images et pictogrammes sont conservés.
   ========================================================= */

:root {
  --font-body: Arial, Helvetica, sans-serif;
  --font-title: Georgia, "Times New Roman", serif;
  --header-bg: #f5f2ee;
  --header-text: #17384a;
  --header-accent: #e7aa21;
  --page-bg: #ffffff;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-body);
}

body {
  color: var(--teal-dark);
  background: var(--page-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.legal-hero h1,
.legal-content h2,
.about-hero h1,
.about-closing h2,
.placeholder-hero h1 {
  font-family: var(--font-title);
}

/* Même en-tête, mêmes dimensions, même couleur sur toutes les pages */
.site-header {
  width: 100%;
  min-height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid rgba(6, 72, 88, .08);
  box-shadow: 0 4px 18px rgba(0, 39, 51, .055);
}

.header-inner {
  width: min(100%, var(--site-width));
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 22px clamp(26px, 4vw, 86px);
}

.site-logo img {
  width: clamp(335px, 25vw, 410px);
  max-height: 96px;
}

.site-navigation,
.nav-links,
.nav-links a,
.header-cta,
.menu-toggle {
  font-family: var(--font-body);
}

.nav-links a {
  color: var(--header-text);
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 700;
}

.nav-links a.active {
  color: var(--header-accent);
}

.nav-links a::after {
  background: var(--header-accent);
}

.header-cta {
  min-height: 58px;
  padding: 14px 28px;
  background: var(--header-accent);
  color: var(--header-text);
  font-size: clamp(16px, 1.08vw, 18px);
  font-weight: 800;
}

/* Fonds et largeur cohérents, sans toucher aux maquettes elles-mêmes */
.page-shell,
.about-main,
.legal-main,
.placeholder-main {
  background: var(--page-bg);
}

.page-canvas {
  width: min(100%, var(--site-width));
}

/* Accueil : même en-tête HTML que toutes les pages.
   Seul l'ancien bandeau intégré à l'image est masqué par recadrage CSS. */
body.home-approved .home-canvas {
  width: min(100%, 1537px);
  aspect-ratio: var(--design-width) / var(--cropped-height);
}

body.home-approved .home-art {
  width: 100%;
  height: auto;
  margin-top: calc(-1 * var(--crop-ratio));
}

/* Typographie cohérente des éléments HTML réels */
.about-kicker,
.about-section-eyebrow,
.about-eyebrow,
.legal-eyebrow,
.placeholder-eyebrow {
  font-family: var(--font-body);
}

.about-lead,
.about-closing p,
.legal-content,
.legal-alert,
.placeholder-hero p,
.placeholder-card p,
.site-legal-footer {
  font-family: var(--font-body);
}

/* Footer homogène */
.site-legal-footer {
  background: var(--teal);
  color: rgba(255,255,255,.92);
}

/* Mobile : même bandeau et même menu sur toutes les pages */
@media (max-width: 1024px) {
  .site-header,
  .header-inner {
    min-height: var(--header-height);
  }

  .site-navigation {
    background: var(--header-bg);
  }

  .site-logo img {
    width: clamp(255px, 34vw, 330px);
    max-height: 80px;
  }
}

@media (max-width: 520px) {
  .site-logo img {
    width: min(240px, 68vw);
  }
}


/* =========================================================
   NETTETE TYPOGRAPHIQUE ET VISUELLE
   Aucun contenu n'est modifié.
   ========================================================= */

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

body,
button,
input,
textarea,
select,
.nav-links a,
.header-cta {
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

/* Évite les dimensions fractionnaires susceptibles de flouter l'en-tête. */
.site-header,
.header-inner,
.site-logo,
.site-navigation,
.nav-links,
.header-cta {
  transform: none;
  backface-visibility: visible;
}

/* Les visuels contenant du texte sont fournis en haute définition. */
.page-art,
.about-visual img,
.about-media-card img,
.about-visual-block img,
.site-logo img {
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* Conserve des dimensions CSS stables : le navigateur exploite simplement
   davantage de pixels de source sur les écrans haute densité. */
.site-logo img {
  height: auto;
}

/* Les textes HTML restent nets et ne sont jamais placés sur une transformation. */
h1, h2, h3, h4, h5, h6,
p, li, a, button, span {
  text-shadow: none;
}


/* =========================================================
   TYPOGRAPHIE UNIFORME — REFERENCE OBSERVER COMPRENDRE ACCOMPAGNER
   Aucun texte, contenu, image ou pictogramme n'est modifié.
   ========================================================= */

:root {
  --font-site: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-body: var(--font-site);
  --font-title: var(--font-site);
}

/* Même famille typographique sur tout le contenu HTML du site */
html,
body,
button,
input,
textarea,
select,
option,
label,
nav,
header,
footer,
main,
section,
article,
aside,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
strong,
b,
em,
small,
li,
dt,
dd,
th,
td,
blockquote,
figcaption {
  font-family: var(--font-site) !important;
}

/* Rendu proche du visuel de référence : sans-serif souple, net et lisible */
html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-kerning: normal;
}

/* Titres : même caractère typographique, avec une graisse plus affirmée */
h1,
h2,
h3,
h4,
h5,
h6,
.about-hero h1,
.about-closing h2,
.legal-hero h1,
.legal-content h2,
.placeholder-hero h1 {
  font-family: var(--font-site) !important;
  font-weight: 700;
  letter-spacing: -0.018em;
}

/* Texte courant : régularité comparable à la référence */
p,
li,
dt,
dd,
td,
th,
label,
input,
textarea,
select {
  font-family: var(--font-site) !important;
  font-weight: 400;
  letter-spacing: 0;
}

/* Navigation et boutons */
.nav-links a,
.header-cta,
.menu-toggle,
button {
  font-family: var(--font-site) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Éléments d'accent et petits titres */
.about-kicker,
.about-section-eyebrow,
.about-eyebrow,
.legal-eyebrow,
.placeholder-eyebrow {
  font-family: var(--font-site) !important;
  font-weight: 700;
}

/* Aucun effet pouvant rendre les caractères artificiellement flous */
h1, h2, h3, h4, h5, h6,
p, a, span, li, strong, em, button, label {
  text-shadow: none !important;
}


/* =========================================================
   PAGE ACCOMPAGNEMENTS — TYPOGRAPHIE HARMONISEE
   Le texte est conservé mot pour mot et rendu en HTML net.
   ========================================================= */

body.accomp-redesign {
  --accomp-font: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --accomp-teal: #073f4d;
  --accomp-teal-deep: #063744;
  --accomp-orange: #e9a21c;
  --accomp-cream: #fbf7f0;
  --accomp-soft: #f7f1e8;
  --accomp-line: #eadfce;
  background: #fff;
  color: var(--accomp-teal);
  font-family: var(--accomp-font) !important;
}

body.accomp-redesign main,
body.accomp-redesign h1,
body.accomp-redesign h2,
body.accomp-redesign h3,
body.accomp-redesign p,
body.accomp-redesign a,
body.accomp-redesign strong,
body.accomp-redesign span {
  font-family: var(--accomp-font) !important;
}

.accomp-main {
  width: min(100%, 1536px);
  margin: 0 auto;
  background: #fff;
}

.accomp-hero {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  min-height: 530px;
  background: linear-gradient(120deg, #fffaf4 0%, #f8efe3 50%, #fff 100%);
  overflow: hidden;
}

.accomp-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 92px) clamp(32px, 5vw, 78px);
  position: relative;
  z-index: 2;
}

.accomp-hero-copy h1 {
  margin: 0;
  color: var(--accomp-teal);
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
}

.accomp-hero-tagline {
  margin: 22px 0 0;
  color: var(--accomp-orange);
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1.2;
}

.accomp-rule {
  display: block;
  width: 108px;
  height: 4px;
  margin: 20px 0 24px;
  border-radius: 99px;
  background: var(--accomp-teal);
}

.accomp-hero-copy > p:last-child {
  max-width: 590px;
  margin: 0;
  color: #234653;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.65;
  font-weight: 400;
}

.accomp-hero-media {
  position: relative;
  min-height: 500px;
  overflow: hidden;
}

.accomp-hero-media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 18%;
  background: linear-gradient(90deg, #f8efe3 0%, rgba(248,239,227,0) 100%);
  pointer-events: none;
}

.accomp-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center center;
}

.accomp-section {
  padding: clamp(62px, 6vw, 92px) clamp(28px, 4vw, 64px);
}

.accomp-section-heading {
  text-align: center;
  margin-bottom: clamp(34px, 4vw, 54px);
}

.accomp-section-heading h2 {
  display: inline-block;
  position: relative;
  margin: 0;
  color: var(--accomp-teal);
  font-size: clamp(31px, 3vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.accomp-section-heading h2::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -15px;
  height: 3px;
  border-radius: 999px;
  background: var(--accomp-orange);
}

.accomp-heading-decoration {
  display: block;
  margin-top: 14px;
  color: var(--accomp-teal);
  font-size: 24px;
}

.accomp-needs {
  background: linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
}

.accomp-needs-heading {
  margin-bottom: clamp(34px, 4vw, 46px);
}

.accomp-needs-subtitle {
  max-width: 900px;
  margin: 28px auto 0;
  color: #274952;
  font-size: clamp(19px, 1.65vw, 32px);
  line-height: 1.45;
  font-weight: 500;
}

.accomp-needs-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.accomp-need-card {
  position: relative;
  min-height: 238px;
  padding: 34px 18px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  border: 1.5px solid #d9ccb8;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
  box-shadow: 0 16px 34px rgba(6, 55, 68, .08);
  overflow: hidden;
}

.accomp-need-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(6, 72, 88, .05);
  pointer-events: none;
}

.accomp-need-card img {
  display: block;
  width: 84px;
  height: 74px;
  margin: 0;
  padding: 12px;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  background: #fbf4ea;
  box-shadow: 0 8px 18px rgba(231, 163, 29, .10);
}

.accomp-need-card h3 {
  margin: 0;
  color: var(--accomp-teal);
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.accomp-need-card p {
  display: none;
}

.accomp-needs-note {
  margin: 34px auto 0;
  max-width: 860px;
  text-align: center;
  color: #3a535a;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
}

.accomp-offers {
  background: linear-gradient(180deg, #fff 0%, #fdfaf6 100%);
  border-top: 1px solid rgba(7, 63, 77, .06);
}

.accomp-offer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.accomp-offer-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--accomp-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 15px 34px rgba(6, 55, 68, .055);
}

.accomp-offer-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / .96;
  object-fit: cover;
  object-position: top center;
}

.accomp-offer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 18px 18px;
  text-align: center;
}

.accomp-offer-body h3 {
  margin: 0 0 15px;
  color: var(--accomp-teal);
  font-size: clamp(19px, 1.45vw, 23px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.accomp-offer-body p {
  margin: 0 0 22px;
  color: #435b64;
  font-size: 15px;
  line-height: 1.62;
}

.accomp-offer-body a {
  margin-top: auto;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid #9ea6a5;
  border-radius: 11px;
  color: var(--accomp-teal);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.accomp-offer-body a:hover {
  border-color: var(--accomp-orange);
  background: #fff9ec;
}

.accomp-framework {
  padding-top: 26px;
  padding-bottom: 42px;
  background: #fdfaf6;
}

.accomp-framework-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 30px 38px;
  border: 1px solid #ead9bd;
  border-radius: 28px;
  background: linear-gradient(100deg, #fff7e8 0%, #fbf3e7 100%);
}

.accomp-framework-card img {
  width: 120px;
  height: 100px;
  object-fit: cover;
  border-radius: 16px;
}

.accomp-framework-card h2 {
  margin: 0 0 9px;
  color: var(--accomp-teal);
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.03em;
}

.accomp-framework-card p {
  margin: 0;
  max-width: 1030px;
  color: #2b4a55;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.62;
}

.accomp-cta {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  min-height: 330px;
  overflow: hidden;
  background: linear-gradient(100deg, #f9eddd 0%, #f5dfc6 100%);
}

.accomp-cta-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 5vw, 76px) clamp(30px, 5vw, 76px);
}

.accomp-cta-copy h2 {
  margin: 0 0 20px;
  color: var(--accomp-teal);
  font-size: clamp(34px, 3.35vw, 52px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
}

.accomp-cta-copy h2 span {
  color: var(--accomp-orange);
}

.accomp-cta-copy p {
  margin: 0 0 26px;
  max-width: 630px;
  color: #2d4c57;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.62;
}

.accomp-primary-button {
  display: inline-flex;
  align-self: flex-start;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 14px;
  background: var(--accomp-teal);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.accomp-primary-button span {
  color: var(--accomp-orange);
}

.accomp-cta-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
}

.accomp-brand-footer {
  padding: 42px clamp(30px, 5vw, 70px) 30px;
  color: #fff;
  background: var(--accomp-teal);
}

.accomp-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.accomp-value {
  display: grid;
  justify-items: center;
  text-align: center;
}

.accomp-value img {
  width: 76px;
  height: 58px;
  margin-bottom: 8px;
  object-fit: cover;
  border-radius: 10px;
}

.accomp-value strong {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.accomp-value span {
  margin-top: 2px;
  color: rgba(255,255,255,.88);
  font-size: 15px;
}

.accomp-contact-lines {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 42px;
  padding: 25px 0 14px;
}

.accomp-contact-lines p {
  margin: 0;
  color: #fff;
  font-size: 16px;
}

.accomp-brand-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 17px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.accomp-brand-legal a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* L'ancien footer global reste identique au reste du site. */
body.accomp-redesign > .site-legal-footer {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .accomp-needs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .accomp-offer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .accomp-hero,
  .accomp-cta {
    grid-template-columns: 1fr;
  }

  .accomp-hero-media {
    min-height: 360px;
  }

  .accomp-hero-media img {
    min-height: 360px;
  }

  .accomp-hero-media::before {
    inset: 0 0 auto 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(180deg, #f8efe3 0%, rgba(248,239,227,0) 100%);
  }

  .accomp-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accomp-framework-card {
    grid-template-columns: 100px minmax(0, 1fr);
    padding: 24px;
  }

  .accomp-framework-card img {
    width: 94px;
    height: 82px;
  }

  .accomp-cta-media {
    min-height: 300px;
  }

  .accomp-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .accomp-hero-copy {
    padding: 42px 22px;
  }

  .accomp-section {
    padding: 50px 18px;
  }

  .accomp-needs-grid,
  .accomp-offer-grid {
    grid-template-columns: 1fr;
  }

  .accomp-need-card {
    min-height: 0;
  }

  .accomp-offer-card {
    max-width: 430px;
    margin: 0 auto;
  }

  .accomp-framework {
    padding-inline: 18px;
  }

  .accomp-framework-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .accomp-framework-card img {
    margin: 0 auto;
  }

  .accomp-cta-copy {
    padding: 42px 22px;
  }

  .accomp-primary-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .accomp-values {
    grid-template-columns: 1fr 1fr;
  }

  .accomp-brand-legal {
    justify-content: center;
    text-align: center;
  }
}


/* =========================================================
   ACCOMPAGNEMENTS — LISIBILITE RENFORCEE
   Contenu inchangé ; uniquement tailles, contrastes et espacements.
   ========================================================= */

body.accomp-redesign {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.accomp-redesign .accomp-hero-copy > p:last-child {
  color: #153f4c;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.72;
  font-weight: 500;
}

body.accomp-redesign .accomp-hero-tagline {
  font-size: clamp(23px, 2.15vw, 33px);
  line-height: 1.3;
}

body.accomp-redesign .accomp-need-card {
  padding: 25px 18px 24px;
}

body.accomp-redesign .accomp-need-card h3 {
  font-size: clamp(20px, 1.45vw, 23px);
  line-height: 1.25;
}

body.accomp-redesign .accomp-need-card p {
  color: #294b56;
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.65;
  font-weight: 500;
}

body.accomp-redesign .accomp-offer-body {
  padding: 24px 20px 20px;
}

body.accomp-redesign .accomp-offer-body h3 {
  font-size: clamp(21px, 1.55vw, 24px);
  line-height: 1.24;
}

body.accomp-redesign .accomp-offer-body p {
  color: #294b56;
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.7;
  font-weight: 500;
}

body.accomp-redesign .accomp-offer-body a {
  min-height: 46px;
  font-size: 15px;
}

body.accomp-redesign .accomp-framework-card p {
  color: #1f4652;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.72;
  font-weight: 500;
}

body.accomp-redesign .accomp-cta-copy p {
  color: #214854;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.7;
  font-weight: 500;
}

body.accomp-redesign .accomp-contact-lines p {
  font-size: 17px;
  line-height: 1.55;
}

/* Évite tout effet de texte flou dans cette page. */
body.accomp-redesign h1,
body.accomp-redesign h2,
body.accomp-redesign h3,
body.accomp-redesign p,
body.accomp-redesign a,
body.accomp-redesign span,
body.accomp-redesign strong {
  text-shadow: none !important;
  transform: none;
}

/* Le bloc juridique interne a été supprimé :
   seul le vrai pied de page légal demeure. */
body.accomp-redesign .site-legal-footer {
  margin-top: 0;
}


/* =========================================================
   PIED DE PAGE V3
   Pictogrammes d'origine conservés + typographie lisible
   ========================================================= */

.site-legal-footer,
.global-site-footer,
.site-footer-v2,
.accomp-brand-footer {
  display: none !important;
}

.footer-original-v3 {
  --footer-v3-dark: #084956;
  --footer-v3-bottom: #0a5866;
  --footer-v3-white: #ffffff;
  --footer-v3-orange: #e8a11a;
  width: 100%;
  margin: 0;
  color: var(--footer-v3-white);
  background: var(--footer-v3-dark);
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.footer-original-v3 *,
.footer-original-v3 *::before,
.footer-original-v3 *::after {
  box-sizing: border-box;
  font-family: inherit !important;
}

.footer-original-v3-main {
  background: var(--footer-v3-dark);
}

.footer-original-v3-inner {
  width: min(100%, 1536px);
  margin: 0 auto;
  padding: 34px clamp(28px, 4vw, 64px) 30px;
}

.footer-original-v3-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.20);
}

.footer-original-v3-value {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.footer-original-v3-value img {
  display: block;
  width: auto;
  height: 86px;
  max-width: 122px;
  margin: 0 auto 8px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter: none;
}

.footer-original-v3-value strong {
  display: block;
  margin: 0;
  color: #ffffff;
  font-size: clamp(20px, 1.45vw, 24px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.015em;
  text-shadow: none;
}

.footer-original-v3-value span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.98);
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  text-shadow: none;
}

.footer-original-v3-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px clamp(32px, 5vw, 68px);
  padding-top: 28px;
}

.footer-original-v3-contact a,
.footer-original-v3-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #ffffff;
  font-size: clamp(16px, 1.18vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  text-shadow: none;
}

.footer-original-v3-contact a:hover {
  color: #ffd58a;
}

.footer-original-v3-contact-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 21px;
  line-height: 1;
}

.footer-original-v3-legal {
  width: 100%;
  background: var(--footer-v3-bottom);
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-original-v3-legal-inner {
  width: min(100%, 1536px);
  min-height: 62px;
  margin: 0 auto;
  padding: 17px clamp(24px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 3vw, 42px);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.footer-original-v3-legal a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer-original-v3-legal a:hover {
  color: #ffd58a;
}

/* Rendu typographique net */
.footer-original-v3 strong,
.footer-original-v3 span,
.footer-original-v3 a {
  text-rendering: optimizeLegibility;
  text-shadow: none !important;
  transform: none !important;
}

/* Tablette */
@media (max-width: 900px) {
  .footer-original-v3-inner {
    padding: 30px 22px 27px;
  }

  .footer-original-v3-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
  }

  .footer-original-v3-value img {
    height: 82px;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .footer-original-v3-values {
    grid-template-columns: 1fr 1fr;
    gap: 26px 12px;
  }

  .footer-original-v3-value img {
    height: 72px;
    max-width: 104px;
  }

  .footer-original-v3-value strong {
    font-size: 18px;
  }

  .footer-original-v3-value span {
    font-size: 14px;
  }

  .footer-original-v3-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 24px;
  }

  .footer-original-v3-contact a,
  .footer-original-v3-social {
    width: 100%;
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .footer-original-v3-legal-inner {
    min-height: 0;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    font-size: 14px;
  }
}


/* =========================================================
   PIED DE PAGE — VISUEL DE REFERENCE FOURNI
   Le graphisme, les pictogrammes et les écritures du visuel
   sont conservés tels quels.
   ========================================================= */

.footer-original-v3,
.site-footer-v2,
.global-site-footer,
.site-legal-footer,
.accomp-brand-footer {
  display: none !important;
}

.footer-reference {
  width: 100%;
  margin: 0;
  background: #064858;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
}

.footer-reference-visual {
  position: relative;
  width: min(100%, 1880px);
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
  background: #064858;
}

.footer-reference-visual > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* Zone e-mail cliquable posée sur le texte déjà présent dans le visuel. */
.footer-reference-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  background: transparent;
  border-radius: 8px;
}

.footer-reference-email {
  left: 63.5%;
  top: 48%;
  width: 28%;
  height: 19%;
}

.footer-reference-hotspot:focus-visible {
  outline: 3px solid #f1aa1c;
  outline-offset: 2px;
}

/* Barre juridique indépendante, sous le visuel de référence. */
.footer-reference-legal {
  min-height: 62px;
  padding: 17px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 3vw, 42px);
  color: #ffffff;
  background: #0a5563;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.footer-reference-legal a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer-reference-legal a:hover {
  color: #ffd58a;
}

@media (max-width: 700px) {
  /* Sur mobile, on conserve le visuel entier plutôt que de couper les pictogrammes. */
  .footer-reference-visual {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .footer-reference-visual > img {
    width: 980px;
    max-width: none;
  }

  .footer-reference-email {
    left: 63.5%;
    top: 48%;
    width: 28%;
    height: 19%;
  }

  .footer-reference-legal {
    flex-direction: column;
    gap: 7px;
    padding: 18px 16px;
    font-size: 14px;
  }
}


/* =========================================================
   HARMONISATION COULEURS BAS DE PAGE
   Le contenu et le visuel du pied de page restent inchangés.
   La teinte est calée sur le bleu pétrole du visuel de référence.
   ========================================================= */

:root {
  --footer-reference-teal: #053c4d;
  --footer-reference-teal-soft: #064454;
  --footer-reference-gold: #e6a019;
}

.footer-reference,
.footer-reference-visual,
.footer-reference-legal {
  background-color: var(--footer-reference-teal) !important;
}

/* Supprime la rupture de couleur entre le visuel et la barre juridique. */
.footer-reference-legal {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

/* Filet discret qui reprend le jaune du visuel. */
.footer-reference-legal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(86%, 1320px);
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(230,160,25,.35) 15%,
    rgba(230,160,25,.8) 50%,
    rgba(230,160,25,.35) 85%,
    transparent 100%
  );
}

.footer-reference-legal,
.footer-reference-legal span,
.footer-reference-legal a {
  color: #ffffff !important;
}

.footer-reference-legal a:hover {
  color: #ffd27b !important;
}

/* Le dernier élément du contenu rejoint directement le footer,
   sans bande blanche ou teinte parasite. */
body > main:last-of-type,
body > .page-shell:last-of-type,
body > .about-main:last-of-type,
body > .legal-main:last-of-type,
body > .placeholder-main:last-of-type,
body > .accomp-main:last-of-type {
  margin-bottom: 0 !important;
}

/* En cas de page courte, le fond visible sous le contenu reprend
   exactement le bleu pétrole du pied de page. */
body {
  background-color: var(--footer-reference-teal);
}

/* Les contenus principaux gardent leur propre fond clair. */
.page-shell,
.about-main,
.legal-main,
.placeholder-main,
.accomp-main,
main {
  background-clip: border-box;
}

@media (max-width: 700px) {
  .footer-reference-legal::before {
    width: 92%;
  }
}


/* =========================================================
   A PROPOS — HARMONISATION VISUELLE COULEURS ET ECRITURE
   Contenu conservé, amélioration uniquement du rendu visuel.
   ========================================================= */

body.about-redesign {
  --about-bg: #f7f2ea;
  --about-panel: #fffdf9;
  --about-panel-2: #fbf6ee;
  --about-teal: #073f4d;
  --about-teal-soft: #2d5560;
  --about-gold: #e4a21f;
  --about-line: rgba(7, 63, 77, .10);
  --about-shadow: 0 18px 42px rgba(7, 63, 77, .08);
  background: linear-gradient(180deg, #faf6f0 0%, #f7f2ea 100%);
  color: var(--about-teal);
}

body.about-redesign .about-main--harmonised {
  width: min(100%, 1536px);
  margin: 0 auto;
  background:
    radial-gradient(circle at 8% 3%, rgba(228,162,31,.10), transparent 18%),
    radial-gradient(circle at 95% 14%, rgba(7,63,77,.06), transparent 18%),
    linear-gradient(180deg, #fffdfa 0%, #f8f3ec 100%);
}

body.about-redesign .about-hero {
  position: relative;
  padding: clamp(48px, 6vw, 78px) clamp(22px, 4vw, 54px) clamp(34px, 4vw, 48px);
  background: transparent;
}

body.about-redesign .about-hero::before {
  content: "";
  position: absolute;
  inset: 30px clamp(16px, 3vw, 42px) 0;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(252,247,239,.97) 100%);
  box-shadow: var(--about-shadow);
  border: 1px solid rgba(228,162,31,.10);
  z-index: 0;
}

body.about-redesign .about-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(92%, 1280px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(228,162,31,.40) 18%, rgba(7,63,77,.12) 50%, rgba(228,162,31,.40) 82%, transparent 100%);
}

body.about-redesign .about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(20px, 3vw, 30px) clamp(8px, 2vw, 18px);
}

body.about-redesign .about-kicker,
body.about-redesign .about-section-eyebrow {
  color: var(--about-gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.about-redesign .about-hero h1 {
  margin: 10px auto 18px;
  max-width: 1020px;
  color: var(--about-teal);
  font-size: clamp(40px, 4.5vw, 68px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
}

body.about-redesign .about-lead {
  max-width: 940px;
  margin: 0 auto;
  color: var(--about-teal-soft);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  line-height: 1.75;
}

body.about-redesign .about-section {
  padding: clamp(18px, 2vw, 28px) clamp(20px, 3vw, 42px);
}

body.about-redesign .about-section--parcours {
  padding-top: 28px;
}

body.about-redesign .about-parcours-figure,
body.about-redesign .about-wide-visual {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--about-panel) 0%, #ffffff 100%);
  border: 1px solid var(--about-line);
  box-shadow: var(--about-shadow);
}

body.about-redesign .about-parcours-figure {
  max-width: 1380px;
  padding: clamp(16px, 2vw, 24px);
}

body.about-redesign .about-parcours-figure::before,
body.about-redesign .about-wide-visual::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(228,162,31,.20) 0%, rgba(228,162,31,.95) 50%, rgba(228,162,31,.20) 100%);
  z-index: 1;
}

body.about-redesign .about-parcours-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  background: #f7f2ea;
}

body.about-redesign .about-section--visual {
  padding-top: 18px;
  padding-bottom: 10px;
}

body.about-redesign .about-wide-visual {
  max-width: 1420px;
  padding: 0;
  background: linear-gradient(180deg, var(--about-panel) 0%, var(--about-panel-2) 100%);
}

body.about-redesign .about-wide-visual img {
  display: block;
  width: 100%;
  height: auto;
}

body.about-redesign .about-section--esprit {
  padding-bottom: 26px;
}

body.about-redesign .about-closing {
  padding: clamp(20px, 2vw, 28px) clamp(20px, 3vw, 42px) clamp(54px, 6vw, 82px);
  background: transparent;
}

body.about-redesign .about-closing-inner {
  max-width: 1420px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 42px);
  align-items: center;
  gap: 24px 30px;
  border-radius: 30px;
  border: 1px solid rgba(228,162,31,.16);
  background: linear-gradient(135deg, #fffaf1 0%, #f6eee0 100%);
  box-shadow: var(--about-shadow);
}

body.about-redesign .about-closing h2 {
  margin: 8px 0 14px;
  color: var(--about-teal);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

body.about-redesign .about-closing p:not(.about-section-eyebrow) {
  max-width: 820px;
  margin: 0;
  color: var(--about-teal-soft);
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 500;
  line-height: 1.72;
}

body.about-redesign .about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid rgba(7,63,77,.08);
  background: var(--about-teal);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(7,63,77,.15);
}

body.about-redesign .about-cta span {
  margin-left: 10px;
  color: var(--about-gold);
}

body.about-redesign .about-cta:hover {
  background: #0b4c5e;
  transform: translateY(-1px);
}

body.about-redesign .about-cta:focus-visible {
  outline: 3px solid rgba(228,162,31,.55);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  body.about-redesign .about-hero::before {
    inset: 18px 12px 0;
    border-radius: 26px;
  }

  body.about-redesign .about-section,
  body.about-redesign .about-closing {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.about-redesign .about-parcours-figure,
  body.about-redesign .about-wide-visual,
  body.about-redesign .about-closing-inner {
    border-radius: 24px;
  }

  body.about-redesign .about-closing-inner {
    padding: 26px 20px;
  }
}

@media (max-width: 560px) {
  body.about-redesign .about-hero {
    padding-top: 36px;
    padding-bottom: 28px;
  }

  body.about-redesign .about-hero h1 {
    font-size: clamp(34px, 10vw, 46px);
  }

  body.about-redesign .about-lead {
    font-size: 17px;
    line-height: 1.68;
  }

  body.about-redesign .about-parcours-figure {
    padding: 10px;
  }

  body.about-redesign .about-parcours-figure img {
    border-radius: 18px;
  }

  body.about-redesign .about-closing {
    padding-bottom: 56px;
  }

  body.about-redesign .about-cta {
    width: 100%;
  }
}


/* =========================================================
   A PROPOS — CORRECTION NETTETE ECRITURES
   Aucun contenu n'est modifié.
   On utilise les images PNG originales à leur taille utile,
   sans agrandissement ni filtre de contraste artificiel.
   ========================================================= */

body.about-redesign,
body.about-redesign * {
  text-shadow: none !important;
}

body.about-redesign {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.about-redesign .about-hero h1,
body.about-redesign .about-lead,
body.about-redesign .about-kicker,
body.about-redesign .about-section-eyebrow,
body.about-redesign .about-closing h2,
body.about-redesign .about-closing p,
body.about-redesign .about-cta {
  transform: none !important;
  filter: none !important;
  backface-visibility: visible !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility !important;
}

/* Mon parcours : ne jamais agrandir le visuel au-delà de sa résolution source. */
body.about-redesign .about-parcours-figure {
  max-width: 820px !important;
  padding: 22px !important;
}

body.about-redesign .about-parcours-figure img {
  display: block;
  width: min(100%, 724px) !important;
  max-width: 724px !important;
  height: auto !important;
  margin: 0 auto;
  image-rendering: auto !important;
  filter: none !important;
  transform: none !important;
}

/* Les deux grands visuels sont déjà en haute résolution :
   affichage sous leur taille native = texte plus net. */
body.about-redesign .about-wide-visual {
  max-width: 1420px !important;
}

body.about-redesign .about-wide-visual img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  image-rendering: auto !important;
  filter: none !important;
  transform: none !important;
}

/* Neutralise l'ancien réglage WebKit qui pouvait accentuer les pixels
   et rendre les lettres moins propres dans les visuels. */
body.about-redesign .about-parcours-figure img,
body.about-redesign .about-wide-visual img {
  -webkit-optimize-contrast: unset !important;
}

/* Meilleure lecture des vrais textes HTML de la page. */
body.about-redesign .about-hero h1,
body.about-redesign .about-closing h2 {
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

body.about-redesign .about-lead,
body.about-redesign .about-closing p:not(.about-section-eyebrow) {
  font-weight: 500 !important;
  color: #234c58 !important;
}

@media (max-width: 820px) {
  body.about-redesign .about-parcours-figure {
    max-width: 760px !important;
    padding: 14px !important;
  }
}

@media (max-width: 560px) {
  body.about-redesign .about-parcours-figure {
    padding: 8px !important;
  }

  body.about-redesign .about-parcours-figure img {
    width: 100% !important;
  }
}


/* =========================================================
   VISUEL CE QUI M ANIME — VERSION NETTE VALIDEE
   ========================================================= */

body.about-redesign .about-section--visual[aria-label="Ce qui m’anime"] .about-wide-visual {
  max-width: 1420px !important;
  overflow: hidden;
  border-radius: 30px;
}

body.about-redesign .about-section--visual[aria-label="Ce qui m’anime"] .about-wide-visual img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 auto;
  image-rendering: auto !important;
  filter: none !important;
  transform: none !important;
  -webkit-optimize-contrast: unset !important;
}


/* =========================================================
   VISUEL ESPRIT ORTHOPEDAGOGUE — VERSION NETTE VALIDEE
   ========================================================= */

body.about-redesign .about-section--esprit .about-wide-visual {
  max-width: 1420px !important;
  overflow: hidden;
  border-radius: 30px;
}

body.about-redesign .about-section--esprit .about-wide-visual img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 auto;
  image-rendering: auto !important;
  filter: none !important;
  transform: none !important;
  -webkit-optimize-contrast: unset !important;
}


/* =========================================================
   FOOTER REFERENCE — ALIGNEMENT GAUCHE ET NETTETE
   ========================================================= */

.footer-reference {
  width: 100%;
  margin: 0;
  background: #053c4d;
  overflow: hidden;
}

.footer-reference-visual {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  background: #053c4d;
  line-height: 0;
}

.footer-reference-visual > img {
  display: block;
  width: 100%;
  max-width: 1878px;
  height: auto;
  margin: 0;
  image-rendering: auto !important;
  filter: none !important;
  transform: none !important;
  object-fit: contain;
  object-position: left top;
  -webkit-user-drag: none;
  user-select: none;
}

/* La zone interactive e-mail reste calée sur le visuel source. */
.footer-reference-email {
  left: 63.5%;
  top: 48%;
  width: 28%;
  height: 19%;
}

/* Barre juridique alignée à gauche et harmonisée */
.footer-reference-legal {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 10px 56px;
  color: #ffffff;
  background: #053c4d !important;
  border-top: 1px solid rgba(230,160,25,.55) !important;
  box-shadow: none !important;
  text-align: left !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

.footer-reference-legal::before {
  display: none !important;
}

.footer-reference-legal span,
.footer-reference-legal a {
  color: #ffffff !important;
  text-shadow: none !important;
}

.footer-reference-legal a {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer-reference-legal a:hover {
  color: #ffd27b !important;
}

@media (min-width: 1878px) {
  .footer-reference-visual > img {
    width: 1878px;
  }
}

@media (max-width: 900px) {
  .footer-reference-legal {
    gap: 10px 30px;
    font-size: 16px;
    padding: 16px 22px;
  }
}

@media (max-width: 700px) {
  .footer-reference-visual {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .footer-reference-visual > img {
    width: 1878px !important;
    max-width: none !important;
  }

  .footer-reference-email {
    left: 63.5%;
    top: 48%;
    width: 28%;
    height: 19%;
  }

  .footer-reference-legal {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 16px;
    font-size: 14px;
  }
}


/* =========================================================
   NAVIGATION ACCOMPAGNEMENTS — LIEN SIMPLE
   Pas de menu déroulant : suppression de toute flèche/caret.
   ========================================================= */

.nav-links a[href="accompagnements.html"]::before {
  content: none !important;
  display: none !important;
}

.nav-links a[href="accompagnements.html"] {
  padding-right: 0 !important;
}


/* =========================================================
   PREMIER ECHANGE — BOUTON CONTACT
   Remplace visuellement « Prendre rendez-vous ».
   ========================================================= */

body[data-page="premier-echange.html"] .premier-contact-button {
  z-index: 8;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px;
  border-radius: 999px;
  background: #064758 !important;
  color: #ffffff;
  text-decoration: none;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  border: 0;
}

body[data-page="premier-echange.html"] .premier-contact-button:hover {
  background: #0a5667 !important;
}

body[data-page="premier-echange.html"] .premier-contact-button:focus-visible {
  outline: 3px solid #e8a11a;
  outline-offset: 3px;
}

body[data-page="premier-echange.html"] .premier-contact-button span {
  color: #ffffff;
  text-shadow: none;
}

body[data-page="premier-echange.html"] .premier-contact-arrow {
  font-size: 1.35em;
  font-weight: 400;
}

@media (max-width: 700px) {
  body[data-page="premier-echange.html"] .premier-contact-button {
    padding: 0 10px;
    gap: 5px;
    font-size: clamp(10px, 2.6vw, 15px);
  }
}


/* =========================================================
   PREMIER ECHANGE — bouton "Contact" intégré à la maquette
   ========================================================= */

body[data-page="premier-echange.html"] .premier-contact-button {
  display: none !important;
}


/* =========================================================
   TOUS LES BOUTONS — INTERACTIONS RENFORCEES
   ========================================================= */

/* Les visuels ne doivent jamais bloquer les zones cliquables. */
.page-canvas > img,
.footer-reference-visual > img {
  pointer-events: none !important;
}

/* Zones cliquables intégrées aux maquettes. */
.hotspot,
.footer-reference-hotspot {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 40 !important;
}

/* Boutons et liens principaux. */
.header-cta,
.about-cta,
.accomp-primary-button,
.accomp-offer-body a,
.site-logo,
.nav-links a,
.footer-reference-legal a {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 40;
}

/* Bouton du menu mobile. */
.menu-toggle {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 50 !important;
}

/* Retour visuel clavier/souris sur les boutons. */
.header-cta:hover,
.about-cta:hover,
.accomp-primary-button:hover,
.accomp-offer-body a:hover,
.footer-reference-legal a:hover {
  filter: brightness(0.98);
}

.header-cta:focus-visible,
.about-cta:focus-visible,
.accomp-primary-button:focus-visible,
.accomp-offer-body a:focus-visible,
.hotspot:focus-visible,
.footer-reference-hotspot:focus-visible,
.footer-reference-legal a:focus-visible {
  outline: 3px solid #e8a11a !important;
  outline-offset: 3px;
}


/* =========================================================
   HARMONISATION FINALE DU BAS DE PAGE
   Même pied de page, mêmes couleurs, espacements et alignements.
   ========================================================= */

:root {
  --footer-unified-bg: #053c4d;
  --footer-unified-gold: #e6a019;
  --footer-unified-text: #ffffff;
}

/* Le footer rejoint le contenu sans rupture blanche. */
.footer-reference {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--footer-unified-bg) !important;
  overflow: visible !important;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
}

/* Visuel de référence conservé net et aligné à gauche. */
.footer-reference-visual {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: var(--footer-unified-bg) !important;
  overflow: visible !important;
}

.footer-reference-visual > img {
  display: block !important;
  width: 100% !important;
  max-width: 1878px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left top !important;
  filter: none !important;
  transform: none !important;
  image-rendering: auto !important;
  pointer-events: none !important;
}

/* Zone email calée sur le visuel. */
.footer-reference-email {
  left: 63.5% !important;
  top: 48% !important;
  width: 28% !important;
  height: 19% !important;
}

/* Barre juridique identique partout. */
.footer-reference-legal {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 70px !important;
  margin: 0 !important;
  padding: 18px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px 48px !important;
  background: var(--footer-unified-bg) !important;
  color: var(--footer-unified-text) !important;
  border-top: 2px solid var(--footer-unified-gold) !important;
  box-shadow: none !important;
  text-align: left !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.footer-reference-legal::before {
  display: none !important;
}

.footer-reference-legal span,
.footer-reference-legal a {
  color: var(--footer-unified-text) !important;
  text-shadow: none !important;
}

.footer-reference-legal a {
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.footer-reference-legal a:hover {
  color: #ffd27b !important;
}

/* Toutes les pages terminent proprement contre le footer. */
body > main:last-of-type,
body > .page-shell:last-of-type,
body > .about-main:last-of-type,
body > .legal-main:last-of-type,
body > .placeholder-main:last-of-type,
body > .accomp-main:last-of-type {
  margin-bottom: 0 !important;
}

/* Mobile : même identité visuelle, barre juridique lisible. */
@media (max-width: 700px) {
  .footer-reference-visual {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .footer-reference-visual > img {
    width: 980px !important;
    max-width: none !important;
  }

  .footer-reference-legal {
    min-height: 0 !important;
    padding: 18px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   FOOTER REFAIT PROPRE SANS PHOTO
   Suppression de la photo des pieds / sac.
   Alignement des éléments visuels à gauche et à droite.
   ========================================================= */

.footer-reference {
  width: 100% !important;
  margin: 0 !important;
  background: #053c4d !important;
  overflow: visible !important;
}

.footer-reference-visual {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #053c4d !important;
  line-height: 0 !important;
  overflow: visible !important;
}

.footer-reference-visual > img {
  display: block !important;
  width: 100% !important;
  max-width: 1878px !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left top !important;
  filter: none !important;
  transform: none !important;
  image-rendering: auto !important;
  pointer-events: none !important;
}

.footer-reference-email {
  left: 63.5% !important;
  top: 28% !important;
  width: 28% !important;
  height: 44% !important;
}

.footer-reference-legal {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px 48px !important;
  background: #053c4d !important;
  border-top: 1px solid #e6a019 !important;
}

@media (max-width: 700px) {
  .footer-reference-visual > img {
    width: 980px !important;
    max-width: none !important;
  }

  .footer-reference-email {
    left: 63.5% !important;
    top: 28% !important;
    width: 28% !important;
    height: 44% !important;
  }
}


/* =========================================================
   FOOTER V2 — SANS CAILLOUX, SANS BLANCS A GAUCHE
   ========================================================= */
.footer-reference-visual {
  background: #053c4d !important;
}

.footer-reference-visual > img {
  width: 100% !important;
  max-width: 1878px !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: left top !important;
}

.footer-reference-email {
  left: 63.5% !important;
  top: 16% !important;
  width: 28% !important;
  height: 60% !important;
}


/* =========================================================
   ACCOMPAGNEMENTS — CTA SANS PHOTO PIEDS / SACS / CAILLOUX
   ========================================================= */
body.accomp-redesign .accomp-cta {
  display: block !important;
  min-height: 0 !important;
  background: linear-gradient(100deg, #f9eddd 0%, #f5dfc6 100%) !important;
}

body.accomp-redesign .accomp-cta-copy {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: clamp(46px, 5vw, 74px) clamp(28px, 6vw, 92px) !important;
  box-sizing: border-box !important;
}

body.accomp-redesign .accomp-cta-copy p {
  max-width: 850px !important;
}

body.accomp-redesign .accomp-cta-media {
  display: none !important;
}


/* =========================================================
   EN-TETE BLEU CANARD — HARMONISE AVEC LE PIED DE PAGE
   ========================================================= */

.site-header {
  background: #053c4d !important;
  border-bottom: 2px solid #e6a019 !important;
  box-shadow: 0 4px 18px rgba(0, 39, 51, .18) !important;
}

.header-inner {
  background: #053c4d !important;
}

.site-navigation {
  background: transparent !important;
}

.nav-links a {
  color: #ffffff !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: #f0ad1d !important;
}

.nav-links a::after {
  background: #f0ad1d !important;
}

.header-cta {
  background: #e7aa21 !important;
  color: #073746 !important;
}

.header-cta:hover {
  background: #efb62e !important;
  filter: none !important;
}

.menu-toggle {
  background: #ffffff !important;
  color: #053c4d !important;
  border-color: rgba(255,255,255,.35) !important;
}

@media (max-width: 1024px) {
  .site-navigation {
    background: #053c4d !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 18px 28px rgba(0,39,51,.28) !important;
  }

  .nav-links a {
    color: #ffffff !important;
  }

  .nav-links a.active {
    color: #f0ad1d !important;
    background: rgba(240,173,29,.10) !important;
  }
}


/* =========================================================
   FOOTER V5 — PICTOGRAMMES ENTIERS
   ========================================================= */
.footer-reference-visual {
  overflow: visible !important;
  background: #053c4d !important;
}

.footer-reference-visual > img {
  display: block !important;
  width: 100% !important;
  max-width: 1878px !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left top !important;
  clip-path: none !important;
}

.footer-reference-email {
  left: 63.5% !important;
  top: 27% !important;
  width: 29% !important;
  height: 52% !important;
}


/* =========================================================
   LOGO OEB — INTEGRATION HARMONIEUSE
   ========================================================= */

.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 18px !important;
  background: rgba(249, 241, 229, 0.98) !important;
  box-shadow: 0 6px 18px rgba(0, 39, 51, 0.10) !important;
  border: 1px solid rgba(230, 160, 25, 0.18) !important;
}

.site-logo img {
  display: block !important;
  width: clamp(240px, 26vw, 320px) !important;
  height: auto !important;
  max-height: 102px !important;
  object-fit: contain !important;
  filter: none !important;
}

.site-logo:hover {
  transform: translateY(-1px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(0, 39, 51, 0.16) !important;
}

@media (max-width: 1024px) {
  .site-logo {
    padding: 7px 12px !important;
    border-radius: 16px !important;
  }

  .site-logo img {
    width: clamp(210px, 44vw, 290px) !important;
    max-height: 90px !important;
  }
}

@media (max-width: 700px) {
  .site-logo {
    padding: 6px 10px !important;
    border-radius: 14px !important;
  }

  .site-logo img {
    width: min(240px, 64vw) !important;
    max-height: 78px !important;
  }
}


/* =========================================================
   ACCOMPAGNEMENT INDIVIDUEL — CONTACT ACTIF
   Zone invisible exactement placée sur le bouton du visuel.
   ========================================================= */
body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot {
  z-index: 100 !important;
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  background: transparent !important;
}

body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot:hover {
  background: rgba(232, 160, 25, .06) !important;
}


/* =========================================================
   ACCOMPAGNEMENT INDIVIDUEL — CONTACT ACTIF V3
   Aucun changement visuel : uniquement la zone cliquable.
   ========================================================= */
body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot {
  position: absolute !important;
  display: block !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  opacity: 1 !important;
  touch-action: manipulation !important;
}

body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot:hover,
body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot:active {
  background: transparent !important;
}


/* =========================================================
   ACCOMPAGNEMENT INDIVIDUEL — CONTACT ACTIF V4
   Zone native couvrant entièrement le bouton visible.
   ========================================================= */
body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot-v4 {
  position: absolute !important;
  display: block !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  background: rgba(5, 60, 77, 0.001) !important;
  border: 0 !important;
  opacity: 1 !important;
}

body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot-v4:hover,
body[data-page="accompagnement-individuel.html"] .individual-contact-hotspot-v4:active {
  background: rgba(5, 60, 77, 0.001) !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: visible !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   ACCOMPAGNEMENT INDIVIDUEL — SANS BANDEAU + BOUTON CONTACT
   ========================================================= */
body[data-page="accompagnement-individuel.html"] .individual-contact-button {
  position: absolute !important;
  left: 17.1% !important;
  top: 92.4% !important;
  width: 14.9% !important;
  height: 7.3% !important;
  z-index: 2147483647 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9% !important;

  padding: 0 7% !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #064858 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 5px rgba(0, 39, 51, .12) !important;

  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(11px, 1.18vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body[data-page="accompagnement-individuel.html"] .individual-contact-button:hover {
  background: #07586a !important;
}

body[data-page="accompagnement-individuel.html"] .individual-contact-button:focus-visible {
  outline: 3px solid #e6a019 !important;
  outline-offset: 3px !important;
}

body[data-page="accompagnement-individuel.html"] .individual-contact-heart {
  font-size: 1.25em !important;
  line-height: 1 !important;
}

@media (max-width: 700px) {
  body[data-page="accompagnement-individuel.html"] .individual-contact-button {
    border-radius: 9px !important;
    font-size: clamp(8px, 2.2vw, 13px) !important;
  }
}


/* =========================================================
   ACCOMPAGNEMENT PARENTAL — EN SAVOIR PLUS VERS CONTACT
   ========================================================= */
body[data-page="accompagnement-parental.html"] .parental-en-savoir-plus-hotspot {
  position: absolute !important;
  z-index: 2147483647 !important;
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  background: transparent !important;
}


/* =========================================================
   ATELIERS ET INTERVENTIONS — EN SAVOIR PLUS VERS CONTACT
   ========================================================= */
body[data-page="ateliers-interventions.html"] .ateliers-en-savoir-plus-hotspot {
  position: absolute !important;
  z-index: 2147483647 !important;
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  background: transparent !important;
}


/* =========================================================
   LOGO ROND FOURNI PAR L’UTILISATRICE — INTEGRATION EXACTE
   ========================================================= */
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 8px !important;
  border-radius: 16px !important;
  background: #f8f0e4 !important;
  border: 1px solid rgba(230, 160, 25, .20) !important;
  box-shadow: 0 5px 14px rgba(0, 39, 51, .10) !important;
}

.site-logo img {
  display: block !important;
  width: clamp(128px, 11vw, 180px) !important;
  height: auto !important;
  max-height: 104px !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: none !important;
}

@media (max-width: 1024px) {
  .site-logo img {
    width: clamp(120px, 20vw, 160px) !important;
    max-height: 90px !important;
  }
}

@media (max-width: 700px) {
  .site-logo {
    padding: 4px 6px !important;
    border-radius: 13px !important;
  }

  .site-logo img {
    width: min(130px, 36vw) !important;
    max-height: 74px !important;
  }
}


/* =========================================================
   LOGO FOURNI — REMPLACEMENT FORCE
   ========================================================= */
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 6px !important;
  background: #f7efe4 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(230,160,25,.22) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-logo img {
  display: block !important;
  width: 175px !important;
  height: 104px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  .site-logo img {
    width: 165px !important;
    height: 90px !important;
  }
}

@media (max-width: 700px) {
  .site-logo img {
    width: 138px !important;
    height: 76px !important;
  }
}


/* =========================================================
   LOGO ROND EXACT DEMANDE PAR L'UTILISATRICE
   ========================================================= */
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-logo img {
  display: block !important;
  width: 108px !important;
  height: 108px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  .site-logo img {
    width: 92px !important;
    height: 92px !important;
  }
}

@media (max-width: 700px) {
  .site-logo img {
    width: 78px !important;
    height: 78px !important;
  }
}


/* =========================================================
   PIED DE PAGE HTML — NET, LISIBLE, SANS ELEMENTS PARASITES
   ========================================================= */

.footer-clean {
  --footer-bg: #053c4d;
  --footer-bg-deep: #043543;
  --footer-gold: #e5a11a;
  --footer-text: #ffffff;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif;
  border-top: 3px solid var(--footer-gold);
}

.footer-clean-main {
  width: min(100%, 1536px);
  margin: 0 auto;
  padding: 28px clamp(24px, 4vw, 70px) 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 430px);
  align-items: center;
  gap: clamp(34px, 5vw, 80px);
}

.footer-clean-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(125px, 1fr));
  align-items: start;
  gap: clamp(18px, 2.2vw, 34px);
}

.footer-clean-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  text-align: center;
}

.footer-clean-item img {
  display: block;
  width: auto;
  height: 58px;
  max-width: 88px;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.footer-clean-copy {
  display: grid;
  gap: 2px;
  line-height: 1.15;
}

.footer-clean-copy strong {
  color: #f2b32e;
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 800;
  letter-spacing: .01em;
}

.footer-clean-copy span {
  color: #ffffff;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 650;
}

.footer-clean-contact {
  padding-left: clamp(28px, 3vw, 48px);
  border-left: 2px solid rgba(229, 161, 26, .72);
  display: grid;
  gap: 16px;
  align-content: center;
}

.footer-clean-contact-line {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: #ffffff;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.footer-clean-contact-line span:last-child {
  overflow-wrap: anywhere;
}

.footer-clean-contact-line:hover {
  color: #ffd06a;
}

.footer-clean-contact-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: 9px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.footer-clean-instagram {
  border-radius: 10px;
  font-size: 25px;
}

.footer-clean-instagram svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-clean-instagram .svg-fill {
  fill: currentColor;
  stroke: none;
}

.footer-clean-legal {
  width: 100%;
  min-height: 72px;
  padding: 18px clamp(24px, 4vw, 70px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px clamp(28px, 4vw, 58px);
  background: var(--footer-bg-deep);
  border-top: 1px solid var(--footer-gold);
  color: #ffffff;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 700;
  line-height: 1.4;
}

.footer-clean-legal a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  pointer-events: auto;
  cursor: pointer;
}

.footer-clean-legal a:hover {
  color: #ffd06a;
}

@media (max-width: 1050px) {
  .footer-clean-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-clean-contact {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(229, 161, 26, .72);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .footer-clean-main {
    padding: 24px 18px 22px;
  }

  .footer-clean-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  .footer-clean-item img {
    height: 52px;
  }

  .footer-clean-contact {
    grid-template-columns: 1fr;
  }

  .footer-clean-legal {
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
}


/* =========================================================
   FOOTER — PICTOGRAMMES PROPRES + TEXTE LISIBLE
   ========================================================= */

.footer-clean-main {
  background: #053c4d !important;
}

.footer-clean-item {
  gap: 10px !important;
}

.footer-clean-item img {
  width: 92px !important;
  height: 66px !important;
  max-width: 92px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
}

.footer-clean-copy {
  gap: 3px !important;
}

.footer-clean-copy strong {
  color: #f0aa1f !important;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(19px, 1.35vw, 23px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.footer-clean-copy span {
  color: #ffffff !important;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(14px, 1vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

.footer-clean-contact-line {
  color: #ffffff !important;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.footer-clean-legal,
.footer-clean-legal a {
  text-shadow: none !important;
}

@media (max-width: 720px) {
  .footer-clean-item img {
    width: 82px !important;
    height: 60px !important;
  }
}


/* =========================================================
   LOGO HORIZONTAL EXACT FOURNI PAR L’UTILISATRICE
   ========================================================= */
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-logo img {
  display: block !important;
  width: 220px !important;
  height: auto !important;
  max-width: none !important;
  max-height: 112px !important;
  object-fit: contain !important;
  object-position: center left !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  .site-logo img {
    width: 175px !important;
    max-height: 118px !important;
  }
}

@media (max-width: 700px) {
  .site-logo img {
    width: 150px !important;
    max-height: 78px !important;
  }
}


/* =========================================================
   MAJ LOGO + PICTOGRAMMES DE FOOTER D'APRES REFERENCES
   ========================================================= */

.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-logo img {
  display: block !important;
  width: 220px !important;
  height: auto !important;
  max-width: none !important;
  max-height: 112px !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  filter: none !important;
  transform: none !important;
}

.footer-clean {
  border-top: 3px solid #e5a11a !important;
}

.footer-clean-item {
  gap: 12px !important;
}

.footer-clean-item img {
  width: 96px !important;
  height: 74px !important;
  max-width: 96px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  background: transparent !important;
  border: 0 !important;
}

.footer-clean-copy strong {
  color: #f0aa1f !important;
  font-size: clamp(18px, 1.35vw, 23px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
}

.footer-clean-copy span {
  color: #ffffff !important;
  font-size: clamp(14px, 1.02vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

@media (max-width: 1024px) {
  .site-logo img {
    width: 175px !important;
    max-height: 118px !important;
  }
}

@media (max-width: 700px) {
  .site-logo img {
    width: 150px !important;
    max-height: 78px !important;
  }

  .footer-clean-item img {
    width: 84px !important;
    height: 64px !important;
  }
}


/* =========================================================
   A PROPOS — VIGNETTES CONTOUR BLEU CANARD HARMONIEUX
   Remplace l'ancien contour et supprime le filet doré supérieur.
   ========================================================= */

body[data-page="qui-suis-je.html"] .about-parcours-figure,
body[data-page="qui-suis-je.html"] .about-wide-visual {
  border: 4px solid #053c4d !important;
  border-radius: 28px !important;
  background: #fffdf9 !important;
  box-shadow:
    0 10px 28px rgba(5, 60, 77, .09),
    0 0 0 1px rgba(255,255,255,.72) inset !important;
  overflow: visible !important;
}

/* Effacer l'ancien filet doré placé en haut des vignettes. */
body[data-page="qui-suis-je.html"] .about-parcours-figure::before,
body[data-page="qui-suis-je.html"] .about-wide-visual::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Finition plus douce autour du visuel Mon parcours. */
body[data-page="qui-suis-je.html"] .about-parcours-figure {
  padding: 20px !important;
}

/* Les images restent intactes. */
body[data-page="qui-suis-je.html"] .about-parcours-figure img,
body[data-page="qui-suis-je.html"] .about-wide-visual img {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Mobile : contour légèrement réduit pour garder de la finesse. */
@media (max-width: 700px) {
  body[data-page="qui-suis-je.html"] .about-parcours-figure,
  body[data-page="qui-suis-je.html"] .about-wide-visual {
    border-width: 3px !important;
    border-radius: 20px !important;
  }

  body[data-page="qui-suis-je.html"] .about-parcours-figure {
    padding: 10px !important;
  }
}


/* =========================================================
   FOOTER — PICTOGRAMMES NETS SANS TRAITS JAUNES PARASITES
   ========================================================= */
.footer-clean-item img {
  width: 92px !important;
  height: 68px !important;
  max-width: 92px !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .footer-clean-item img {
    width: 82px !important;
    height: 60px !important;
  }
}


@media (max-width: 1180px) {
  .accomp-needs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .accomp-needs-subtitle {
    font-size: 18px;
  }

  .accomp-needs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .accomp-need-card {
    min-height: 196px;
    padding: 24px 14px 20px;
    border-radius: 22px;
  }

  .accomp-need-card::before {
    border-radius: 22px;
  }

  .accomp-need-card img {
    width: 72px;
    height: 62px;
    padding: 10px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .accomp-needs-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   ACCOMPAGNEMENTS — AIDE A LA PREPARATION DU DOSSIER MDPH
   ========================================================= */
.accomp-mdph {
  padding-top: clamp(28px, 4vw, 54px) !important;
  padding-bottom: clamp(32px, 4.5vw, 62px) !important;
  background: linear-gradient(180deg, #fdfaf6 0%, #fffdfa 100%) !important;
}

.accomp-mdph-card {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid #e8dcca;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 15px 34px rgba(6, 55, 68, .06);
}

.accomp-mdph-icon {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: #fbf4ea;
  border: 1px solid rgba(231, 163, 29, .22);
}

.accomp-mdph-icon img {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: contain;
  border-radius: 18px;
}

.accomp-mdph-eyebrow {
  margin: 0 0 8px !important;
  color: #d58e0d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.accomp-mdph-copy h2 {
  margin: 0 0 18px;
  color: var(--accomp-teal);
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.accomp-mdph-copy > p:not(.accomp-mdph-eyebrow):not(.accomp-mdph-note) {
  margin: 0 0 14px;
  color: #405c64;
  font-size: 16px;
  line-height: 1.68;
}

.accomp-mdph-note {
  margin: 20px 0 22px;
  padding: 14px 16px;
  border-left: 3px solid #e7a31d;
  border-radius: 0 12px 12px 0;
  background: #fff9ef;
  color: #496068;
  font-size: 14px;
  line-height: 1.55;
}

.accomp-mdph-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #064858;
  border-radius: 999px;
  color: #064858;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.accomp-mdph-link:hover {
  background: #064858;
  color: #fff;
}

@media (max-width: 760px) {
  .accomp-mdph-card {
    grid-template-columns: 1fr;
    padding: 26px 22px;
    border-radius: 22px;
  }

  .accomp-mdph-icon {
    width: 104px;
    height: 104px;
  }

  .accomp-mdph-icon img {
    width: 82px;
    height: 82px;
  }
}


/* =========================================================
   FOOTER — ALIGNEMENT STRICT DES 4 PICTOGRAMMES
   ========================================================= */
.footer-clean-values {
  align-items: start !important;
}

.footer-clean-item {
  display: grid !important;
  grid-template-rows: 78px auto !important;
  align-items: start !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 132px !important;
}

.footer-clean-item img {
  display: block !important;
  width: 100px !important;
  height: 76px !important;
  max-width: 100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  align-self: start !important;
  justify-self: center !important;
  background: #053c4d !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.footer-clean-copy {
  width: 100% !important;
  align-self: start !important;
  justify-self: stretch !important;
  text-align: center !important;
  margin: 0 !important;
}

.footer-clean-copy strong,
.footer-clean-copy span {
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 720px) {
  .footer-clean-item {
    grid-template-rows: 70px auto !important;
    min-height: 124px !important;
  }

  .footer-clean-item img {
    width: 90px !important;
    height: 68px !important;
    max-width: 90px !important;
  }
}

/* =========================================================
   PAGE ACCOMPAGNEMENTS — TYPOGRAPHIE NETTE ET LISIBLE
   Référence : grands titres sans-serif, traits nets, corps aéré.
   ========================================================= */
body.accomp-redesign {
  --accomp-font: "Avenir Next", "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-family: var(--accomp-font) !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

body.accomp-redesign h1,
body.accomp-redesign h2,
body.accomp-redesign h3,
body.accomp-redesign p,
body.accomp-redesign a,
body.accomp-redesign span,
body.accomp-redesign strong {
  font-family: var(--accomp-font) !important;
  text-shadow: none !important;
}

body.accomp-redesign .accomp-hero-copy h1 {
  font-size: clamp(52px, 5.4vw, 82px) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
}

body.accomp-redesign .accomp-hero-tagline {
  font-size: clamp(22px, 2vw, 31px) !important;
  font-weight: 650 !important;
}

body.accomp-redesign .accomp-hero-copy > p:last-child {
  font-size: clamp(18px, 1.35vw, 21px) !important;
  line-height: 1.68 !important;
  font-weight: 500 !important;
}

body.accomp-redesign .accomp-section-heading h2 {
  font-size: clamp(34px, 3.1vw, 50px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

body.accomp-redesign .accomp-need-card h3,
body.accomp-redesign .accomp-offer-body h3 {
  font-weight: 800 !important;
}

body.accomp-redesign .accomp-need-card p,
body.accomp-redesign .accomp-offer-body p,
body.accomp-redesign .accomp-framework-card p,
body.accomp-redesign .accomp-cta-copy p,
body.accomp-redesign .accomp-mdph-copy p {
  font-size: clamp(16px, 1.14vw, 18px) !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  color: #274954 !important;
}

body.accomp-redesign .accomp-need-card p {
  display: block !important;
}

body.accomp-redesign .accomp-mdph-copy h2,
body.accomp-redesign .accomp-framework-card h2,
body.accomp-redesign .accomp-cta-copy h2 {
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

body.accomp-redesign .accomp-offer-body a,
body.accomp-redesign .accomp-primary-button,
body.accomp-redesign .accomp-mdph-link {
  font-weight: 800 !important;
  text-rendering: geometricPrecision;
}

body.accomp-redesign .accomp-hero-media img {
  object-position: 72% center !important;
}

body.accomp-redesign .accomp-offer-media,
body.accomp-redesign .accomp-hero-media img,
body.accomp-redesign .accomp-cta-media img,
body.accomp-redesign .accomp-need-card img,
body.accomp-redesign .accomp-framework-card img,
body.accomp-redesign .accomp-mdph-icon img {
  filter: none !important;
  transform: none !important;
}


/* =========================================================
   PICTOGRAMMES — LANGAGE VISUEL HARMONISE
   Rond bleu canard / jaune moutarde, pictogramme blanc.
   Aucun texte, photo ou autre visuel n'est modifié.
   ========================================================= */

/* Domaines d'accompagnement */
.accomp-need-card img {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 7px 18px rgba(5, 60, 77, .10) !important;
  object-fit: contain !important;
}

/* "Un cadre clair" et bloc MDPH */
.accomp-framework-card img,
.accomp-mdph-icon img {
  width: 112px !important;
  height: 112px !important;
  max-width: 112px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 7px 18px rgba(5, 60, 77, .10) !important;
  object-fit: contain !important;
}

.accomp-mdph-icon {
  width: 120px !important;
  height: 120px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
}

/* Pied de page */
.footer-clean-item {
  grid-template-rows: 84px auto !important;
}

.footer-clean-item img {
  width: 82px !important;
  height: 82px !important;
  max-width: 82px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .accomp-need-card img {
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
  }

  .accomp-framework-card img,
  .accomp-mdph-icon img {
    width: 94px !important;
    height: 94px !important;
    max-width: 94px !important;
  }

  .accomp-mdph-icon {
    width: 100px !important;
    height: 100px !important;
  }

  .footer-clean-item {
    grid-template-rows: 74px auto !important;
  }

  .footer-clean-item img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
  }
}


/* =========================================================
   FOOTER — PICTOGRAMMES COMPLETS ET ENTIÈREMENT VISIBLES
   ========================================================= */
.footer-clean,
.footer-clean-main,
.footer-clean-values,
.footer-clean-item {
  overflow: visible !important;
}

.footer-clean-main {
  padding-top: 32px !important;
  padding-bottom: 30px !important;
}

.footer-clean-values {
  align-items: start !important;
}

.footer-clean-item {
  grid-template-rows: 94px auto !important;
  min-height: 146px !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 10px !important;
}

.footer-clean-item img {
  display: block !important;
  width: 92px !important;
  height: 92px !important;
  max-width: 92px !important;
  min-width: 92px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
}

.footer-clean-copy {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

.footer-clean-copy strong,
.footer-clean-copy span {
  display: block !important;
  margin: 0 !important;
  white-space: normal !important;
}

@media (max-width: 720px) {
  .footer-clean-item {
    grid-template-rows: 82px auto !important;
    min-height: 132px !important;
  }

  .footer-clean-item img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
  }
}


/* =========================================================
   FOOTER V2 — PICTOGRAMMES SOURCE REMPLACES PAR LES VERSIONS COMPLETES
   ========================================================= */
.footer-clean-values {
  align-items: start !important;
}

.footer-clean-item {
  display: grid !important;
  grid-template-rows: 86px auto !important;
  align-items: start !important;
  justify-items: center !important;
  gap: 8px !important;
  min-height: 142px !important;
  overflow: visible !important;
}

.footer-clean-item img {
  display: block !important;
  width: 118px !important;
  height: 80px !important;
  max-width: 118px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
}

.footer-clean-copy {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

.footer-clean-copy strong,
.footer-clean-copy span {
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 720px) {
  .footer-clean-item {
    grid-template-rows: 76px auto !important;
    min-height: 128px !important;
  }
  .footer-clean-item img {
    width: 102px !important;
    height: 70px !important;
    max-width: 102px !important;
  }
}

/* =========================================================
   LOGO HARMONISÉ SUR TOUT LE SITE — 4 BORDS ARRONDIS
   ========================================================= */
.site-header .site-logo,
.header-card .site-logo,
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.site-header .site-logo img,
.header-card .site-logo img,
.site-logo img {
  display: block !important;
  width: clamp(210px, 22vw, 300px) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 118px !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .site-header .site-logo img,
  .header-card .site-logo img,
  .site-logo img {
    width: clamp(180px, 42vw, 250px) !important;
    max-height: 104px !important;
  }
}

@media (max-width: 640px) {
  .site-header .site-logo img,
  .header-card .site-logo img,
  .site-logo img {
    width: min(220px, 72vw) !important;
    max-height: 72px !important;
  }
}


/* =========================================================
   ACCOMPAGNEMENTS — 6 DOMAINES, PICTOGRAMMES FINS
   ========================================================= */
.accomp-needs-visual {
  width: 100%;
  margin: 28px auto 0;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}

.accomp-needs-visual img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  object-position: center;
  border: 0;
  box-shadow: none;
}

@media (max-width: 760px) {
  .accomp-needs-visual {
    border-radius: 18px;
  }
}


/* Pictogrammes fins — texte restauré */
body.accomp-redesign .accomp-needs-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
  align-items: stretch !important;
}
body.accomp-redesign .accomp-need-card {
  min-height: 360px !important;
  padding: 30px 18px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}
body.accomp-redesign .accomp-need-card img {
  width: 118px !important;
  height: 118px !important;
  max-width: 118px !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 7px 18px rgba(5,60,77,.08) !important;
}
body.accomp-redesign .accomp-need-card h3 {
  margin: 0 0 18px !important;
}
body.accomp-redesign .accomp-need-card p {
  display: block !important;
  margin: 0 !important;
  max-width: 230px !important;
  color: #073f4d !important;
  font-size: clamp(16px, 1.05vw, 19px) !important;
  line-height: 1.55 !important;
}
@media (max-width: 1100px) {
  body.accomp-redesign .accomp-needs-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 650px) {
  body.accomp-redesign .accomp-needs-grid { grid-template-columns: 1fr !important; }
  body.accomp-redesign .accomp-need-card { min-height: 0 !important; }
}

/* Page Accompagnement MDPH */
.mdph-page { background:#f7f3ec; color:#0b4a59; }
.mdph-main { width:min(100%,1536px); margin:0 auto; overflow:hidden; }
.mdph-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); align-items:stretch; min-height:560px; background:linear-gradient(120deg,#f8efe3 0%,#fffaf4 60%,#f2eadf 100%); }
.mdph-hero-copy { padding:clamp(58px,7vw,105px) clamp(30px,7vw,105px); display:flex; flex-direction:column; justify-content:center; }
.mdph-eyebrow { margin:0 0 14px; color:#d99712; font-size:15px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.mdph-hero h1 { margin:0 0 24px; color:#064858; font-family:Georgia,'Times New Roman',serif; font-size:clamp(42px,5vw,72px); line-height:1.02; font-weight:600; }
.mdph-lead { margin:0; max-width:780px; color:#214b57; font-size:clamp(18px,1.55vw,23px); line-height:1.68; }
.mdph-primary { margin-top:30px; width:fit-content; padding:14px 24px; border-radius:999px; background:#e8aa20; color:#153f4c; font-weight:900; text-decoration:none; }
.mdph-hero-media { min-height:560px; overflow:hidden; }
.mdph-hero-media img { width:100%; height:100%; min-height:560px; object-fit:cover; }
.mdph-section { padding:clamp(60px,7vw,100px) clamp(28px,7vw,105px); background:#fff; }
.mdph-section.mdph-soft { background:#f8f4ed; }
.mdph-heading { max-width:950px; margin-bottom:34px; }
.mdph-heading span { color:#d99712; font-size:14px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.mdph-heading h2 { margin:8px 0 0; color:#064858; font-family:Georgia,'Times New Roman',serif; font-size:clamp(34px,3.7vw,54px); line-height:1.08; font-weight:600; }
.mdph-two-col { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:28px; }
.mdph-text-card,.mdph-callout,.mdph-boundary { border:1px solid rgba(6,72,88,.12); border-radius:26px; background:#fff; box-shadow:0 14px 34px rgba(0,47,58,.06); }
.mdph-text-card { padding:30px 34px; }
.mdph-text-card p { margin:0 0 16px; color:#294b56; font-size:18px; line-height:1.72; }
.mdph-text-card p:last-child { margin-bottom:0; }
.mdph-callout { padding:30px; display:flex; flex-direction:column; justify-content:center; background:#fff9ec; border-color:rgba(232,170,32,.35); }
.mdph-callout strong { color:#064858; font-size:23px; line-height:1.3; }
.mdph-callout span { margin-top:12px; color:#395962; font-size:17px; line-height:1.65; }
.mdph-intro { max-width:1100px; margin:0 0 32px; color:#294b56; font-size:19px; line-height:1.75; }
.mdph-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.mdph-grid article { padding:28px; border-radius:24px; background:#fff; border:1px solid rgba(6,72,88,.1); box-shadow:0 12px 28px rgba(0,47,58,.05); }
.mdph-grid h3 { margin:14px 0 10px; color:#064858; font-size:23px; }
.mdph-grid p { margin:0; color:#365761; font-size:16.5px; line-height:1.65; }
.mdph-icon { width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#e8aa20; color:#064858; font-size:25px; font-weight:900; }
.mdph-nuance { margin:30px 0 0; padding:20px 24px; border-left:5px solid #e8aa20; border-radius:0 18px 18px 0; background:#fff; color:#294b56; font-size:17px; line-height:1.7; }
.mdph-support-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.mdph-support-grid > div { padding:24px; border-radius:22px; background:#f8f4ed; border:1px solid rgba(6,72,88,.1); }
.mdph-support-grid strong { color:#064858; font-size:21px; }
.mdph-support-grid p { margin:10px 0 0; color:#395962; font-size:16px; line-height:1.62; }
.mdph-boundary { margin-top:30px; padding:28px 32px; background:#fff9ec; border-color:rgba(232,170,32,.3); }
.mdph-boundary strong { color:#064858; font-size:22px; }
.mdph-boundary p { margin:8px 0 0; color:#395962; font-size:16.5px; line-height:1.7; }
.mdph-sources ul { margin:0; padding-left:22px; max-width:1050px; }
.mdph-sources li { margin:0 0 12px; color:#395962; line-height:1.55; }
.mdph-sources a { color:#064858; font-weight:700; }
.mdph-cta { margin:0; padding:clamp(40px,5vw,70px) clamp(28px,7vw,105px); display:flex; justify-content:space-between; gap:30px; align-items:center; background:#064858; color:#fff; }
.mdph-cta h2 { margin:0 0 8px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(30px,3vw,44px); font-weight:600; }
.mdph-cta p { margin:0; max-width:800px; font-size:17px; line-height:1.65; }
.mdph-cta a { flex:0 0 auto; padding:13px 22px; border-radius:999px; background:#e8aa20; color:#17384a; text-decoration:none; font-weight:900; }
@media(max-width:1000px){ .mdph-hero,.mdph-two-col{grid-template-columns:1fr;} .mdph-hero-media{min-height:360px;} .mdph-hero-media img{min-height:360px;} .mdph-grid{grid-template-columns:1fr;} .mdph-support-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:650px){ .mdph-section{padding-inline:20px;} .mdph-support-grid{grid-template-columns:1fr;} .mdph-cta{flex-direction:column; align-items:flex-start;} }


/* Repère TND — page MDPH */
.mdph-tnd-section { background:#fff; }
.mdph-tnd-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:26px; align-items:stretch; }
.mdph-tnd-card,.mdph-tnd-highlight { border-radius:26px; border:1px solid rgba(6,72,88,.12); box-shadow:0 14px 34px rgba(0,47,58,.06); }
.mdph-tnd-card { padding:30px 34px; background:#f8f4ed; }
.mdph-tnd-card p { margin:0 0 16px; color:#294b56; font-size:18px; line-height:1.72; }
.mdph-tnd-card p:last-child { margin-bottom:0; }
.mdph-tnd-highlight { padding:30px; display:flex; flex-direction:column; justify-content:center; background:#fff9ec; border-color:rgba(232,170,32,.36); }
.mdph-tnd-highlight strong { color:#064858; font-size:22px; line-height:1.35; }
.mdph-tnd-highlight span { margin-top:12px; color:#395962; font-size:16.5px; line-height:1.68; }
.mdph-tnd-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.mdph-tnd-tags span { padding:9px 14px; border-radius:999px; background:#064858; color:#fff; font-size:14px; font-weight:800; }
@media(max-width:900px){ .mdph-tnd-layout{grid-template-columns:1fr;} }

/* =========================================================
   ACCUEIL HARMONISÉ 2026 — vrais textes, boutons et cartes
   ========================================================= */
body.home-redesign {
  background: #f7f3ec;
  color: #0b4a59;
}
body.home-redesign .site-header {
  background: rgba(250,247,242,.98);
}
body.home-redesign .header-cta {
  min-height: 56px;
  padding: 14px 26px;
  background: #e8aa20;
  border: 1px solid rgba(6,72,88,.08);
  box-shadow: 0 8px 20px rgba(153,101,0,.12);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.home-redesign .header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(153,101,0,.17);
}
.home-main {
  width: min(100%, 1536px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr);
  min-height: 650px;
  background:
    radial-gradient(circle at 12% 12%, rgba(232,170,32,.10), transparent 31%),
    linear-gradient(120deg, #fbf5ea 0%, #fffaf4 56%, #f4eee5 100%);
}
.home-hero-copy {
  align-self: center;
  padding: clamp(66px, 7vw, 108px) clamp(34px, 6.5vw, 100px) clamp(68px, 7vw, 104px);
}
.home-eyebrow,
.home-section-heading > p,
.home-bottom-cta > div > p {
  margin: 0 0 14px;
  color: #d99712;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.home-hero h1 {
  margin: 0;
  max-width: 790px;
  color: #064858;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 5.25vw, 80px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}
.home-hero h1 span {
  display: block;
  margin-top: .05em;
  color: #e5a414;
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.home-promise {
  margin: 26px 0 0;
  color: #123f4d;
  font-size: clamp(21px, 1.7vw, 27px);
  line-height: 1.35;
}
.home-promise strong { font-weight: 800; }
.home-promise strong:nth-child(3) { color: #c98d0b; }
.home-lead {
  margin: 22px 0 0;
  max-width: 690px;
  color: #34545e;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.72;
}
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.home-btn {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.home-btn-primary {
  background: #e8aa20;
  color: #173f4c;
  box-shadow: 0 9px 22px rgba(166,108,0,.16);
}
.home-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(166,108,0,.21);
}
.home-btn-secondary {
  border-color: #0b5968;
  background: rgba(255,255,255,.72);
  color: #064858;
}
.home-btn-secondary:hover {
  transform: translateY(-2px);
  background: #064858;
  color: #fff;
  box-shadow: 0 10px 24px rgba(6,72,88,.16);
}
.home-btn:focus-visible,
.home-pillar-card:focus-visible {
  outline: 4px solid #e8aa20;
  outline-offset: 4px;
}
.home-hero-visual {
  position: relative;
  min-height: 650px;
  overflow: hidden;
}
.home-hero-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 15%;
  background: linear-gradient(90deg, #fffaf4 0%, rgba(255,250,244,.86) 24%, rgba(255,250,244,0) 100%);
  pointer-events: none;
}
.home-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: cover;
  object-position: 52% 48%;
  display: block;
}
.home-photo-note {
  position: absolute;
  z-index: 3;
  right: clamp(18px, 2.5vw, 38px);
  bottom: clamp(18px, 2.5vw, 38px);
  display: grid;
  min-width: 190px;
  padding: 16px 20px;
  border: 1px solid rgba(232,170,32,.32);
  border-radius: 18px;
  background: rgba(255,250,244,.92);
  box-shadow: 0 12px 30px rgba(0,39,51,.14);
  color: #064858;
  text-align: center;
  backdrop-filter: blur(7px);
}
.home-photo-note span,
.home-photo-note strong {
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
}
.home-photo-note span { font-size: 17px; }
.home-photo-note strong { color: #d99712; font-size: 25px; line-height: 1.05; }

.home-pillars {
  padding: clamp(72px, 7vw, 108px) clamp(30px, 6.5vw, 100px) clamp(78px, 7vw, 112px);
  background: #fff;
}
.home-section-heading {
  max-width: 840px;
  margin-bottom: 38px;
}
.home-section-heading h2,
.home-bottom-cta h2 {
  margin: 0;
  color: #064858;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.home-pillar-card {
  display: flex;
  min-height: 325px;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
  border: 1px solid rgba(6,72,88,.12);
  border-radius: 26px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0,47,58,.065);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,170,32,.48);
  box-shadow: 0 18px 42px rgba(0,47,58,.10);
}
.home-card-icon {
  display: inline-flex;
  width: 86px;
  height: 70px;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #f8f4ed;
}
.home-card-icon img {
  width: 86px;
  height: 58px;
  object-fit: contain;
}
.home-card-copy {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.home-card-copy strong {
  color: #064858;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 29px;
  font-weight: 600;
}
.home-card-copy > span {
  color: #395962;
  font-size: 16.5px;
  line-height: 1.62;
}
.home-card-link {
  margin-top: auto;
  padding-top: 24px;
  color: #b87800;
  font-size: 15px;
  font-weight: 900;
}
.home-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: clamp(48px, 5vw, 76px) clamp(30px, 6.5vw, 100px);
  background: #064858;
  color: #fff;
}
.home-bottom-cta > div > p { color: #f2bd50; }
.home-bottom-cta h2 {
  max-width: 800px;
  color: #fff;
  font-size: clamp(32px, 3.2vw, 48px);
}
.home-bottom-cta .home-btn { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .home-hero {
    grid-template-columns: 1fr;
  }
  .home-hero-copy {
    padding-bottom: 56px;
  }
  .home-hero-visual {
    min-height: 520px;
  }
  .home-hero-visual img {
    min-height: 520px;
    max-height: 680px;
  }
  .home-hero-visual::before {
    inset: 0 0 auto 0;
    width: 100%;
    height: 13%;
    background: linear-gradient(180deg, #fffaf4 0%, rgba(255,250,244,.82) 28%, rgba(255,250,244,0) 100%);
  }
  .home-card-grid {
    grid-template-columns: 1fr;
  }
  .home-pillar-card {
    min-height: 0;
  }
}
@media (max-width: 720px) {
  .home-hero-copy,
  .home-pillars,
  .home-bottom-cta {
    padding-left: 20px;
    padding-right: 20px;
  }
  .home-hero h1 {
    font-size: clamp(44px, 13.5vw, 64px);
  }
  .home-promise {
    display: grid;
    gap: 2px;
  }
  .home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .home-btn {
    width: 100%;
  }
  .home-hero-visual,
  .home-hero-visual img {
    min-height: 440px;
  }
  .home-photo-note {
    right: 14px;
    bottom: 14px;
    min-width: 168px;
    padding: 13px 15px;
  }
  .home-pillar-card {
    padding: 24px;
    border-radius: 22px;
  }
  .home-bottom-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-bottom-cta .home-btn {
    width: 100%;
  }
}
@media (max-width: 460px) {
  .home-hero-visual,
  .home-hero-visual img {
    min-height: 390px;
  }
  .home-hero-visual img {
    object-position: 48% 48%;
  }
  .home-photo-note { display: none; }
}



/* =========================================================
   EN-TETE HARMONISE SUR TOUT LE SITE (hors accueil)
   ========================================================= */
body:not(.home-approved) .site-header {
  position: relative !important;
  z-index: 30 !important;
  background: #064858 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body:not(.home-approved) .site-header::after {
  content: "" !important;
  position: absolute !important;
  left: 2cm !important;
  right: 2cm !important;
  bottom: 0 !important;
  height: 1px !important;
  background: #e7ab23 !important;
  pointer-events: none !important;
}

body:not(.home-approved) .header-inner {
  width: min(100%, var(--site-width)) !important;
  max-width: var(--site-width) !important;
  margin: 0 auto !important;
  min-height: 96px !important;
  padding: 6px clamp(20px, 2.4vw, 40px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  background: transparent !important;
}

body:not(.home-approved) .site-logo {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 9px !important;
  background: #f6f1e7 !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 22px rgba(5, 44, 56, .18) !important;
}

body:not(.home-approved) .site-logo img {
  width: 120px !important;
  max-width: 120px !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
}

body:not(.home-approved) .site-navigation {
  margin-left: auto !important;
  background: transparent !important;
}

body:not(.home-approved) .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 34px !important;
}

body:not(.home-approved) .nav-links a {
  position: relative !important;
  padding: 10px 0 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body:not(.home-approved) .nav-links a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 100% !important;
  bottom: -16px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #efb021 !important;
  transition: right .22s ease !important;
}

body:not(.home-approved) .nav-links a:hover,
body:not(.home-approved) .nav-links a.active,
body:not(.home-approved) .nav-links a[aria-current="page"] {
  color: #efb021 !important;
}

body:not(.home-approved) .nav-links a:hover::after,
body:not(.home-approved) .nav-links a.active::after,
body:not(.home-approved) .nav-links a[aria-current="page"]::after {
  right: 0 !important;
}

body:not(.home-approved) .header-cta {
  flex: 0 0 auto !important;
  margin-left: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 10px 26px !important;
  border-radius: 999px !important;
  background: #e7ad23 !important;
  color: #073f50 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body:not(.home-approved) .header-cta:hover {
  background: #efb52f !important;
  filter: none !important;
}

body:not(.home-approved) .header-cta .heart {
  margin-left: 12px !important;
  font-size: 1.05em !important;
}

body:not(.home-approved) .menu-toggle {
  display: none !important;
}

@media (max-width: 1100px) {
  body:not(.home-approved) .header-inner {
    min-height: 88px !important;
    padding: 8px 20px !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  body:not(.home-approved) .site-logo img {
    width: min(115px, 40vw) !important;
    max-width: min(115px, 40vw) !important;
  }

  body:not(.home-approved) .menu-toggle {
    display: inline-flex !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    background: #ffffff !important;
    color: #064858 !important;
  }

  body:not(.home-approved) .site-navigation {
    display: none !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
    background: transparent !important;
  }

  body:not(.home-approved) .site-navigation.open,
  body:not(.home-approved) .site-navigation.is-open {
    display: block !important;
  }

  body:not(.home-approved) .nav-links {
    display: grid !important;
    gap: 4px !important;
  }

  body:not(.home-approved) .nav-links a {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  body:not(.home-approved) .nav-links a::after {
    display: none !important;
  }

  body:not(.home-approved) .nav-links a.active,
  body:not(.home-approved) .nav-links a[aria-current="page"] {
    background: rgba(231,173,35,.12) !important;
  }

  body:not(.home-approved) .header-cta {
    margin-left: 0 !important;
    min-height: 48px !important;
    padding: 10px 22px !important;
  }
}

@media (max-width: 680px) {
  body:not(.home-approved) .header-inner {
    padding: 8px 12px !important;
  }

  body:not(.home-approved) .site-logo {
    padding: 4px 8px !important;
    border-radius: 12px !important;
  }

  body:not(.home-approved) .site-logo img {
    width: min(110px, 52vw) !important;
    max-width: min(110px, 52vw) !important;
  }

  body:not(.home-approved) .header-cta {
    width: 100% !important;
  }
}


/* Appel à l’action commun en fin de page de contenu */
.content-contact-cta{
  width:min(calc(100% - 48px),1180px);
  margin:48px auto 64px;
}
.content-contact-cta-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  padding:32px 38px;
  overflow:hidden;
  border:1px solid rgba(6,72,88,.12);
  border-radius:28px;
  background:linear-gradient(120deg,#fbf8f1 0%,#f7f1e7 100%);
  box-shadow:0 16px 36px rgba(6,72,88,.08);
}
.content-contact-cta-inner::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:5px;
  background:linear-gradient(90deg,#064858,#e8aa20);
}
.content-contact-cta-copy{
  position:relative;
  z-index:1;
  max-width:760px;
}
.content-contact-cta h2{
  margin:0 0 8px;
  color:#064858;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(28px,2.6vw,38px);
  line-height:1.15;
  font-weight:600;
}
.content-contact-cta p{
  margin:0;
  color:#315866;
  font-size:17px;
  line-height:1.6;
}
.content-contact-cta-button{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:12px 22px;
  border-radius:999px;
  background:#e8aa20;
  color:#17384a;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 8px 18px rgba(157,108,0,.16);
  transition:transform .18s ease,box-shadow .18s ease;
}
.content-contact-cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 11px 22px rgba(157,108,0,.22);
}
@media(max-width:760px){
  .content-contact-cta{width:min(calc(100% - 28px),1180px);margin:34px auto 48px;}
  .content-contact-cta-inner{flex-direction:column;align-items:flex-start;padding:28px 24px;gap:22px;}
}


/* Harmonisation légère des pictogrammes récurrents — v44 */
.footer-clean-item img{width:72px !important;height:72px !important;padding:12px;border-radius:999px;background:#0b5a6d;box-shadow:0 8px 18px rgba(0,47,58,.10);object-fit:contain}
.accomp-mdph-icon{background:#0b5a6d !important;border-radius:999px;box-shadow:0 8px 18px rgba(0,47,58,.10)}
.accomp-mdph-icon img{padding:12px;object-fit:contain}
@media (max-width:760px){.footer-clean-item img{width:64px !important;height:64px !important;padding:10px}.accomp-mdph-icon img{padding:10px}}


/* =========================================================
   TYPOGRAPHIE HARMONISEE — 2026-08-16
   Hiérarchie plus sobre et éditoriale : aucun contenu,
   aucune image et aucune structure de page ne sont modifiés.
   ========================================================= */

/* Pages simples / ressources / mentions */
.placeholder-hero h1 {
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1.08 !important;
}
.placeholder-hero p {
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.68 !important;
}
.placeholder-card h2 {
  font-size: clamp(20px, 1.55vw, 23px) !important;
  line-height: 1.25 !important;
}
.legal-hero h1 {
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.08 !important;
}
.legal-hero > p:not(.legal-eyebrow):not(.legal-update) {
  font-size: clamp(16.5px, 1.25vw, 19px) !important;
}
.legal-content h2 {
  font-size: clamp(23px, 2.2vw, 30px) !important;
}

/* Page Accompagnements */
body.accomp-redesign .accomp-hero-copy h1 {
  font-size: clamp(42px, 4.25vw, 66px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
}
body.accomp-redesign .accomp-hero-tagline {
  font-size: clamp(20px, 1.7vw, 27px) !important;
}
body.accomp-redesign .accomp-hero-copy > p:last-child {
  font-size: clamp(16.5px, 1.18vw, 19px) !important;
  line-height: 1.65 !important;
}
body.accomp-redesign .accomp-section-heading h2 {
  font-size: clamp(29px, 2.55vw, 41px) !important;
  line-height: 1.16 !important;
}
body.accomp-redesign .accomp-need-card h3,
body.accomp-redesign .accomp-offer-body h3 {
  font-size: clamp(18px, 1.35vw, 22px) !important;
  line-height: 1.3 !important;
}
body.accomp-redesign .accomp-framework-card h2,
body.accomp-redesign .accomp-mdph-copy h2 {
  font-size: clamp(25px, 2vw, 32px) !important;
  line-height: 1.2 !important;
}
body.accomp-redesign .accomp-cta-copy h2 {
  font-size: clamp(29px, 2.7vw, 42px) !important;
  line-height: 1.12 !important;
}

/* Page MDPH */
body.mdph-page .mdph-ateliers-title {
  font-size: clamp(33px, 2.75vw, 44px) !important;
  line-height: 1.09 !important;
}
body.mdph-page .mdph-ateliers-lead {
  font-size: clamp(16.5px, 1.2vw, 18.5px) !important;
  line-height: 1.62 !important;
}
body.mdph-page .mdph-ateliers-points strong {
  font-size: 18.5px !important;
}
body.mdph-page .mdph-ateliers-points span {
  font-size: 15px !important;
}
body.mdph-page .mdph-purpose h2,
body.mdph-page .mdph-steps-heading h2,
body.mdph-page .mdph-clean-heading h2 {
  font-size: clamp(27px, 2.35vw, 37px) !important;
  line-height: 1.16 !important;
}
body.mdph-page .mdph-purpose p,
body.mdph-page .mdph-clean-heading p,
body.mdph-page .mdph-clean-copy p {
  font-size: 16.5px !important;
  line-height: 1.68 !important;
}
body.mdph-page .mdph-clean-support h3 {
  font-size: 21px !important;
}
body.mdph-page .mdph-clean-support p,
body.mdph-page .mdph-steps-heading p {
  font-size: 16px !important;
}

/* Responsive : éviter les très grands titres sur petits écrans */
@media (max-width: 680px) {
  .placeholder-hero h1,
  .legal-hero h1 {
    font-size: clamp(32px, 9.5vw, 44px) !important;
  }
  body.accomp-redesign .accomp-hero-copy h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
  body.mdph-page .mdph-ateliers-title {
    font-size: clamp(30px, 8.8vw, 38px) !important;
  }
}

/* =========================================================
   ACCOMPAGNEMENTS — image principale légèrement réduite
   Ajustement demandé : conserver la structure et le contenu.
   ========================================================= */
body.accomp-redesign .accomp-hero {
  min-height: 460px !important;
  align-items: center !important;
}
body.accomp-redesign .accomp-hero-media {
  min-height: 440px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 34px 28px 10px !important;
  overflow: visible !important;
}
body.accomp-redesign .accomp-hero-media::before {
  width: 12% !important;
}
body.accomp-redesign .accomp-hero-media img {
  width: 92% !important;
  height: 400px !important;
  min-height: 0 !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: 72% center !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 34px rgba(6,55,68,.10) !important;
}
@media (max-width: 900px) {
  body.accomp-redesign .accomp-hero-media {
    min-height: 0 !important;
    padding: 0 24px 28px !important;
  }
  body.accomp-redesign .accomp-hero-media img {
    width: 100% !important;
    height: auto !important;
    max-height: 360px !important;
    min-height: 300px !important;
  }
}
@media (max-width: 600px) {
  body.accomp-redesign .accomp-hero-media {
    padding: 0 16px 22px !important;
  }
  body.accomp-redesign .accomp-hero-media img {
    max-height: 300px !important;
    min-height: 250px !important;
    border-radius: 18px !important;
  }
}


/* =========================================================
   Contact — informations pratiques, zones desservies et Instagram
   ========================================================= */
.contact-practical {
  background: #fffaf4;
  border-top: 1px solid rgba(6, 72, 88, .10);
  padding: clamp(42px, 6vw, 82px) clamp(18px, 4vw, 64px);
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif;
  color: #073b49;
}

.contact-practical-inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.contact-practical-eyebrow {
  margin: 0 0 8px;
  color: #e89500;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-practical h2 {
  margin: 0;
  color: #064858;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

.contact-practical-lead {
  max-width: 760px;
  margin: 16px 0 26px;
  color: #315664;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.6;
}

.contact-practical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-practical-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid rgba(6, 72, 88, .10);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(6, 72, 88, .06);
}

.contact-practical-icon,
.contact-social-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #f8eee0;
  color: #064858;
}

.contact-practical-icon svg,
.contact-social-instagram svg,
.contact-direct-links svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-social-instagram .svg-fill { fill: currentColor; stroke: none; }

.contact-practical-card h3 {
  margin: 0 0 5px;
  color: #064858;
  font-size: 17px;
  line-height: 1.25;
}

.contact-practical-card p {
  margin: 0;
  color: #345865;
  font-size: 15px;
  line-height: 1.48;
}

.contact-practical-card strong { color: #0a4050; }
.contact-muted { color: #66808a; font-weight: 600; }

.contact-direct-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.contact-direct-links a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 230px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #064858;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(6, 72, 88, .12);
}

.contact-direct-links a:hover { background: #0c5e70; }
.contact-direct-links svg { flex: 0 0 23px; }
.contact-direct-links span { display: grid; gap: 1px; min-width: 0; }
.contact-direct-links small { color: #f4c35c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.contact-direct-links strong { color: #ffffff; font-size: 15px; overflow-wrap: anywhere; }

.contact-social-card {
  padding: 22px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(6, 72, 88, .10);
  box-shadow: 0 16px 38px rgba(6, 72, 88, .08);
  text-align: center;
}

.contact-social-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  text-align: left;
}

.contact-social-heading p {
  margin: 0 0 2px;
  color: #e89500;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-social-heading h3 {
  margin: 0;
  color: #064858;
  font-size: 23px;
}

.contact-social-card > img {
  display: block;
  width: min(100%, 330px);
  height: auto;
  margin: 0 auto 14px;
  border-radius: 18px;
}

.contact-social-link {
  display: inline-block;
  color: #154dc2;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 850;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.contact-social-card > p {
  margin: 10px 0 0;
  color: #627981;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .contact-practical-inner { grid-template-columns: 1fr; }
  .contact-social-card { width: min(100%, 520px); justify-self: center; }
}

@media (max-width: 620px) {
  .contact-practical { padding-inline: 16px; }
  .contact-practical-grid { grid-template-columns: 1fr; }
  .contact-direct-links { display: grid; }
  .contact-direct-links a { min-width: 0; width: 100%; }
}


/* =========================================================
   Contact v51 — visuels validés : Instagram + zone d'intervention
   ========================================================= */
.contact-zone-map {
  margin: 24px 0 26px;
  overflow: hidden;
  border: 1px solid rgba(6, 72, 88, .10);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(6, 72, 88, .07);
}
.contact-zone-map img {
  display: block;
  width: 100%;
  height: auto;
}
.contact-social-approved {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  border-radius: 16px;
}
.contact-social-card > img.contact-social-approved {
  width: 100%;
  max-width: none;
  margin-bottom: 16px;
}
.footer-clean-instagram {
  overflow: hidden;
  padding: 0;
  background: #f8eee0;
}
.footer-clean-instagram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
@media (max-width: 620px) {
  .contact-zone-map { margin-top: 18px; border-radius: 16px; }
}


/* =========================================================
   Contact v52 — simplification des répétitions
   ========================================================= */
.contact-practical--streamlined {
  padding-top: clamp(30px, 4vw, 54px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.contact-practical--streamlined .contact-practical-inner {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
}

.contact-zone-map--clean {
  margin: 0;
}

.contact-social-card--clean {
  align-self: center;
}

.contact-social-card--clean .contact-social-approved {
  margin-bottom: 16px;
}

.contact-social-qr-link {
  display: block;
  width: min(100%, 315px);
  margin: 0 auto;
  border-radius: 18px;
  text-decoration: none;
}

.contact-social-card--clean .contact-social-qr {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 18px;
}

.contact-social-card--clean > p {
  max-width: 300px;
  margin: 14px auto 0;
}

@media (max-width: 900px) {
  .contact-practical--streamlined .contact-practical-inner {
    grid-template-columns: 1fr;
  }

  .contact-social-card--clean {
    width: min(100%, 520px);
    justify-self: center;
  }
}


/* =========================================================
   V57 — précision de l'acronyme MDPH
   ========================================================= */
.accomp-offer-card .accomp-acronym-note {
  margin: -2px 0 10px;
  color: #5c6f75;
  font-size: .86rem;
  line-height: 1.4;
}

/* =========================================================
   PIED DE PAGE — BANDEAU DES 4 PILIERS, DIMENSIONS CONSERVÉES
   ========================================================= */
.footer-clean-values.footer-clean-values--banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 142px !important;
  height: 142px !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.footer-clean-values-banner {
  display: block !important;
  width: 100% !important;
  max-width: 1172px !important;
  height: 142px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .footer-clean-values.footer-clean-values--banner {
    min-height: 92px !important;
    height: 92px !important;
  }

  .footer-clean-values-banner {
    height: 92px !important;
  }
}



/* =========================================================
   PIED DE PAGE ALLÉGÉ — IDENTITÉ SUR LES PAGES INTERNES
   ========================================================= */
.footer-clean-brand {
  min-height: 142px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(18px, 2.2vw, 28px);
  min-width: 0;
}

.footer-clean-brand-mark {
  flex: 0 0 auto;
  width: clamp(78px, 7vw, 96px);
  height: clamp(78px, 7vw, 96px);
  display: block;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(0, 25, 34, .24);
}

.footer-clean-brand-copy {
  min-width: 0;
  display: grid;
  gap: 9px;
  align-content: center;
}

.footer-clean-brand-title {
  color: #ffffff;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.018em;
}

.footer-clean-brand-title span {
  color: #f0aa1f;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  white-space: nowrap;
}

.footer-clean-brand-keywords {
  color: rgba(255,255,255,.82);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .012em;
}

@media (max-width: 720px) {
  .footer-clean-brand {
    min-height: 92px;
    gap: 16px;
  }
  .footer-clean-brand-mark {
    width: 72px;
    height: 72px;
  }
  .footer-clean-brand-title {
    font-size: clamp(20px, 6vw, 27px);
  }
  .footer-clean-brand-keywords {
    font-size: 13px;
  }
}


/* =========================================================
   FOOTER VISUEL UNIFIÉ — BANDEAU VALIDÉ SUR TOUTES LES PAGES
   ========================================================= */
.footer-clean-main--visual {
  display: block !important;
  padding: 0 !important;
}

.footer-unified-visual {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
}

.footer-unified-visual-image {
  display: block;
  width: 100%;
  height: auto;
}

.footer-unified-link {
  position: absolute;
  display: block;
  z-index: 2;
  border-radius: 12px;
}

.footer-unified-link:focus-visible {
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

.footer-unified-link--home {
  left: 1.6%;
  top: 43%;
  width: 72.5%;
  height: 34%;
}

.footer-unified-link--mail {
  left: 75.8%;
  top: 37%;
  width: 14.7%;
  height: 15%;
}

.footer-unified-link--instagram {
  left: 75.8%;
  top: 53%;
  width: 21.0%;
  height: 15.5%;
}

@media (max-width: 900px) {
  .footer-unified-visual { max-width: none; }
}

@media (max-width: 720px) {
  .footer-unified-link--home {
    left: 2%;
    top: 8%;
    width: 96%;
    height: 42%;
  }
  .footer-unified-link--mail {
    left: 70%;
    top: 34%;
    width: 27%;
    height: 18%;
  }
  .footer-unified-link--instagram {
    left: 70%;
    top: 53%;
    width: 28%;
    height: 18%;
  }
}


/* V57 — note MDPH sous le descriptif, juste avant le bouton */
body.accomp-redesign .accomp-offer-card--mdph .accomp-acronym-note {
  margin: auto 0 8px !important;
  color: #5c6f75 !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
body.accomp-redesign .accomp-offer-card--mdph .accomp-acronym-note + a {
  margin-top: 0 !important;
}


/* V57 — accompagnements : 4 vignettes sur la largeur */
body.accomp-redesign .accomp-offer-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* =========================================================
   V58 — CORRECTIONS DESKTOP UNIQUEMENT (>= 768 px)
   - carte MDPH : pictogramme inférieur retiré via source desktop dédiée
   - accompagnement individuel : visuel desktop propre, sans recadrage négatif
   La version téléphone conserve ses images/règles existantes.
   ========================================================= */
@media (min-width: 768px) {
  /* Image MDPH desktop : source dédiée sans le pictogramme rond inférieur. */
  body.accomp-redesign .accomp-offer-card--mdph .accomp-offer-media {
    content: url('../images/accompagnements/carte-mdph-desktop-sans-picto.webp') !important;
    aspect-ratio: 900 / 610 !important;
    object-fit: cover !important;
    object-position: top center !important;
    overflow: hidden !important;
  }

  /* Accompagnement individuel : verrouillage des proportions sur ordinateur. */
  body[data-page="accompagnement-individuel.html"] .page-shell {
    overflow-x: hidden !important;
  }
  body[data-page="accompagnement-individuel.html"] .page-canvas {
    width: min(100%, 1672px) !important;
    max-width: 100% !important;
    aspect-ratio: 1672 / 699 !important;
    overflow: hidden !important;
  }
  body[data-page="accompagnement-individuel.html"] .page-art {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
  }
}

/* =========================================================
   V5 — HARMONISATION DES IMAGES DES CARTES (ORDINATEUR)
   Uniquement à partir de 768 px. La version téléphone reste inchangée.
   ========================================================= */
@media (min-width: 768px) {
  body.accomp-redesign .accomp-offer-card .accomp-offer-media,
  body.accomp-redesign .accomp-offer-card--mdph .accomp-offer-media {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / .96 !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  body.accomp-redesign .accomp-offer-card--mdph .accomp-offer-media {
    object-position: center center !important;
  }
}