/* Styles partagés de l'espace dirigeant (accueil + sous-pages), langage direction C. */

  /* L'espace dirigeant, langage DIRECTION C du site : hero océan avec le
     ciel de constellations (chaque visiteur a le sien), annotations Caveat,
     surligneur turquoise, kickers mono, cartes relief façon Studio socials. */
  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..600&family=JetBrains+Mono:wght@400;500&display=swap');

  :root{
    --dc-encre:#0B1B28; --dc-encre2:#12314A; --dc-nuit:#16334E;
    --dc-creme:#F7F3EA; --dc-or:#C9A75A; --dc-or-clair:#E0BE70;
    --dc-turquoise:#6FD6D9; --dc-turquoise-vif:#1FB5BC; --dc-turquoise-fonce:#0F6268;
    --dc-mono:'JetBrains Mono', ui-monospace, monospace;
    --dc-main:'Caveat', cursive;
  }

  .ecran{display:none}
  .ecran.actif{display:block}
  body.mode-espace{background:var(--dc-creme);background-image:none}

  .patiente{display:flex;flex-direction:column;align-items:center;gap:24px;padding:96px 0;text-align:center}
  .rond-attente{
    width:46px;height:46px;border-radius:50%;
    border:3px solid rgba(201,167,90,.22);border-top-color:var(--dc-or);
    animation:tourne .9s linear infinite
  }
  @keyframes tourne{to{transform:rotate(360deg)}}
  .points::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:points 1.4s steps(4,end) infinite}
  @keyframes points{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
  @media(prefers-reduced-motion:reduce){
    .rond-attente{animation:none}
    .points::after{content:'…';animation:none}
  }

  .k{
    font-family:var(--dc-mono);font-size:.68rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase
  }

  /* ---------- HERO océan + ciel ---------- */
  .hero-ocean{
    position:relative;overflow:hidden;
    background:linear-gradient(150deg, var(--dc-encre) 0%, var(--dc-encre2) 55%, #1B4260 100%);
    color:#fff;padding:30px 0 78px
  }
  .hero-ocean .ciel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .hero-ocean .in{position:relative;max-width:820px;margin:0 auto;padding:0 30px;text-align:center}
  .barre-haut{display:flex;align-items:center;gap:16px;margin-bottom:58px}
  .barre-haut img{width:66px;height:66px;object-fit:contain}
  .barre-haut .k{color:rgba(255,255,255,.72);margin-left:auto}
  .hero-ocean .k.turquoise{color:var(--dc-turquoise)}
  .hero-ocean h1{
    font-size:clamp(2.6rem,7vw,4.4rem);color:#fff;margin:.3em 0 .35em;
    font-weight:520;letter-spacing:-.02em
  }
  .hero-ocean .sous{
    max-width:34em;margin:0 auto 30px;color:rgba(255,255,255,.78);
    font-size:1.02rem;line-height:1.65
  }
  .hero-ocean .sous strong{color:#fff;font-weight:600}
  .hero-ocean .sous .k-inline{
    display:block;margin-bottom:10px;font-family:var(--dc-mono);font-size:.66rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--dc-turquoise)
  }
  .ligne-cta{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
  .btn-or{
    display:inline-block;background:var(--dc-or);color:var(--dc-encre);
    font-family:var(--dc-mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;
    text-transform:uppercase;text-decoration:none;padding:1em 1.7em;border-radius:6px;
    transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s
  }
  .btn-or:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,167,90,.35)}
  .annot{
    font-family:var(--dc-main);font-size:1.25rem;color:var(--dc-turquoise);
    transform:rotate(-3deg);display:flex;align-items:center;gap:10px
  }

  /* ---------- Sections crème ---------- */
  .section-dc{max-width:980px;margin:0 auto;padding:60px 30px 0}
  .section-dc .k{color:var(--dc-turquoise-fonce)}
  .titre-dc{
    font-size:clamp(1.7rem,4vw,2.4rem);color:var(--dc-nuit);
    margin:.5em 0 .4em;font-weight:520;letter-spacing:-.015em
  }
  .surligne{
    background:linear-gradient(transparent 18%, var(--dc-turquoise) 18%, var(--dc-turquoise) 88%, transparent 88%);
    padding:0 .18em;color:var(--dc-encre)
  }

  /* Vos rendez-vous : la ligne + le bouton calendrier en relief. */
  .rang-rdv{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .rang-rdv .textes{flex:1;min-width:260px}
  .rdv-ligne-dc{font-size:1.1rem;color:var(--dc-nuit);margin:.2em 0 .55em}
  .lien-souligne{
    color:var(--dc-turquoise-fonce);font-weight:600;font-size:.92rem;text-decoration:none;
    border-bottom:2px solid var(--dc-turquoise);padding-bottom:2px
  }
  .lien-souligne:hover{border-bottom-color:var(--dc-or)}
  .aside-main{font-family:var(--dc-main);font-size:1.18rem;color:var(--dc-turquoise-fonce);transform:rotate(-1.5deg);display:inline-block;margin-left:16px}
  .btn-cal{
    flex:0 0 auto;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
    background:var(--creme-haut, #FBF9F4);border:2px solid var(--dc-nuit);color:var(--dc-nuit);
    box-shadow:4px 4px 0 var(--dc-nuit);
    transition:transform .15s ease, box-shadow .15s ease
  }
  .btn-cal:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--dc-nuit)}

  /* ---------- La jauge du mois ---------- */
  .jauge-mois{margin-top:22px}
  .jauge-mois .piste{
    display:flex;gap:8px;margin:14px 0 10px;
    border:2px solid var(--dc-nuit);border-radius:999px;padding:6px;
    background:#fff;box-shadow:4px 4px 0 var(--dc-nuit)
  }
  .jauge-mois .segment{
    flex:1;height:22px;border-radius:999px;position:relative;overflow:hidden;
    background:rgba(22,51,78,.08)
  }
  .jauge-mois .segment.plein{
    background:linear-gradient(90deg,#405DE6,#833AB4,#E1306C,#F77737,#FCAF45);
    background-size:var(--n,4)00% 100%;
    background-position:calc(var(--i,0) * 100% / max(1, var(--n,4) - 1)) 0;
    animation:vague 6s ease-in-out infinite alternate
  }
  @keyframes vague{
    from{filter:saturate(1) brightness(1)}
    to{filter:saturate(1.25) brightness(1.08)}
  }
  .jauge-mois .segment.passe{background:repeating-linear-gradient(-45deg, rgba(22,51,78,.10) 0 6px, transparent 6px 12px)}
  .jauge-mois .legende{display:flex;justify-content:space-between;font-family:var(--dc-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#8a94a0;padding:0 8px}
  .jauge-mois .phrase{font-size:1.02rem;color:var(--dc-nuit);margin:14px 0 0}

  /* ---------- Cartes ressources : relief Studio socials ---------- */
  .cartes-dc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:30px}
  a.carte-dc{text-decoration:none;color:inherit;display:block}
  .carte-dc .corps{
    background:#FBF9F4;border:2px solid var(--dc-nuit);border-radius:20px;
    box-shadow:4px 4px 0 var(--dc-nuit);
    padding:26px 26px 22px;height:100%;display:flex;flex-direction:column;
    transition:transform .15s ease, box-shadow .15s ease
  }
  a.carte-dc:hover .corps{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--dc-nuit)}
  .carte-dc .k{font-size:.62rem;margin-bottom:14px}
  .carte-dc h3{font-size:1.32rem;color:var(--dc-nuit);margin:0 0 .35em;font-weight:560}
  .carte-dc .texte{font-size:.9rem;line-height:1.6;color:#5C6E7E;margin:0 0 18px}
  .carte-dc .decouvrir{
    margin-top:auto;align-self:flex-start;font-size:.88rem;font-weight:600;color:var(--dc-nuit);
    border-bottom:2px solid var(--dc-turquoise-vif);padding-bottom:2px
  }
  a.carte-dc:hover .decouvrir{border-bottom-color:var(--dc-or)}

  .carte-dc.nuit .corps{background:var(--dc-nuit);box-shadow:4px 4px 0 var(--dc-or)}
  a.carte-dc.nuit:hover .corps{box-shadow:7px 7px 0 var(--dc-or)}
  .carte-dc.nuit h3{color:#fff}
  .carte-dc.nuit .texte{color:rgba(255,255,255,.72)}
  .carte-dc.nuit .k{color:var(--dc-turquoise)}
  .carte-dc.nuit .decouvrir{color:#fff}

  .carte-dc.fermee .corps{
    background:rgba(251,249,244,.6);border-style:dashed;box-shadow:none
  }
  .carte-dc.fermee h3,.carte-dc.fermee .texte{opacity:.74}
  .carte-dc.fermee .k{color:#9A8B78;display:flex;align-items:center;gap:.6em}
  .carte-dc.fermee .note-main{
    font-family:var(--dc-main);font-size:1.12rem;color:var(--dc-turquoise-fonce);
    transform:rotate(-1.5deg);margin-top:auto
  }

  /* ---------- Pied océan ---------- */
  .pied-ocean{background:var(--dc-encre);margin-top:80px;padding:30px 0}
  .pied-ocean .in{max-width:980px;margin:0 auto;padding:0 30px;display:flex;gap:10px;flex-direction:column}
  .pied-ocean p{margin:0;font-family:var(--dc-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
  .pied-ocean a{color:var(--dc-turquoise);text-decoration:none}

  .bandeau-demo{
    position:fixed;top:12px;right:12px;z-index:90;
    background:#B4553C;color:#FBF9F4;border-radius:999px;
    padding:.4em 1.1em;font-size:.74rem;font-weight:620;letter-spacing:.06em
  }

/* ---------- Variante hero compacte pour les sous-pages ---------- */
.hero-ocean.slim{padding:26px 0 54px}
.hero-ocean.slim h1{font-size:clamp(2rem,5vw,3.2rem)}
.retour{
  font-family:var(--dc-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dc-turquoise);text-decoration:none;margin-left:16px;
  padding:.55em 1.1em;border:1px solid rgba(111,214,217,.55);border-radius:999px;
  background:rgba(111,214,217,.1);transition:background .2s,color .2s
}
.retour:hover{background:var(--dc-turquoise);color:var(--dc-encre)}

/* ---------- Page Vos outils : trois familles, pas de navy ici ---------- */
.groupe-outils{margin-top:40px}
.groupe-outils:first-child{margin-top:8px}
.groupe-tete{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid rgba(22,51,78,.18);padding-bottom:10px
}
.groupe-tete .k{margin:0}
.groupe-tete .griffe{
  font-family:var(--dc-main);font-size:1.2rem;color:var(--dc-turquoise-fonce);
  transform:rotate(-1.5deg);display:inline-block
}
.groupe-outils .cartes-dc{margin-top:22px}

/* Accès : bleu pâle, la porte s'ouvre vers l'extérieur. */
.carte-dc.acces .corps{background:#E7F0F6}
.carte-dc.acces .decouvrir::after{content:' ↗'}

/* Outils : menthe, la carte de travail. Deux colonnes : vous / votre boîte. */
.deux-colonnes{display:grid;grid-template-columns:minmax(250px,1fr) 2fr;gap:26px 34px;margin-top:22px;align-items:start}
.deux-colonnes.seule{grid-template-columns:1fr}
.colonne-tete{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.colonne-tete .k{margin:0;font-size:.6rem;color:var(--dc-nuit);opacity:.65}
.colonne-tete::after{content:'';flex:1;border-top:1px dashed rgba(22,51,78,.25)}
.colonne .cartes-dc{margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.colonne.vous .cartes-dc{grid-template-columns:1fr}
/* Colonne « Vous » : lavande pâle, la couleur calme de la personne (la boîte reste menthe). */
.colonne.vous .carte-dc.outil .corps{background:#ECE8F4}
.colonne.vous .carte-dc.outil .k{color:#6B5B95}
.colonne.vous .carte-dc.outil .decouvrir{border-bottom-color:#A99AC9}
.colonne.vous .carte-dc.fermee .corps{background:rgba(236,232,244,.55)}
@media(max-width:720px){.deux-colonnes{grid-template-columns:1fr}}
.carte-dc.outil .corps{background:#E2F2EE}

/* Propositions et devis : sable, relief or au lieu du bleu nuit. */
.carte-dc.devis .corps{background:#F6EDDA;box-shadow:4px 4px 0 var(--dc-or)}
a.carte-dc.devis:hover .corps{box-shadow:7px 7px 0 var(--dc-or)}
.carte-dc.devis .k{color:#8A6B25}
.carte-dc.devis .decouvrir{border-bottom-color:var(--dc-or)}

.carte-dc.fermee .corps{background:rgba(251,249,244,.6);box-shadow:none}