/* =====================================================================
   Orvexa — feuille globale
   Valeurs reprises de 05-TOKENS.css ; la grille, les hauteurs de hero et
   les tailles de titres suivent 02-DIRECTION-ET-INTERFACE.md.
   ===================================================================== */

/* ---------- Polices auto-hébergées (SIL OFL, voir assets/fonts/LICENCES.txt) */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/manrope.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono.woff2) format("woff2")}

:root{
  --graphite:#191a18;
  --graphite-raised:#232420;
  --ivory:#f3f0e7;
  --orange:#ff792d;
  --orange-hover:#ff914f;
  /* Orange assombri, réservé au texte et aux bordures sur fond ivoire :
     #ff792d sur #f3f0e7 ne donne que 2,4:1. */
  --orange-on-light:#a8420c;
  --ink:#20221e;
  --muted-on-light:#575a51;
  --muted-on-dark:#c4c5ba;
  --line-on-light:#d2d1c7;
  --line-on-dark:#45473f;
  --font-body:'Manrope',Arial,sans-serif;
  --font-label:'IBM Plex Mono',ui-monospace,monospace;
  --container:1600px;
  --gutter:64px;
  --section-space:112px;
  --header-height:88px;
  --radius-control:4px;
  --radius-media:8px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:112px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--font-body);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-ouvert{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:3px solid currentColor;outline-offset:5px;border-radius:2px}
[hidden]{display:none!important}

.container{width:min(calc(100% - 2*var(--gutter)),var(--container));margin-inline:auto}
.section{padding-block:var(--section-space)}
.section--graphite{background:var(--graphite);color:var(--ivory)}
.section--ivoire{background:var(--ivory);color:var(--ink)}

.eyebrow{font:400 12px/1.5 var(--font-label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-on-light)}
.section--graphite .eyebrow{color:var(--muted-on-dark)}
.index{font:400 14px/1.4 var(--font-label);letter-spacing:.04em;color:var(--muted-on-light)}
.section--graphite .index{color:var(--muted-on-dark)}

h1,h2,h3{font-weight:600;text-wrap:balance}
.titre-ligne{display:block}
/* Aucun mot ne peut depasser son conteneur. */
h1,h2,h3,p,li,a,button,label{overflow-wrap:break-word}
h2{font-size:56px;letter-spacing:-.045em;line-height:1.08}
h3{font-size:26px;letter-spacing:-.025em;line-height:1.2}
.mesure{max-width:62ch}
.aide{font-size:14px;line-height:1.6;color:var(--muted-on-light)}
.section--graphite .aide{color:var(--muted-on-dark)}

/* ---------- Liens d'évitement ---------- */
.evitement{position:fixed;left:20px;top:-100px;z-index:200;background:var(--orange);
  color:var(--graphite);padding:14px 20px;border-radius:var(--radius-control);
  text-decoration:none;font-weight:600;transition:top 180ms var(--ease)}
.evitement:focus{top:20px}

/* ---------- Boutons ---------- */
.button{min-height:48px;padding:13px 22px;border-radius:var(--radius-control);font-size:15px;
  font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:16px;
  text-decoration:none;border:1px solid transparent;
  transition:background 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)}
.button--primary{color:var(--graphite);background:var(--orange);border-color:var(--orange)}
.button--primary:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.button--primary:active{background:#f06a1e}
.button--ghost{color:var(--ivory);border-color:var(--line-on-dark);background:transparent}
.button--ghost:hover{border-color:var(--ivory)}
.section--ivoire .button--ghost{color:var(--ink);border-color:var(--line-on-light)}
.section--ivoire .button--ghost:hover{border-color:var(--ink)}
.button--souligne{padding:13px 0;min-height:48px;display:inline-flex;align-items:center;gap:12px;
  font-size:15px;font-weight:600;text-decoration:none;color:var(--ivory);
  border-bottom:1px solid var(--line-on-dark);border-radius:0}
.button--souligne:hover{border-bottom-color:var(--ivory)}
.lien-fleche{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-weight:600;
  font-size:16px;text-decoration:none;color:var(--orange-on-light);
  border-bottom:1px solid currentColor;padding-bottom:4px}
.section--graphite .lien-fleche{color:var(--orange)}
.lien-fleche svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  transition:transform 160ms var(--ease)}
.lien-fleche:hover svg{transform:translate(4px,-4px)}

/* ================= EN-TÊTE ================= */
.entete{position:sticky;top:0;z-index:100;height:var(--header-height);display:flex;
  align-items:center;background:transparent;color:var(--ivory);
  transition:background 180ms var(--ease),border-color 180ms var(--ease);
  border-bottom:1px solid transparent}
.entete--opaque,.entete.est-defile{background:var(--graphite);border-bottom-color:var(--line-on-dark)}
.entete__grille{display:flex;align-items:center;justify-content:space-between;gap:32px}
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marque__mot{font-size:30px;font-weight:700;letter-spacing:-.045em;line-height:1}
.marque__point{color:var(--orange)}
.nav-bureau{display:flex;align-items:center;gap:36px;margin-left:auto}
.nav-bureau a{font-size:16px;font-weight:500;text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent;transition:border-color 160ms var(--ease)}
.nav-bureau a:hover{border-bottom-color:var(--line-on-dark)}
.nav-bureau a[aria-current="page"]{border-bottom-color:var(--orange)}
.entete__actions{display:flex;align-items:center;gap:16px;flex:none}
.bouton-menu{display:none;min-height:44px;padding:10px 16px;border:1px solid var(--line-on-dark);
  border-radius:var(--radius-control);font-size:15px;font-weight:600}
.entete--opaque .bouton-menu,.entete.est-defile .bouton-menu{border-color:var(--line-on-dark)}

/* Panneau mobile */
.menu-mobile{position:fixed;inset:var(--header-height) 0 0;z-index:99;background:var(--graphite);
  color:var(--ivory);display:flex;flex-direction:column;padding:40px var(--gutter) 48px;
  overflow-y:auto}
.menu-mobile__liens{display:flex;flex-direction:column;gap:4px}
.menu-mobile__liens a{font-size:32px;font-weight:600;letter-spacing:-.03em;text-decoration:none;
  padding:14px 0;border-bottom:1px solid var(--line-on-dark);display:block}
.menu-mobile__bas{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:16px}

/* ================= HERO ================= */
.hero{position:relative;isolation:isolate;min-height:900px;background:var(--graphite);
  color:var(--ivory);overflow:clip;display:flex;flex-direction:column;
  margin-top:calc(-1 * var(--header-height))}
.hero__image{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(25,26,24,.78) 0%,rgba(25,26,24,.5) 38%,
    rgba(25,26,24,.08) 66%,transparent 100%)}
.hero__contenu{padding-top:225px}
.hero__bloc{max-width:800px}
.hero h1{font-size:80px;font-weight:600;line-height:1.02;letter-spacing:-.055em;margin:24px 0 28px}
.hero__lead{max-width:560px;margin:0;color:var(--ivory)}
.hero__actions{display:flex;gap:24px;align-items:center;margin-top:32px;flex-wrap:wrap}
.hero__pied{margin-top:auto;padding-bottom:42px}
.hero__filet{height:1px;background:var(--line-on-dark);margin-bottom:24px}
.hero__raccourcis{display:flex;gap:48px;flex-wrap:wrap}
.hero__raccourcis a{display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-size:15px;font-weight:500;text-decoration:none;color:var(--ivory)}
.hero__raccourcis svg{width:14px;height:14px;fill:none;stroke:var(--orange);stroke-width:2;
  transition:transform 160ms var(--ease)}
.hero__raccourcis a:hover svg{transform:translateX(4px)}

/* Hero interne, sans image */
.hero-interne{padding-block:96px}
.hero-interne h1{font-size:72px;font-weight:600;line-height:1.05;letter-spacing:-.05em;
  margin:24px 0 28px;max-width:16ch}
.hero-interne__intro{max-width:62ch;font-size:20px;color:var(--muted-on-light)}
.section--graphite .hero-interne__intro{color:var(--muted-on-dark)}

/* ================= ACCUEIL : orientation ================= */
.orientation__titre{margin:32px 0 64px}
.orientation__grille{display:grid;grid-template-columns:1fr 1fr;gap:64px;position:relative}
.orientation__grille::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--line-on-light)}
.orientation__bloc{display:flex;flex-direction:column;gap:20px;
  padding-right:64px}
.orientation__bloc:last-child{padding-right:0;padding-left:64px}
.orientation__bloc p{color:var(--muted-on-light);max-width:52ch}
.orientation__bloc .lien-fleche{margin-top:8px;align-self:flex-start}

/* ================= ACCUEIL : domaines ================= */
.domaines__titre{margin:32px 0 56px}
.domaines__liste{border-top:1px solid var(--line-on-dark)}
.domaine{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:32px;
  min-height:104px;padding:24px 0;border-bottom:1px solid var(--line-on-dark);
  text-decoration:none;transition:background 160ms var(--ease);position:relative}
.domaine::after{content:'';position:absolute;inset:0 -24px;z-index:-1;border-radius:2px;
  background:transparent;transition:background 160ms var(--ease)}
.domaine:hover::after{background:var(--graphite-raised)}
.domaine__texte{display:flex;flex-direction:column;gap:6px}
.domaine__titre{font-size:26px;font-weight:600;letter-spacing:-.025em;
  transition:color 160ms var(--ease)}
.domaine:hover .domaine__titre{color:#fff}
.domaine__desc{font-size:16px;color:var(--muted-on-dark)}
.domaine__fleche{width:22px;height:22px;fill:none;stroke:var(--muted-on-dark);stroke-width:1.6;
  transition:transform 160ms var(--ease),stroke 160ms var(--ease)}
.domaine:hover .domaine__fleche{stroke:var(--orange);transform:translateX(4px)}

/* ================= ACCUEIL : approche ================= */
.approche{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.approche__intro p{margin-top:24px;color:var(--muted-on-light);max-width:46ch}
.approche__etapes{display:flex;flex-direction:column}
.etape{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:32px 0;
  border-top:1px solid var(--line-on-light)}
.etape:first-child{padding-top:0;border-top:0}
.etape h3{font-size:26px}
.etape p{margin-top:12px;color:var(--muted-on-light);max-width:56ch}

/* ================= Bandeau de contact ================= */
.bandeau-contact{padding-block:96px}
.bandeau-contact h2{max-width:18ch}
.bandeau-contact p{margin:24px 0 32px;max-width:520px;color:var(--muted-on-dark)}

/* ================= PIED DE PAGE ================= */
.pied{background:var(--graphite);color:var(--ivory);padding-block:72px 40px}
.pied__haut{display:grid;grid-template-columns:2fr repeat(4,minmax(0,1fr));gap:48px;
  padding-bottom:48px;border-bottom:1px solid var(--line-on-dark)}
.pied__marque p{margin-top:16px;color:var(--muted-on-dark);max-width:28ch;font-size:16px}
.pied__groupe h2{font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:18px}
.pied__groupe ul{display:flex;flex-direction:column;gap:2px}
.pied__groupe a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;
  color:var(--muted-on-dark);text-decoration:none}
.pied__groupe a:hover{color:var(--ivory)}
.pied__bas{padding-top:28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:14px;color:var(--muted-on-dark)}

/* ================= SOLUTIONS ================= */
.filtres{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:48px;
  border-bottom:1px solid var(--line-on-light)}
.filtre{min-height:44px;padding:10px 18px;border:1px solid var(--line-on-light);
  border-radius:var(--radius-control);font-size:15px;font-weight:500;
  transition:background 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)}
.filtre:hover{border-color:var(--ink)}
.filtre[aria-pressed="true"]{background:var(--graphite);color:var(--ivory);border-color:var(--graphite)}
.familles{display:flex;flex-direction:column;gap:0;margin-top:56px}
.famille{padding:56px 0;border-bottom:1px solid var(--line-on-light);
  display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.famille:first-child{padding-top:0}
.famille p{color:var(--muted-on-light);max-width:60ch}
.famille .lien-fleche{margin-top:24px}
.etat-vide{margin-top:56px;padding:48px;border:1px solid var(--line-on-light);
  border-radius:var(--radius-media);background:#fff}
.etat-vide h2{font-size:32px;letter-spacing:-.03em}
.etat-vide p{margin:16px 0 28px;color:var(--muted-on-light);max-width:60ch}
.evaluation{margin-top:0}
.evaluation__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}
.evaluation__item{padding-top:24px;border-top:1px solid var(--line-on-light)}
.evaluation__item h3{font-size:20px;margin-bottom:10px}
.evaluation__item p{font-size:16px;color:var(--muted-on-light)}
.note-hebergement{margin-top:56px;padding:24px 28px;border-left:2px solid var(--orange-on-light);
  background:#eae7dd;font-size:16px;color:var(--muted-on-light);max-width:76ch}

/* ================= EXPERTISES ================= */
.expertises__liste{border-top:1px solid var(--line-on-light)}
.expertise-ligne{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:32px;
  min-height:120px;padding:28px 0;border-bottom:1px solid var(--line-on-light);
  text-decoration:none;position:relative}
.expertise-ligne::after{content:'';position:absolute;inset:0 -24px;z-index:-1;
  background:transparent;transition:background 160ms var(--ease);border-radius:2px}
.expertise-ligne:hover::after{background:#eae7dd}
.expertise-ligne__titre{font-size:28px;font-weight:600;letter-spacing:-.03em}
.expertise-ligne__desc{font-size:16px;color:var(--muted-on-light);margin-top:6px}
.expertise-ligne__fleche{width:22px;height:22px;fill:none;stroke:var(--muted-on-light);
  stroke-width:1.6;transition:transform 160ms var(--ease),stroke 160ms var(--ease)}
.expertise-ligne:hover .expertise-ligne__fleche{stroke:var(--orange-on-light);transform:translateX(4px)}

/* ================= PRESTATION ================= */
.fil{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted-on-light);
  margin-bottom:28px;flex-wrap:wrap}
.fil a{text-decoration:none;border-bottom:1px solid var(--line-on-light)}
.fil a:hover{border-bottom-color:var(--ink)}
.fil span[aria-current]{color:var(--ink)}
.besoins{margin-top:0}
.besoins ul{margin-top:32px;border-top:1px solid var(--line-on-light)}
.besoins li{padding:24px 0;border-bottom:1px solid var(--line-on-light);font-size:20px;
  display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:baseline}
.besoins li::before{content:attr(data-index);font:400 14px/1.6 var(--font-label);
  color:var(--muted-on-light)}
.prise-en-charge__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:48px}
.prise-en-charge__item{padding-top:28px;border-top:1px solid var(--line-on-dark)}
.prise-en-charge__item h3{font-size:22px;margin-bottom:12px}
.prise-en-charge__item p{color:var(--muted-on-dark);font-size:16px}
.livrables{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.livrables__intro{color:var(--muted-on-light);margin-top:24px;max-width:42ch}
.livrables ul{display:flex;flex-direction:column}
.livrables li{padding:24px 0;border-top:1px solid var(--line-on-light);font-size:20px;
  display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:baseline}
.livrables li:first-child{border-top:0;padding-top:0}
.livrables li::before{content:attr(data-index);font:400 14px/1.6 var(--font-label);
  color:var(--muted-on-light)}
.cadre{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.cadre p{font-size:20px;line-height:1.7;max-width:64ch}

/* ================= PROJETS / ENTREPRISE ================= */
.convictions{border-top:1px solid var(--line-on-light);margin-top:56px}
.conviction{padding:40px 0;border-bottom:1px solid var(--line-on-light);
  display:grid;grid-template-columns:96px 1fr;gap:32px;align-items:start}
.conviction h3{font-size:26px}
.conviction p{margin-top:12px;color:var(--muted-on-light);max-width:64ch}
.entreprise__intro{max-width:680px;font-size:20px;line-height:1.7;margin-top:28px}
.detail-marque{margin-top:64px;border-radius:var(--radius-media);overflow:hidden;
  border:1px solid var(--line-on-light)}
.detail-marque img{width:100%;height:340px;object-fit:cover;object-position:62% 40%}
.detail-marque figcaption{padding:16px 20px;font-size:14px;color:var(--muted-on-light);
  background:#eae7dd}

/* ================= CONTACT ================= */
.contact__grille{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.sujets-liste{margin-top:40px;border-top:1px solid var(--line-on-light)}
.sujets-liste li{padding:14px 0;border-bottom:1px solid var(--line-on-light);font-size:16px;
  color:var(--muted-on-light)}
.formulaire{background:#fff;border:1px solid var(--line-on-light);
  border-radius:var(--radius-media);padding:40px}
.bandeau-demo{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  border-left:2px solid var(--orange-on-light);background:#faf3ee;font-size:15px;
  color:var(--ink);margin-bottom:32px;border-radius:2px}
.champ{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.champ label{font-size:15px;font-weight:600}
.champ .obligatoire{color:var(--orange-on-light)}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;padding:12px 14px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line-on-light);border-radius:var(--radius-control);
  transition:border-color 160ms var(--ease)}
.champ textarea{min-height:140px;resize:vertical;line-height:1.6}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:#a9a89d}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--ink);outline-offset:2px}
.champ[data-erreur] input,.champ[data-erreur] select,.champ[data-erreur] textarea{
  border-color:#a8320f;background:#fdf4f1}
.champ__erreur{font-size:14px;color:#8d2a0c;min-height:0}
.champ__aide{font-size:14px;color:var(--muted-on-light)}
.resume-erreurs{padding:16px 18px;border:1px solid #a8320f;background:#fdf4f1;
  border-radius:var(--radius-control);margin-bottom:24px;font-size:15px}
.resume-erreurs ul{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.resume-erreurs a{color:#8d2a0c}
.statut-envoi{margin-top:20px;font-size:15px;padding:14px 16px;border-radius:var(--radius-control)}
.statut-envoi[data-etat="succes"]{background:#e9efe4;border:1px solid #6f8a58}
.statut-envoi[data-etat="demo"]{background:#eae7dd;border:1px solid var(--line-on-light)}
.statut-envoi[data-etat="echec"]{background:#fdf4f1;border:1px solid #a8320f}
.mentions-formulaire{margin-top:20px;font-size:14px;color:var(--muted-on-light)}
.mentions-formulaire a{color:var(--orange-on-light)}

/* ================= PAGES LÉGALES / 404 ================= */
.avis-brouillon{padding:20px 24px;border-left:2px solid var(--orange-on-light);
  background:#eae7dd;margin-bottom:48px;max-width:76ch;font-size:16px}
.champs-a-completer{border-top:1px solid var(--line-on-light);max-width:76ch}
.champs-a-completer li{padding:18px 0;border-bottom:1px solid var(--line-on-light);
  display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:baseline;font-size:18px}
.champs-a-completer li::before{content:attr(data-index);font:400 14px/1.6 var(--font-label);
  color:var(--muted-on-light)}
.page-404{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.page-404 h1{font-size:72px;letter-spacing:-.05em;line-height:1.05;max-width:14ch;margin:24px 0}
.page-404 p{max-width:52ch;color:var(--muted-on-light);margin-bottom:32px}

/* ================= Révélation ================= */
.revele{opacity:0;transform:translateY(16px);transition:opacity 480ms var(--ease),
  transform 480ms var(--ease)}
.revele.est-visible{opacity:1;transform:none}

/* =====================================================================
   ADAPTATIONS
   ===================================================================== */
@media (min-width:1600px){
  :root{--gutter:80px}
  .hero{min-height:960px}
  .hero h1{font-size:100px}
  .hero__bloc{max-width:1020px}
}

@media (max-width:1439px){
  .hero__contenu{padding-top:200px}
}

@media (max-width:1199px){
  h2{font-size:48px}
  .hero-interne h1{font-size:60px}
  .evaluation__grille{grid-template-columns:repeat(2,1fr);gap:40px}
  .prise-en-charge__grille{grid-template-columns:1fr;gap:32px}
  .pied__haut{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .pied__marque{grid-column:1/-1}
}

@media (max-width:1023px){
  :root{--gutter:32px;--header-height:72px;--section-space:80px}
  .nav-bureau{display:none}
  .entete__actions .button{display:none}
  .bouton-menu{display:inline-flex;align-items:center;justify-content:center}
  .hero{min-height:760px}
  /* L image est recadree plus serre : sa zone claire remonte sous le
     titre. Le voile est donc etendu pour garder le texte lisible. */
  .hero::before{background:linear-gradient(90deg,rgba(25,26,24,.88) 0%,
    rgba(25,26,24,.78) 42%,rgba(25,26,24,.45) 72%,rgba(25,26,24,.12) 100%)}
  .hero h1{font-size:60px}
  .hero__contenu{padding-top:180px}
  .hero__bloc{max-width:640px}
  .hero__raccourcis{gap:28px}
  .hero-interne{padding-block:72px}
  .hero-interne h1{font-size:52px}
  .orientation__grille{grid-template-columns:1fr;gap:40px}
  .orientation__grille::before{display:none}
  .orientation__bloc{padding:0;border-top:1px solid var(--line-on-light);padding-top:40px}
  .orientation__bloc:first-child{border-top:0;padding-top:0}
  .orientation__bloc:last-child{padding-left:0}
  .approche,.livrables,.cadre,.contact__grille,.famille{grid-template-columns:1fr;gap:40px}
  .domaine,.expertise-ligne{grid-template-columns:64px 1fr auto;gap:20px}
  .conviction{grid-template-columns:64px 1fr;gap:20px}
}

@media (max-width:767px){
  .pied__haut{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .formulaire{padding:28px 24px}
  .etat-vide{padding:32px 24px}
  .evaluation__grille{grid-template-columns:1fr;gap:28px}
  .detail-marque img{height:240px}
}

@media (max-width:599px){
  :root{--gutter:20px;--section-space:64px}
  body{font-size:17px}
  h2{font-size:36px}
  h3{font-size:24px}

  /* Hero : texte sur graphite, puis image en bas, jamais superposés. */
  .hero{min-height:0;display:flex;flex-direction:column;margin-top:0;overflow:visible}
  .hero::before{display:none}
  .hero__image{position:relative;z-index:0;height:320px;width:100%;object-position:76% center;order:2}
  .hero__contenu{padding-top:48px;padding-bottom:40px;order:1}
  .hero__bloc{max-width:none}
  .hero h1{font-size:44px;letter-spacing:-.04em}
  /* Les lignes imposees des titres se recomposent naturellement.
     L espace entre les deux phrases est conserve. */
  .titre-ligne{display:inline}
  /* Le hero ne passe plus derriere l en-tete : celui-ci porte son fond. */
  .entete{background:var(--graphite);border-bottom-color:var(--line-on-dark)}
  .hero__lead{max-width:none}
  .hero__actions{align-items:stretch;flex-direction:column;gap:16px}
  .hero__actions .button,.hero__actions .button--souligne{width:100%;min-height:48px;
    justify-content:center}
  .hero__pied{order:3;margin-top:0;padding-top:32px;padding-bottom:40px}
  .hero__raccourcis{flex-direction:column;gap:0}
  .hero__raccourcis a{justify-content:space-between;width:100%;min-height:56px;
    border-bottom:1px solid var(--line-on-dark)}
  .hero-interne{padding-block:56px}
  .hero-interne h1{font-size:40px}
  .hero-interne__intro{font-size:18px}
  .page-404 h1{font-size:40px}

  .domaine,.expertise-ligne{grid-template-columns:1fr auto;gap:12px;min-height:0;padding:22px 0}
  .domaine .index,.expertise-ligne .index{grid-column:1/-1}
  .conviction,.etape{grid-template-columns:1fr;gap:10px}
  .besoins li,.livrables li,.champs-a-completer li{grid-template-columns:1fr;gap:6px;font-size:18px}
  .pied__haut{grid-template-columns:minmax(0,1fr);gap:32px}
  .pied__marque p{max-width:none}
  .menu-mobile__liens a{font-size:26px}
  .note-hebergement,.avis-brouillon{padding:18px 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
    scroll-behavior:auto!important}
  .revele{opacity:1;transform:none}
}

/* ==========================================================================
   Fiche produit
   Ajoute pour /solutions/aides-plus. Reutilise les jetons existants : aucune
   nouvelle couleur, aucune nouvelle famille de caracteres.
   ========================================================================== */

/* --- carte sur /solutions ------------------------------------------------ */
.etiquette{display:inline-block;vertical-align:middle;margin-left:14px;padding:5px 11px;
  border:1px solid var(--line-on-light);border-radius:100px;
  font:400 11px/1.4 var(--font-label);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-on-light)}
.famille__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 36px;margin-top:24px}
.famille .famille__actions .lien-fleche{margin-top:0}
.lien-fleche--appui{color:var(--orange-on-light)}

/* --- en-tete de fiche ---------------------------------------------------- */
.hero-interne__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.button__poids{font:400 12px/1 var(--font-label);opacity:.72;margin-left:4px}
/* Bouton secondaire sur fond ivoire : .button--ghost est prevu pour le graphite. */
.button--fantome{color:var(--ink);border-color:var(--line-on-light);background:transparent}
.button--fantome:hover{border-color:var(--ink)}
.hero-interne__mention{margin-top:22px;font:400 13px/1.6 var(--font-label);
  color:var(--muted-on-light);letter-spacing:.02em}

/* --- roles --------------------------------------------------------------- */
.prise-en-charge__item .role{font:400 12px/1.5 var(--font-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange);margin-bottom:14px}

/* --- galerie de captures -------------------------------------------------- */
.galerie__intro{margin-top:20px;color:var(--muted-on-light);max-width:58ch}
/* La piste deborde volontairement du conteneur : les captures se parcourent
   lateralement. Le conteneur seul defile, jamais la page. */
.galerie{margin-top:56px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding-block:8px;-webkit-overflow-scrolling:touch}
.galerie__piste{display:flex;gap:32px;width:max-content;
  padding-inline:max(calc((100vw - min(calc(100% - 2*var(--gutter)),var(--container)))/2),var(--gutter))}
.capture{flex:0 0 280px;scroll-snap-align:center}
.capture img{width:280px;height:auto;border-radius:var(--radius-media);
  border:1px solid var(--line-on-light);background:#fff}
.capture figcaption{margin-top:18px;font-size:15px;line-height:1.55;color:var(--muted-on-light)}
.capture figcaption strong{display:block;color:var(--ink);font-weight:600;margin-bottom:5px}

/* --- bloc de telechargement ----------------------------------------------- */
.telechargement__bloc{padding:56px;border:1px solid var(--line-on-light);
  border-radius:var(--radius-media);background:#faf8f2}
.telechargement__bloc h2{margin-top:18px}
.telechargement__corps{margin:20px 0 32px;color:var(--muted-on-light);max-width:60ch}
.etapes{margin-top:48px;border-top:1px solid var(--line-on-light)}
.etapes li{padding:22px 0;border-bottom:1px solid var(--line-on-light);
  display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:baseline}
.etapes li::before{content:attr(data-index);font:400 14px/1.6 var(--font-label);
  color:var(--orange-on-light)}
/* li est la grille ; ::before, strong et span en sont trois elements.
   Sans placement explicite, span retombe dans la colonne de 48 px et le
   texte se replie caractere par caractere. */
.etapes strong{grid-column:2;font-weight:600}
.etapes span{grid-column:2;display:block;margin-top:5px;color:var(--muted-on-light);font-size:16px}
.fiche-technique{margin-top:48px;border-top:1px solid var(--line-on-light)}
.fiche-technique>div{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px 32px;
  padding:16px 0;border-bottom:1px solid var(--line-on-light)}
.fiche-technique dt{color:var(--muted-on-light);font-size:16px}
.fiche-technique dd{margin:0;font-size:16px;overflow-wrap:anywhere}
.fiche-technique code,.telechargement__verif code{font:400 14px/1.6 var(--font-label);
  background:#eceadf;padding:3px 7px;border-radius:3px}
.telechargement__verif{margin-top:26px;font-size:15px;color:var(--muted-on-light);max-width:70ch}

/* --- mises en garde -------------------------------------------------------- */
.avertissements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:48px}
.avertissement{padding:28px 32px;border-left:3px solid var(--orange-on-light);background:#eceadf;
  border-radius:0 var(--radius-media) var(--radius-media) 0}
.avertissement h3{font-size:19px;margin-bottom:10px}
.avertissement p{color:var(--muted-on-light);font-size:16px}

@media (max-width:1023px){
  .avertissements{grid-template-columns:minmax(0,1fr);gap:20px}
  .telechargement__bloc{padding:40px}
}
@media (max-width:767px){
  .fiche-technique>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}
  .capture{flex:0 0 78vw}
  .capture img{width:78vw}
  .galerie__piste{gap:20px}
}
@media (max-width:599px){
  .telechargement__bloc{padding:28px 22px;border-radius:var(--radius-media)}
  .hero-interne__actions .button{width:100%;justify-content:center}
  .etapes li{grid-template-columns:34px 1fr;gap:14px}
  .etiquette{margin-left:0;margin-top:12px;display:block;width:fit-content}
}

/* ==========================================================================
   Utilitaires de mise en page
   Remplacent les attributs style= en ligne, afin que la politique de securite
   puisse interdire 'unsafe-inline' pour les feuilles de style.
   ========================================================================== */
.sans-espace-haut{padding-top:0}
.appel-action{margin-top:32px}
.appel-action--serre{margin-top:24px}
.curseur-normal{cursor:default}
.titre-legal{font-size:64px;letter-spacing:-.05em;line-height:1.05;margin:24px 0}
@media (max-width:767px){.titre-legal{font-size:40px}}

/* --- pages legales ------------------------------------------------------- */
.mentions{margin-top:48px;border-top:1px solid var(--line-on-light)}
.mentions>div{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px 40px;
  padding:20px 0;border-bottom:1px solid var(--line-on-light)}
.mentions dt{color:var(--muted-on-light);font-size:16px}
.mentions dd{margin:0;font-size:17px;max-width:62ch}
.a-completer{margin-top:56px;padding:32px 36px;border-left:3px solid var(--orange-on-light);
  background:#eceadf;border-radius:0 var(--radius-media) var(--radius-media) 0}
/* Le bloc porte deja son filet et son fond : la mise en forme autonome de
   l avis ferait doublon a l interieur. */
.a-completer .avis-brouillon{margin:0 0 20px;padding:0;border-left:0;background:none}
.a-completer .champs-a-completer{margin-top:0}
@media (max-width:767px){
  .mentions>div{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
  .a-completer{padding:24px 20px}
}

/* --- demande de lien de telechargement ----------------------------------- */
/* Formulaire HTML classique, sans JavaScript : la politique de securite du
   site interdit les appels depuis la page (connect-src 'none'). */
.demande-lien{margin-top:8px;padding:32px;border:1px solid var(--line-on-light);
  border-radius:var(--radius-media);background:#fff}
.demande-lien h3{font-size:20px;letter-spacing:-.3px;margin-bottom:12px}
.demande-lien__corps{color:var(--muted-on-light);max-width:62ch;margin-bottom:26px}
.demande-lien label{display:block;font:400 12px/1.5 var(--font-label);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted-on-light);margin-bottom:10px}
.demande-lien__ligne{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.demande-lien input{flex:1 1 280px;min-height:48px;padding:12px 16px;font:inherit;
  font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line-on-light);border-radius:var(--radius-control)}
.demande-lien input:focus-visible{outline:3px solid var(--orange-on-light);outline-offset:2px}
.demande-lien input::placeholder{color:#73776c;opacity:1}
.demande-lien .button{flex:0 0 auto}
.demande-lien__mention{margin-top:18px;font-size:14px;line-height:1.6;
  color:var(--muted-on-light);max-width:64ch}
@media (max-width:599px){
  .demande-lien{padding:24px 20px}
  .demande-lien__ligne{flex-direction:column}
  .demande-lien .button{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------- suite
   Page /apps. Le premier jet alignait treize rectangles blancs : lisible,
   mais sans aucune hierarchie, et rien ne distinguait une application d une
   autre. Ici l entete passe sur fond graphite pour ouvrir la page, les
   applications sont des lignes denses plutot que des pavés, et chacune porte
   un monogramme qui lui sert de reperage.

   Aucune icone n est empruntee au projet d origine : ses visuels de marque ne
   sont pas couverts par la licence. */
.suite-tete{padding-top:calc(var(--header-height) + 72px)}
.suite-tete h1{max-width:16ch}
.suite-tete__lead{margin-top:24px;max-width:62ch;font-size:19px;line-height:1.65;
  color:var(--muted-on-dark)}

.chiffres{display:flex;flex-wrap:wrap;gap:0;margin-top:64px;
  border-top:1px solid var(--line-on-dark)}
.chiffre{flex:1 1 220px;padding:28px 32px 0 0;display:flex;flex-direction:column;gap:6px}
.chiffre__valeur{font-size:44px;line-height:1;letter-spacing:-.04em;color:#fff}
.chiffre__libelle{font:400 13px/1.5 var(--font-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-on-dark)}

.suite-intro{margin-top:16px;max-width:70ch;color:var(--muted-on-light);font-size:16px;
  line-height:1.7}

/* Deux colonnes de lignes. Treize cartes en grille laissaient un trou en fin
   de derniere rangee ; des lignes se terminent proprement quel qu en soit le
   nombre. */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:48px;
  border-top:1px solid var(--line-on-light)}
.app{display:flex;gap:20px;align-items:flex-start;padding:26px 0;
  border-bottom:1px solid var(--line-on-light)}
.app__monogramme{flex:0 0 auto;width:46px;height:46px;border-radius:var(--radius-media);
  display:flex;align-items:center;justify-content:center;
  background:var(--graphite);color:#fff;
  font:400 14px/1 var(--font-label);letter-spacing:.08em}
.app__corps{display:flex;flex-direction:column;gap:4px;min-width:0}
.app__titre{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.app__titre h3{font-size:19px;letter-spacing:-.02em;margin:0}
.app__version{font:400 11px/1.4 var(--font-label);letter-spacing:.06em;
  color:var(--muted-on-light);border:1px solid var(--line-on-light);
  border-radius:100px;padding:3px 9px;white-space:nowrap}
.app__role{font:400 11px/1.5 var(--font-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-on-light)}
.app__resume{margin-top:4px;font-size:15px;line-height:1.65;color:var(--muted-on-light);
  max-width:46ch}

/* Bloc telechargement : deux colonnes, le titre tenant la gauche. */
.telechargement{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.telechargement__intro h2{margin-top:14px;max-width:14ch}
.telechargement__texte p{margin:0 0 18px;font-size:16px;line-height:1.75;
  color:var(--muted-on-dark);max-width:68ch}
.telechargement__texte p:last-child{margin-bottom:0}

/* Encart de provenance. Il n est pas decoratif : les licences du projet
   d origine imposent d indiquer l oeuvre dont celle-ci derive. */
.provenance{margin-top:64px;padding:32px;border:1px solid var(--line-on-light);
  border-radius:var(--radius-media);background:#fff}
.provenance h2{font-size:22px;letter-spacing:-.02em;margin:0 0 14px}
.provenance p{margin:0 0 12px;font-size:14.5px;line-height:1.7;
  color:var(--muted-on-light);max-width:84ch}
.provenance p:last-child{margin-bottom:0}

@media (max-width:1023px){
  .apps{grid-template-columns:1fr;gap:0}
  .telechargement{grid-template-columns:1fr;gap:28px}
  .telechargement__intro h2{max-width:none}
}
@media (max-width:767px){
  .suite-tete{padding-top:calc(var(--header-height) + 40px)}
  .chiffres{margin-top:44px}
  .chiffre{flex:1 1 100%;padding:22px 0 0}
  .chiffre__valeur{font-size:36px}
  .app{gap:16px;padding:22px 0}
  .app__monogramme{width:40px;height:40px;font-size:13px}
  .provenance{padding:24px 20px;margin-top:48px}
}