/* ============================================================
   ÔRYZON — Feuille de styles partagée
   ------------------------------------------------------------
   Fichier UNIQUE chargé par toutes les pages du site.
   Contient : variables de charte, navigation (bandeau + lettres
   + catégories), rail vertical des domaines, pied de page, et
   styles génériques des pages de domaine.

   ⚠️  Pour modifier la charte (couleur, espacement, responsive)
   d'un coup sur TOUT le site, c'est ICI et nulle part ailleurs.

   Les styles SPÉCIFIQUES à une page (grille d'accueil,
   formulaire de contact) restent en <style> local sur la page
   concernée — ils ne sont pas ici.
   ============================================================ */

:root{
    --marine:#1B2B4B;
    --or:#C2922E;
    --or-clair:#E0A93B;
    --bronze:#7A6322;
    --gris-sep:#D8D2C6;
    --gris-txt:#888880;
    --gris-pixel:#BDB7A8;
    --blanc:#FFFFFF;
    --serif:'Fraunces',Georgia,serif;
    --sans:'Montserrat','Segoe UI',Arial,sans-serif;
    --max:1340px;
    --max-texte:760px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    color:var(--marine);
    background:var(--blanc);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--max);margin:0 auto;padding:0 6vw;}

  /* ---------- NAVIGATION ---------- */
  .topbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
    padding:20px 6vw;
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  .topbar.scrolled{
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    padding:12px 6vw;
    box-shadow:0 1px 0 rgba(27,43,75,.06);
  }
  /* wordmark-menu : visible dès le chargement (plus de fondu lié au scroll) */
  .nav-mark{
    display:flex;align-items:baseline;gap:2px;
    font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:1px;
    text-decoration:none;
  }
  .nav-letter{
    position:relative;color:var(--marine);text-decoration:none;
    padding:3px 3px 7px;transition:color .2s ease;
  }
  .nav-letter:first-child{color:var(--or);}
  .nav-letter:hover{color:var(--or);}
  /* affordance : fin trait sous chaque lettre, qui s'épaissit/s'éclaire au survol */
  .nav-letter::before{
    content:'';position:absolute;left:3px;right:3px;bottom:2px;height:1.5px;
    background:var(--or);opacity:.35;transition:opacity .2s ease, height .2s ease, bottom .2s ease;
  }
  .nav-letter:hover::before{opacity:1;height:2.5px;bottom:1px;}
  /* libellé du domaine qui apparaît au survol */
  .nav-letter::after{
    content:attr(data-domaine);
    position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%) translateY(-4px);
    white-space:nowrap;
    font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.5px;
    color:var(--marine);background:#fff;padding:4px 9px;border-radius:6px;
    box-shadow:0 4px 14px rgba(27,43,75,.12);
    opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  }
  .nav-letter:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}

  .nav-right{display:flex;align-items:center;gap:26px;}
  .nav-contact{
    font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:2px;
    color:var(--marine);text-decoration:none;display:flex;align-items:center;gap:8px;
  }
  .nav-contact .dot{width:5px;height:5px;border-radius:50%;background:var(--or);display:inline-block;}

  /* ---------- CATÉGORIES DU BANDEAU (survol → sous-menu) ---------- */
  .nav-categories{display:flex;align-items:center;justify-content:center;gap:26px;}
  .nav-cat{position:relative;}
  .nav-cat-label{
    font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--marine);
    padding:8px 2px;display:inline-block;cursor:default;
    transition:color .2s ease;
  }
  .nav-cat-label::after{content:'▾';margin-left:5px;font-size:8px;opacity:.55;}
  .nav-cat:hover .nav-cat-label{color:var(--or);}
  .nav-cat-menu{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);
    min-width:230px;background:#fff;border-radius:10px;
    box-shadow:0 10px 30px rgba(27,43,75,.14);
    padding:8px;opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-cat:hover .nav-cat-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .nav-cat-menu a{
    display:block;font-family:var(--sans);font-weight:500;font-size:13px;
    color:var(--marine);text-decoration:none;padding:9px 12px;border-radius:7px;
    transition:background .2s ease, color .2s ease;white-space:nowrap;
  }
  .nav-cat-menu a:hover{background:#FBF9F4;color:var(--or);}

  .nav-cat-toggle{
    display:none;align-items:center;gap:6px;margin:0 auto;
    background:none;border:none;cursor:pointer;padding:8px 2px;
    font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--marine);
  }
  .nav-cat-toggle .chev{font-size:8px;opacity:.55;transition:transform .25s ease;}
  .nav-cat-toggle.open .chev{transform:rotate(180deg);}

  .nav-cat-panel{
    position:fixed;top:0;left:0;right:0;z-index:90;
    background:#fff;box-shadow:0 14px 34px rgba(27,43,75,.14);
    padding:96px 6vw 24px;
    display:grid;grid-template-columns:repeat(2,1fr);gap:2px 28px;
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav-cat-panel.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .nav-cat-panel a{
    display:flex;flex-direction:column;gap:2px;text-decoration:none;
    padding:10px 8px;border-radius:8px;border-bottom:1px solid #F0EDE4;
    transition:background .2s ease;
  }
  .nav-cat-panel a:hover{background:#FBF9F4;}
  .ncp-cat{
    font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--gris-txt);
  }
  .ncp-offre{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--marine);}

  /* ---------- SECTION 7 — LE PIED ---------- */
  .pied-cloture{
    position:relative;padding:70px 6vw 90px calc(6vw + 108px);text-align:center;overflow:hidden;
  }
  .pied-cloture>*{position:relative;z-index:1;}
  .pied-phrase{
    font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,26px);
    color:var(--marine);margin-bottom:26px;
  }
  .pied-promesse{
    font-family:var(--sans);font-weight:600;font-size:clamp(12px,1.5vw,15px);
    letter-spacing:1.5px;color:var(--marine);margin-bottom:36px;
  }
  .pied-promesse .sep{color:var(--or);margin:0 6px;}
  .pied-contact-btn{
    display:inline-block;font-family:var(--sans);font-weight:600;
    font-size:12px;letter-spacing:2px;color:var(--marine);
    text-decoration:none;padding:14px 34px;border:1.3px solid var(--marine);
    border-radius:24px;transition:background .3s ease, color .3s ease;
  }
  .pied-contact-btn:hover{background:var(--marine);color:#fff;}

  .pied-technique{
    border-top:1px solid var(--gris-sep);
    max-width:var(--max);margin:0 auto;padding:34px 6vw 44px calc(6vw + 108px);
    display:flex;justify-content:space-between;align-items:flex-start;
    flex-wrap:wrap;gap:24px;
  }
  .pied-mark{height:52px;width:auto;display:block;}
  .pied-nav{
    display:flex;flex-wrap:wrap;gap:8px 22px;max-width:560px;
  }
  .pied-nav a{
    font-family:var(--sans);font-weight:500;font-size:11.5px;color:var(--gris-txt);
    text-decoration:none;transition:color .2s ease;
  }
  .pied-nav a:hover{color:var(--marine);}
  .pied-legal{
    max-width:var(--max);margin:0 auto;padding:0 6vw 30px calc(6vw + 108px);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
    border-top:1px solid #F0EDE4;padding-top:18px;
  }
  .pied-legal span,.pied-legal a{
    font-family:var(--sans);font-weight:400;font-size:10px;color:#A8A8A0;text-decoration:none;
  }

  /* ---------- RAIL VERTICAL DES DOMAINES ---------- */
  .rail-domaine{
    display:flex;flex-direction:column;justify-content:center;gap:22px;
    position:fixed;left:0;top:88px;bottom:0;
    width:108px;padding:24px 14px;z-index:50;
    border-right:1px solid var(--gris-sep);
  }
  .rail-entree{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
    text-decoration:none;padding:8px 4px;border-radius:10px;
    transition:background .25s ease;
  }
  .rail-entree:hover{background:#FBF9F4;}
  .rail-icone{height:26px;width:auto;max-width:60px;display:block;opacity:.7;transition:opacity .25s ease, height .25s ease;}
  .rail-entree:hover .rail-icone{opacity:1;}
  .rail-nom{
    font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.3px;
    color:var(--gris-txt);text-align:center;line-height:1.25;
    transition:color .25s ease;
  }
  .rail-entree.actuel{background:#FBF9F4;}
  .rail-entree.actuel .rail-icone{opacity:1;height:32px;}
  .rail-entree.actuel .rail-nom{color:var(--marine);font-weight:700;}
  .rail-entree.actuel::before{
    content:'';position:absolute;left:0;width:2.5px;height:30px;background:var(--or);
    border-radius:0 2px 2px 0;
  }
  /* mini description au survol, instantanée (pas de fondu), à droite de la lettre */
  .rail-desc{
    position:absolute;left:100%;top:50%;transform:translateY(-50%);
    margin-left:10px;width:180px;
    font-family:var(--sans);font-weight:500;font-size:11.5px;line-height:1.4;
    color:var(--marine);background:#fff;padding:10px 12px;border-radius:8px;
    box-shadow:0 6px 20px rgba(27,43,75,.16);
    opacity:0;pointer-events:none;z-index:60;
  }
  .rail-entree:hover .rail-desc{opacity:1;}

  .page-contenu{margin-left:108px;}

  @media (max-width:1280px){
    .nav-categories{display:none;}
    .nav-cat-toggle{display:flex;}
  }
  @media (max-width:720px){
    .topbar{gap:8px;}
    .nav-mark{font-size:21px;}
    .nav-letter::after{display:none;}
    .nav-cat-toggle{font-size:9.5px;gap:4px;}
    .nav-right{gap:12px;}
    .nav-contact{font-size:10px;letter-spacing:1px;gap:0;}
    .nav-contact .dot{display:none;}
    .pied-technique{flex-direction:column;gap:18px;}
    .rail-domaine{display:none;}
    .pied-cloture,.pied-technique,.pied-legal{padding-left:6vw;}
    .page-contenu{margin-left:0;}
  }
  @media (max-width:400px){
    .nav-cat-toggle-label{display:none;}
    .nav-cat-toggle .chev{font-size:12px;}
  }

  /* ---------- GÉNÉRIQUE PAGE DE DOMAINE ---------- */

  .kicker{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:2.2px;color:var(--bronze);text-transform:uppercase;margin-bottom:14px;}
  .section{padding:78px 6vw;max-width:var(--max);margin:0 auto;}
  .section-titre{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,34px);color:var(--marine);line-height:1.25;margin-bottom:18px;max-width:var(--max-texte);}
  .section-texte{font-family:var(--sans);font-weight:400;font-size:15.5px;color:var(--gris-txt);line-height:1.7;max-width:var(--max-texte);}

  .domaine-hero{padding:130px 6vw 70px;max-width:var(--max);margin:0 auto;display:flex;align-items:flex-end;gap:36px;flex-wrap:wrap;border-bottom:1px solid var(--gris-sep);padding-bottom:54px;}
  .domaine-hero img{height:96px;width:auto;flex:0 0 auto;}
  .domaine-hero-txt{flex:1 1 380px;}
  .domaine-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,42px);color:var(--marine);line-height:1.2;margin-bottom:14px;}
  .domaine-hero p{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--bronze);max-width:620px;line-height:1.6;}

  .piliers{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px;}
  .pilier{background:#FBF9F4;border:1px solid var(--gris-sep);border-radius:14px;padding:34px 30px;}
  .pilier h3{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--marine);margin-bottom:12px;}
  .pilier ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px;}
  .pilier li{font-family:var(--sans);font-size:14px;color:var(--gris-txt);padding-left:18px;position:relative;line-height:1.5;}
  .pilier li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--or);}
  .fil-commun{margin-top:30px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--marine);}

  .comparaison{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px;}
  .compare-col{border-radius:14px;padding:34px 30px;}
  .compare-avant{background:#F6F4EE;border:1px solid var(--gris-sep);}
  .compare-apres{background:#FFFFFF;border:1.5px solid var(--or);}
  .compare-col h3{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:1px;margin-bottom:16px;}
  .compare-avant h3{color:var(--gris-txt);}
  .compare-apres h3{color:var(--or);}
  .compare-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
  .compare-col li{font-family:var(--sans);font-size:14px;line-height:1.5;padding-left:18px;position:relative;}
  .compare-avant li{color:var(--gris-txt);}
  .compare-apres li{color:var(--marine);}
  .compare-avant li::before{content:'×';position:absolute;left:0;top:0;color:var(--gris-pixel);font-weight:700;}
  .compare-apres li::before{content:'✓';position:absolute;left:0;top:0;color:var(--or);font-weight:700;}

  .lecture{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px;}
  .lecture-bloc{padding:28px 26px;border-radius:12px;}
  .lecture-dirigeant{background:#FFFFFF;border:1px solid var(--gris-sep);}
  .lecture-dsi{background:var(--marine);}
  .lecture-bloc .lecture-label{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:1.5px;margin-bottom:12px;}
  .lecture-dirigeant .lecture-label{color:var(--or);}
  .lecture-dsi .lecture-label{color:var(--or-clair);}
  .lecture-bloc p{font-family:var(--sans);font-size:14.5px;line-height:1.7;}
  .lecture-dirigeant p{color:var(--gris-txt);}
  .lecture-dsi p{color:#EDEAE0;}
  .lecture-seule{max-width:var(--max-texte);}
  .lecture-seule p{font-family:var(--sans);font-size:15px;color:var(--gris-txt);line-height:1.7;}

  .inclus-liste{margin-top:28px;display:flex;flex-direction:column;gap:0;}
  .inclus-item{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--gris-sep);align-items:flex-start;}
  .inclus-item:last-child{border-bottom:1px solid var(--gris-sep);}
  .inclus-puce{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--or);margin-top:7px;}
  .inclus-texte h4{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--marine);margin-bottom:3px;}
  .inclus-texte p{font-family:var(--sans);font-weight:400;font-size:13.5px;color:var(--gris-txt);line-height:1.5;}

  .conviction-domaine{background:var(--marine);border-radius:16px;padding:44px 40px;text-align:center;max-width:720px;margin:36px auto 0;}
  .conviction-domaine p{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2.2vw,23px);line-height:1.4;}
  .conviction-domaine .l1{color:#FFFFFF;}
  .conviction-domaine .l2{color:var(--or-clair);}
  .conviction-domaine .signature{font-family:var(--sans);font-weight:500;font-size:12px;color:#C8CEDB;margin-top:18px;}

  .cta-finale{text-align:center;padding:80px 6vw 100px;max-width:var(--max);margin:0 auto;}
  .cta-finale h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.8vw,30px);color:var(--marine);margin-bottom:24px;}
  .cta-btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:1.5px;color:#fff;background:var(--marine);text-decoration:none;padding:16px 38px;border-radius:26px;transition:background .25s ease;}
  .cta-btn:hover{background:var(--or);}

  @media (max-width:860px){
    .piliers,.lecture,.comparaison{grid-template-columns:1fr;}
  }

/* ============================================================
   AJUSTEMENTS SPÉCIFIQUES À L'ACCUEIL (body[data-layout="accueil"])
   Objectif : remonter le bas de page pour voir le wordmark
   sans scroller. On masque la phrase "Votre cap est tracé"
   et on resserre les espaces verticaux — uniquement sur l'accueil.
   ============================================================ */
body[data-layout="accueil"] .activite{padding:72px 0 0;}
body[data-layout="accueil"] .pied-phrase{display:none;}
body[data-layout="accueil"] .pied-cloture{padding:28px 6vw 22px;}
body[data-layout="accueil"] .pied-promesse{margin-bottom:20px;}

/* ============================================================
   ANIMATION D'APPEL DU WORDMARK (au chargement, une seule fois)
   ------------------------------------------------------------
   Objectif : signaler discrètement que les lettres du wordmark
   sont cliquables et mènent aux 6 univers. Geste premium :
   une vague de lumière parcourt le mot (le trait or de chaque
   lettre s'illumine tour à tour), et le nom de chaque domaine
   apparaît en fondu sous sa lettre, puis s'efface — laissant
   le bandeau propre. Lent, doux, joué une seule fois.
   ============================================================ */

/* la barre or s'illumine fortement au passage de la vague, puis s'éteint.
   Contraste marqué (de discret à pleine intensité + épaisse) pour qu'on
   percoive UNE lumiere qui se deplace, pas six barres allumees. */
@keyframes nav-trait-appel{
  0%   {opacity:.3;height:1.5px;bottom:2px;}
  25%  {opacity:1;height:3.5px;bottom:0;}
  60%  {opacity:1;height:3.5px;bottom:0;}
  100% {opacity:.3;height:1.5px;bottom:2px;}
}
/* la lettre elle-meme s'illumine (marine -> or) en synchro avec sa barre */
@keyframes nav-lettre-appel{
  0%   {color:var(--marine);}
  25%  {color:var(--or);}
  60%  {color:var(--or);}
  100% {color:var(--marine);}
}

/* pendant l'appel : chaque lettre + sa barre s'illuminent en cascade.
   Tempo lent (premium). Le nom du domaine s'affiche, lui, UN SEUL a la
   fois, centre sous le mot (gere en JS) — donc jamais de chevauchement. */
.nav-mark.appel .nav-letter::before{
  animation:nav-trait-appel 2.6s ease-in-out both;
}
.nav-mark.appel .nav-letter{
  animation:nav-lettre-appel 2.6s ease-in-out both;
}
/* le O initial est deja en or au repos : on le laisse, mais on l'anime
   quand meme pour la barre (la regle couleur ne le degrade pas) */
.nav-mark.appel .nav-letter:first-child{color:var(--or);}

.nav-mark.appel .nav-letter:nth-child(1)::before,
.nav-mark.appel .nav-letter:nth-child(1){animation-delay:.0s;}
.nav-mark.appel .nav-letter:nth-child(2)::before,
.nav-mark.appel .nav-letter:nth-child(2){animation-delay:1.3s;}
.nav-mark.appel .nav-letter:nth-child(3)::before,
.nav-mark.appel .nav-letter:nth-child(3){animation-delay:2.6s;}
.nav-mark.appel .nav-letter:nth-child(4)::before,
.nav-mark.appel .nav-letter:nth-child(4){animation-delay:3.9s;}
.nav-mark.appel .nav-letter:nth-child(5)::before,
.nav-mark.appel .nav-letter:nth-child(5){animation-delay:5.2s;}
.nav-mark.appel .nav-letter:nth-child(6)::before,
.nav-mark.appel .nav-letter:nth-child(6){animation-delay:6.5s;}

/* libellé défilant : un seul nom de domaine à la fois, centré sous le mot */
.nav-libelle{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  text-align:center;
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--or);
  opacity:0;transform:translateY(-3px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;white-space:nowrap;
}
.nav-libelle.on{opacity:1;transform:translateY(0);}
.nav-mark{position:relative;}

/* accessibilité : aucun mouvement si l'utilisateur le refuse */
@media (prefers-reduced-motion:reduce){
  .nav-mark.appel .nav-letter::before,
  .nav-mark.appel .nav-letter{animation:none!important;}
  .nav-libelle{display:none!important;}
}

/* ============================================================
   PAGES D'OFFRE (body[data-layout="offre"])
   L'étage "clôture narrative" du pied (Votre cap est tracé +
   promesse + bouton CONTACT) est masqué : les pages d'offre ont
   déjà leurs propres CTA vers le contact. On garde l'étage
   technique (wordmark + nav + mentions).
   ============================================================ */
body[data-layout="offre"] .pied-cloture{display:none;}

/* ============================================================
   KICKER PASTILLE — pastille marine qui respire vers le bleu ciel
   Texte crème sur fond marine ; le fond pulse marine -> bleu ciel
   -> marine, 8s (doux). Donne de la présence aux intitulés de bloc.
   Coupé sous prefers-reduced-motion.
   ============================================================ */
.pilier-kicker{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:2px;color:#FBF3E2;padding:7px 14px;border-radius:7px;
  margin-bottom:14px;background:#1B2B4B;
  animation:respire-pastille 8s ease-in-out infinite;
}
@keyframes respire-pastille{
  0%{background:#1B2B4B;}
  50%{background:#5B8FC7;}
  100%{background:#1B2B4B;}
}
@media (prefers-reduced-motion:reduce){
  .pilier-kicker{animation:none!important;background:#1B2B4B!important;}
}

/* ============================================================
   Bandeau : Diagnostic en entrée directe (or, sans déroulant)
   ============================================================ */
/* Diagnostic est un lien direct, pas un déroulant : pas de chevron ▾ */
.nav-cat-direct .nav-cat-label{cursor:pointer;text-decoration:none;}
.nav-cat-direct .nav-cat-label::after{content:none;}
/* Couleur or (produit d'appel mis en avant) */
.nav-cat-or{color:var(--or)!important;font-weight:700!important;}
.nav-cat-or:hover{color:var(--or-clair)!important;}
/* Version mobile (panneau) : Diagnostic en or */
.ncp-or{color:var(--or)!important;font-weight:700!important;}