:root {
  --graphite: #202329;
  --ivoire: #F4F1EA;
  --foret: #245347;
  --bronze: #B58B60;
  --texte: #202329;
  --texte-doux: #4a4d54;
  --filet: #d9d3c6;
  --ivoire-fonce: #ebe6db;
  --sur-sombre: #d8d5cd;
  --sur-sombre-doux: #9a978f;
  --filet-sombre: #3a3d44;
  --max: 1200px;
  --gouttiere: clamp(20px, 5vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivoire);
  color: var(--texte);
  font: 400 17px/1.65 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: "Manrope", sans-serif; color: var(--graphite); margin: 0; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }

/* En-tête */
.entete { padding: 28px 0; position: sticky; top: 0; z-index: 10; background: var(--ivoire); transition: padding .3s ease, box-shadow .3s ease; }
.entete.defile { padding: 16px 0; box-shadow: 0 1px 0 var(--filet); }
.entete .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.marque { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; text-decoration: none; }
.marque span { color: var(--bronze); font-weight: 600; }
.nav { display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; }
.nav a { text-decoration: none; color: var(--texte-doux); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--graphite); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--bronze); }

/* Ouverture */
.ouverture { padding: clamp(32px, 6vw, 72px) 0 clamp(64px, 9vw, 120px); }
.ouverture .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.surtitre { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; color: var(--texte-doux); margin-bottom: 28px; }
.surtitre::before { content: ""; flex: 0 0 40px; height: 1px; background: var(--bronze); }
h1 { font-size: clamp(40px, 5.6vw, 70px); line-height: 1.05; font-weight: 800; max-width: 14ch; }
.chapeau { font-size: clamp(18px, 1.6vw, 20px); color: var(--texte-doux); max-width: 34em; margin: 32px 0 40px; }
.actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.bouton {
  display: inline-block; padding: 15px 26px; background: var(--foret); color: var(--ivoire);
  font: 600 15px/1 "Inter", sans-serif; text-decoration: none; border-radius: 2px;
  transition: background .2s;
}
.bouton:hover { background: #1b4036; }
.lien { font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--bronze); text-decoration-thickness: 1px; }
.titres { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; border-top: 1px solid var(--filet); }
.titres li { padding: 18px 28px 0 0; margin-right: 28px; font-size: 14px; line-height: 1.45; color: var(--texte-doux); border-right: 1px solid var(--filet); }
.titres li:last-child { border-right: 0; margin-right: 0; }
.titres strong { display: block; font-family: "Manrope", sans-serif; color: var(--graphite); font-size: 15px; font-weight: 700; }

.portrait { margin: 0; }
.cadre { position: relative; }
.cadre::before { content: ""; position: absolute; inset: 48px -28px -28px 48px; background: var(--graphite); z-index: 0; }
.portrait img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.portrait figcaption { margin-top: 44px; font-size: 13px; color: var(--texte-doux); text-align: right; }

/* Sections */
section { scroll-margin-top: 72px; }
.bloc { padding: clamp(72px, 10vw, 128px) 0; }
.bloc-tete { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 72px); margin-bottom: clamp(40px, 6vw, 72px); }
.repere { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--foret); padding-top: 12px; background: linear-gradient(currentColor, currentColor) top left / 100% 2px no-repeat; align-self: start; width: max-content; }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; font-weight: 700; max-width: 18ch; }
.bloc-tete p { margin-top: 20px; color: var(--texte-doux); max-width: 36em; }

/* Lignes éditoriales (apport, produits) */
.lignes { border-top: 1px solid var(--filet); }
.ligne-apport { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 72px); padding: 36px 0; border-bottom: 1px solid var(--filet); }
.ligne-apport .num { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; color: var(--bronze); }
.ligne-apport h3 { font-size: 23px; font-weight: 700; margin-bottom: 12px; }
.ligne-apport p { color: var(--texte-doux); max-width: 38em; margin: 0; }
.ligne-apport .outils { margin-top: 12px; font-size: 14px; color: var(--texte); }
.ligne-apport .actions { margin-top: 18px; }

/* Parcours */
.parcours { background: var(--ivoire-fonce); }
.poste { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 72px); padding: 40px 0; border-top: 1px solid var(--filet); }
.poste:last-child { border-bottom: 1px solid var(--filet); }
.periode { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; color: var(--texte-doux); }
.poste h3 { font-size: 23px; font-weight: 700; }
.poste .role { font-size: 15px; color: var(--foret); font-weight: 600; margin: 4px 0 16px; }
.poste ul { padding: 0; list-style: none; max-width: 40em; }
.poste li { position: relative; padding-left: 22px; color: var(--texte-doux); margin-bottom: 10px; }
.poste li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--bronze); }
.poste li b { color: var(--texte); font-weight: 600; }
.formations { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 72px); margin-top: clamp(56px, 8vw, 88px); }
.formations dl { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 32px; }
.formations dt { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; color: var(--texte-doux); padding: 16px 0; border-top: 1px solid var(--filet); }
.formations dd { margin: 0; padding: 16px 0; border-top: 1px solid var(--filet); }
.formations dd span { display: block; font-size: 15px; color: var(--texte-doux); }

/* Terrain */
.terrain { background: var(--graphite); color: var(--sur-sombre); }
.terrain .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 80px); align-items: end; }
.terrain figure { margin: 0 0 0 calc(-1 * var(--gouttiere)); }
.terrain figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.terrain figcaption { font-size: 13px; color: var(--sur-sombre-doux); margin-top: 14px; padding-left: var(--gouttiere); }
.terrain h2 { color: var(--ivoire); }
.terrain .repere { color: var(--bronze); margin-bottom: 32px; }
.terrain p { margin-top: 20px; }
blockquote { margin: 40px 0 0; padding: 0 0 0 24px; border-left: 2px solid var(--bronze); }
blockquote p { font-family: "Manrope", sans-serif; font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--ivoire); margin: 0 0 12px !important; }
blockquote cite { font-style: normal; font-size: 14px; color: var(--sur-sombre-doux); }

/* Distinctions */
.distinctions .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.distinctions figure { margin: 0; }
.distinctions figure img { width: 100%; }
.distinctions figcaption { font-size: 13px; color: var(--texte-doux); margin-top: 14px; }
.distinctions .repere { margin-bottom: 28px; }
.distinctions .grand { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(32px, 4vw, 50px); line-height: 1.06; letter-spacing: -0.03em; color: var(--graphite); margin-bottom: 24px; }
.distinctions .grand span { display: block; color: var(--foret); }
.distinctions p { color: var(--texte-doux); max-width: 36em; }
.distinctions .publications { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--filet); }
.distinctions h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.distinctions .actions { margin-top: 8px; gap: 24px; }

/* Produits */
.vitrine { padding-bottom: clamp(24px, 4vw, 48px); }
.vitrine .wrap { display: block; }
.vitrine h1 { max-width: none; }
@media (min-width: 700px) { .vitrine h1 { white-space: nowrap; } }
.vitrine .chapeau { max-width: 40em; }
.livres-liste { border-top: 1px solid var(--filet); }
.format { font-size: 14px; color: var(--texte-doux); }
.offre-entreprise { background: var(--ivoire-fonce); }
.offre-entreprise .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 88px); align-items: end; }
.offre-entreprise p { color: var(--texte-doux); margin-top: 20px; max-width: 34em; }

/* Fiches produits */
.produit { align-items: start; }
.visuel { --fond: var(--ivoire-fonce); background: var(--fond); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 26px; overflow: hidden; }
.parcours .visuel { --fond: var(--ivoire); }
.visuel img { height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 22px 30px -20px rgba(32, 35, 41, .55); transition: transform .8s var(--ease, ease); }
.visuel--maquette img { box-shadow: none; mix-blend-mode: multiply; }
.visuel--ecran { padding: 14px 18px 6px; }
.visuel--ecran img { width: 100%; height: 100%; box-shadow: none; }
.visuel--duo img { height: 82%; }
.visuel--duo img + img { margin-left: -10%; transform: translateY(10%); }
.produit:hover .visuel--duo img + img { transform: translateY(calc(10% - 4px)); }
.visuel--photo { padding: 0; }
.visuel--photo img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.produit:hover .visuel img, .produit:hover .couverture { transform: translateY(-4px); }
.produit h3 { margin-top: 6px; }
.produit .format { margin: 0; }

/* Couvertures adaptées (formations en ligne) */
.couverture {
  height: 100%; aspect-ratio: 3 / 4; background: var(--foret); color: var(--ivoire);
  padding: 8% 9%; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 22px 30px -20px rgba(32, 35, 41, .6); transition: transform .8s var(--ease, ease);
  container-type: size;
}
.couverture--graphite { background: var(--graphite); }
.couverture .type { font-size: 4.6cqh; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); line-height: 1.3; }
.couverture .titre { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 8.4cqh; line-height: 1.12; letter-spacing: -0.02em; }
.couverture .titre::after { content: ""; display: block; width: 18%; height: 2px; background: var(--bronze); margin-top: 6cqh; }
.couverture .auteur { font-family: "Manrope", sans-serif; font-size: 4.4cqh; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }

/* Ventes et avis */
.chiffres { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--filet); font-size: 15px; color: var(--texte-doux); }
.chiffres:empty { display: none; }
.chiffres b { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 20px; color: var(--graphite); margin-right: 4px; font-variant-numeric: tabular-nums; }
.etoiles { position: relative; display: inline-block; font-size: 15px; letter-spacing: 2px; color: var(--filet); margin-right: 8px; vertical-align: 1px; line-height: 1; }
.etoiles::before { content: "★★★★★"; }
.etoiles::after { content: "★★★★★"; position: absolute; left: 0; top: 0; color: var(--bronze); white-space: nowrap; overflow: hidden; width: calc(var(--note, 0) / 5 * 100%); }
.js .reveal .etoiles::after { width: 0; transition: width 1.4s var(--ease, ease) .35s; }
.js .reveal.visible .etoiles::after { width: calc(var(--note, 0) / 5 * 100%); }
.source { font-size: 13px; color: var(--texte-doux); margin-top: 28px; }

/* Contact */
.contact { background: var(--graphite); color: var(--sur-sombre); }
.contact .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 88px); align-items: end; }
.contact h2 { color: var(--ivoire); max-width: 15ch; }
.contact p { margin-top: 24px; max-width: 32em; }
.contact .bouton { background: var(--ivoire); color: var(--graphite); }
.contact .bouton:hover { background: #fff; }
.contact .lien { color: var(--ivoire); }
.coordonnees { list-style: none; padding: 0; font-size: 15px; }
.coordonnees li { padding: 14px 0; border-top: 1px solid var(--filet-sombre); display: flex; justify-content: space-between; gap: 16px; }
.coordonnees li span:first-child { color: var(--sur-sombre-doux); }
.coordonnees a { color: var(--ivoire); text-decoration: none; }
.coordonnees a:hover { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 5px; }

.reseaux { display: grid; gap: 12px; }
.bouton-contact {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--filet-sombre); border-radius: 2px; color: var(--ivoire); text-decoration: none;
  font: 600 16px/1 "Inter", sans-serif;
  transition: background .2s ease, border-color .2s ease, transform .25s var(--ease, ease);
}
.bouton-contact svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--bronze); }
.bouton-contact::after { content: "→"; margin-left: auto; color: var(--sur-sombre-doux); transition: transform .25s var(--ease, ease), color .2s ease; }
.bouton-contact:hover { background: rgba(244, 241, 234, .06); border-color: var(--bronze); }
.bouton-contact:hover::after { transform: translateX(4px); color: var(--ivoire); }
.contact .lieu { margin: 8px 0 0; font-size: 14px; color: var(--sur-sombre-doux); }

.pied { background: var(--graphite); color: #8a877f; font-size: 13px; padding: 28px 0 36px; }
.pied .ligne { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--filet-sombre); padding-top: 28px; }
.pied nav { display: flex; gap: 24px; }
.pied a { color: var(--sur-sombre); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 5px; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

/* Menu mobile : bouton carré arrondi + panneau déroulant (actif seulement avec JavaScript) */
.menu-bouton { display: none; }
@media (max-width: 900px) {
  .js .entete { padding: 14px 0; }
  .js .entete .wrap { flex-direction: row; flex-wrap: nowrap; align-items: center; }
  .js .marque { font-size: 21px; }
  .js .menu-bouton {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 52px; height: 52px; padding: 0; border: 1px solid var(--filet); border-radius: 14px;
    background: var(--ivoire); cursor: pointer; flex: 0 0 auto;
    position: relative; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .js .menu-bouton span { pointer-events: none; }
  .js .menu-bouton span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--graphite); transition: transform .3s var(--ease, ease), opacity .2s ease; }
  .js .menu-ouvert .menu-bouton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .js .menu-ouvert .menu-bouton span:nth-child(2) { opacity: 0; }
  .js .menu-ouvert .menu-bouton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .js .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; flex-wrap: nowrap;
    padding: 4px var(--gouttiere) 20px; background: var(--ivoire);
    border-bottom: 1px solid var(--filet); box-shadow: 0 18px 30px -24px rgba(32, 35, 41, .45);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s var(--ease, ease), visibility 0s linear .3s;
  }
  .js .menu-ouvert .nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .3s var(--ease, ease); }
  .js .nav a {
    padding: 16px 0; border-bottom: 1px solid var(--filet);
    font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 600; color: var(--graphite);
    text-decoration: none;
  }
  .js .nav a:last-child { border-bottom: 0; }
  .js .nav a:hover, .js .nav a[aria-current="page"] { color: var(--foret); text-decoration: none; }
}

/* ——— Mouvement ———
   Sobre et fonctionnel : apparitions au défilement, filets qui se tracent,
   entrée de l'ouverture. Désactivé si le visiteur préfère réduire les animations. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

.lien { transition: text-underline-offset .25s var(--ease), text-decoration-color .25s ease; }
.lien:hover { text-underline-offset: 3px; text-decoration-color: currentColor; }
.bouton { transition: background .2s ease, transform .25s var(--ease); }
.bouton:hover { transform: translateY(-2px); }

.terrain figure, .distinctions figure, .vitrine figure { overflow: hidden; }
.terrain figure img, .distinctions figure img, .vitrine figure img { transition: transform 1.2s var(--ease); }
.terrain figure:hover img, .distinctions figure:hover img, .vitrine figure:hover img { transform: scale(1.03); }

@keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes apparait { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes glisse { from { opacity: 0; transform: translate(-28px, -28px); } to { opacity: 1; transform: none; } }
@keyframes trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Ouverture, au chargement */
.js .ouverture .wrap > div > * { animation: monte .9s var(--ease) both; }
.js .ouverture .wrap > div > :nth-child(1) { animation-delay: .05s; }
.js .ouverture .wrap > div > :nth-child(2) { animation-delay: .15s; }
.js .ouverture .wrap > div > :nth-child(3) { animation-delay: .3s; }
.js .ouverture .wrap > div > :nth-child(4) { animation-delay: .45s; }
.js .ouverture .wrap > div > :nth-child(5) { animation-delay: .6s; }
.js .surtitre::before { transform-origin: left; animation: trait 1s .35s var(--ease) both; }
.js .portrait img { animation: apparait 1.2s .2s var(--ease) both; }
.js .cadre::before { animation: glisse 1.1s .5s var(--ease) both; }
.js .portrait figcaption { animation: monte .8s .9s var(--ease) both; }
.js .vitrine figure { animation: monte 1s .3s var(--ease) both; }

/* Apparitions au défilement (classes posées par animations.js) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delai, 0s); }
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal .repere { background-size: 0 2px; transition: background-size 1s var(--ease) .25s; }
.js .reveal.visible .repere { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal .repere { background-size: 100% 2px; }
}

@media (max-width: 900px) {
  .ouverture .wrap, .terrain .wrap, .distinctions .wrap, .contact .wrap, .vitrine .wrap, .offre-entreprise .wrap,
  .bloc-tete, .ligne-apport, .poste, .formations { grid-template-columns: 1fr; }
  .portrait { max-width: 440px; margin-right: 28px; }
  .distinctions figure { max-width: 480px; }
  .titres { grid-template-columns: 1fr; }
  .titres li { border-right: 0; margin-right: 0; padding: 14px 0; border-bottom: 1px solid var(--filet); }
  .terrain figure { margin: 0 calc(-1 * var(--gouttiere)); }
  .ligne-apport, .poste { gap: 8px; padding: 32px 0; }
  .formations { gap: 24px; }
  .nav { gap: 18px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .actions { gap: 20px; }
  .formations dl { grid-template-columns: 1fr; }
  .formations dt { padding-bottom: 0; }
  .formations dd { border-top: 0; padding-top: 4px; }
  .coordonnees li { flex-direction: column; gap: 2px; }
}