/* =========================================================
   CREOPSIS — feuille de style
   Bleu pétrole dominant · corail signal rare · Montserrat / Inter
   ========================================================= */

:root{
  --petrol:        #396270;
  --bg:            #2b4d57;   /* fond de base, légèrement plus profond */
  --bg-alt:        #335a66;   /* bandes alternées, panneau surélevé */
  --bg-cta:        #244149;   /* bande d'appel à l'action */
  --footer:        #1f3640;
  --coral:         #f3887a;   /* couleur signal — usage rare */
  --coral-deep:    #ec6f5f;
  --turquoise:     #319eb7;
  --head:          #ffffff;
  --text:          #dbe7ea;
  --muted:         #9db5bb;
  --line:          rgba(255,255,255,.10);
  --line-strong:   rgba(255,255,255,.16);
  --maxw:          1080px;
  --measure:       64ch;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--coral); color:#23333a; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem; }
.measure{ max-width:var(--measure); }

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--coral); color:#23333a; padding:.6rem 1rem; border-radius:6px;
  font-weight:600;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- Typographie ---------- */
h1,h2,h3{ font-family:"Montserrat",sans-serif; color:var(--head); margin:0; }
h1{
  font-weight:800; line-height:1.05; letter-spacing:-.02em;
  font-size:clamp(2.2rem,5.2vw,3.55rem);
}
h2{
  font-weight:800; line-height:1.13; letter-spacing:-.01em;
  font-size:clamp(1.55rem,3.2vw,2.25rem);
  margin-bottom:1.1rem;
}
h3{ font-weight:700; font-size:1.2rem; line-height:1.25; margin-bottom:.5rem; }
p{ margin:0 0 1.1rem; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--head); font-weight:600; }

.accent{ color:var(--coral); }

.lead{
  font-size:clamp(1.12rem,1.6vw,1.3rem);
  line-height:1.6; color:#eaf2f3; max-width:60ch;
}
.emphasis{ color:var(--head); font-weight:500; font-size:1.15rem; }

.promise{
  font-family:"Montserrat",sans-serif; font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.38; color:#ffffff;
  border-left:3px solid var(--coral); padding-left:1.3rem; margin:1.7rem 0 1.9rem;
}

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.3rem;
}
.eyebrow .dash{ width:26px; height:2px; background:var(--coral); display:inline-block; flex:none; }

/* ---------- En-tête ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(40,72,82,.78);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:68px; }
.brand-logo{ height:34px; width:auto; }
.footer-logo{ height:40px; width:auto; margin-bottom:1.2rem; }

.site-nav{ display:flex; gap:1.7rem; align-items:center; }
.site-nav a{
  font-size:.95rem; font-weight:500; color:var(--text); letter-spacing:.01em;
  padding:.3rem 0; position:relative; transition:color .18s ease;
}
.site-nav a:hover{ color:var(--head); }
.site-nav a.is-active{ color:var(--head); }
.site-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--coral);
}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
  padding:.5rem; margin-right:-.5rem;
}
.nav-toggle span{ width:24px; height:2px; background:var(--head); transition:transform .2s ease,opacity .2s ease; }

/* ---------- Sections ---------- */
.section{ padding-block:clamp(3.4rem,7.5vw,6.8rem); }
.section--alt{ background:var(--bg-alt); }
.section--cta{ background:var(--bg-cta); }

/* ---------- Hero accueil ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(4.5rem,11vw,9rem);
  background:linear-gradient(160deg,#3a6473 0%,#2c505b 60%,#274a55 100%);
  border-bottom:1px solid var(--line);
}
.hero-inner{ position:relative; z-index:2; }
.hero h1{ margin-bottom:1.5rem; max-width:18ch; }
.hero .lead{ margin-bottom:2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.8rem; }

/* Hero des pages internes */
.page-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(3.6rem,8vw,6rem);
  background:linear-gradient(160deg,#37606e 0%,#2b4f5a 70%);
  border-bottom:1px solid var(--line);
}
.page-hero .measure{ position:relative; z-index:2; }
.page-hero h1{ margin-bottom:1.2rem; }

/* Arc signature (écho du logo) */
.hero-arc{
  position:absolute; z-index:1; pointer-events:none;
  width:min(640px,80vw); height:auto; opacity:.55;
  right:-9%; top:50%; transform:translateY(-50%);
}
@media (max-width:720px){
  .hero-arc{ right:-30%; top:auto; bottom:-12%; transform:none; opacity:.4; width:120vw; }
}

/* ---------- Boutons & liens ---------- */
.btn{
  display:inline-block; background:var(--coral); color:#23333a;
  font-family:"Inter",sans-serif; font-weight:600; font-size:1rem;
  padding:.85rem 1.6rem; border-radius:999px; border:0; cursor:pointer;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
  box-shadow:0 6px 22px rgba(243,136,122,.18);
}
.btn:hover{ background:var(--coral-deep); transform:translateY(-2px); box-shadow:0 10px 26px rgba(243,136,122,.28); }

.link-arrow{ color:var(--muted); font-weight:500; transition:color .18s ease; }
.link-arrow:hover{ color:var(--head); }

/* ---------- Cartes (3 domaines) ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.2rem; }
.card{
  display:flex; flex-direction:column; gap:.2rem;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  border-radius:16px; padding:1.8rem 1.6rem;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.card h3{ color:var(--head); }
.card p{ color:var(--text); font-size:1rem; flex:1; margin-bottom:1.1rem; }
.card-link{ color:var(--coral); font-weight:600; font-size:.95rem; }
.card:hover{ transform:translateY(-4px); border-color:var(--line-strong); background:rgba(255,255,255,.06); }

/* ---------- Étapes (méthode) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.2rem; }
.step{ border-top:1px solid var(--line-strong); padding-top:1.2rem; }
.step-num{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:1.05rem;
  color:var(--coral); letter-spacing:.08em; display:block; margin-bottom:.6rem;
}
.step p{ color:var(--text); font-size:1rem; }

/* ---------- Listes à flèches ---------- */
.arrow-list{ list-style:none; margin:1.4rem 0 1.4rem; padding:0; }
.arrow-list li{ position:relative; padding-left:1.7rem; margin-bottom:.85rem; color:var(--text); }
.arrow-list li::before{
  content:"→"; position:absolute; left:0; top:0; color:var(--coral); font-weight:600;
}

.credentials{
  border-left:3px solid var(--coral); padding-left:1.1rem; color:#eaf2f3;
}

/* Diplômes & certifications */
.cred-list{ list-style:none; margin:1.5rem 0 0; padding:0; }
.cred-list li{ position:relative; padding-left:1.6rem; margin-bottom:.9rem; color:var(--text); }
.cred-list li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--coral);
}
.cred-list strong{ color:var(--head); font-weight:600; }
.cred-list sup{ font-size:.7em; }

/* Références — logos partenaires */
.refs-intro{ color:var(--text); max-width:62ch; margin-top:.2rem; }
.refs{ display:flex; flex-wrap:wrap; gap:1.5rem 1.2rem; align-items:flex-start; margin-top:1.8rem; }
.ref-item{ display:flex; flex-direction:column; align-items:center; gap:.65rem; }
.ref-chip{
  background:#fff; border-radius:14px; padding:1rem 1.4rem;
  width:160px; height:86px; display:flex; align-items:center; justify-content:center;
}
.ref-chip img{ max-height:54px; max-width:128px; width:auto; height:auto; display:block; }
.ref-chip--full{ padding:0; width:86px; overflow:hidden; }
.ref-chip--full img{ width:86px; height:86px; max-height:none; max-width:none; object-fit:contain; }
.ref-cap{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- Bloc CTA ---------- */
.cta-inner{ text-align:center; max-width:46ch; margin-inline:auto; }
.cta-inner h2{ margin:.4rem 0 1.8rem; }
.cta-inner .eyebrow{ justify-content:center; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:2.6rem; align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap:1.1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.9rem; font-weight:500; color:var(--muted); letter-spacing:.01em; }
.field .opt{ color:#7e979d; font-weight:400; }
.contact-form input,
.contact-form textarea{
  font-family:"Inter",sans-serif; font-size:1rem; color:var(--head);
  background:rgba(0,0,0,.18); border:1px solid var(--line-strong); border-radius:10px;
  padding:.75rem .9rem; transition:border-color .16s ease, background .16s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{ outline:none; border-color:var(--coral); background:rgba(0,0,0,.28); }
.contact-form .btn{ align-self:flex-start; margin-top:.4rem; }
.form-note{ font-size:.86rem; color:var(--muted); margin-top:.2rem; }
.hp{ position:absolute; left:-9999px; }

.contact-aside h2{ font-size:1.3rem; }
.mail{
  display:inline-block; color:var(--coral); font-weight:600; font-size:1.1rem;
  margin:.3rem 0 2rem; border-bottom:1px solid transparent; transition:border-color .16s ease;
}
.mail:hover{ border-color:var(--coral); }
.signature{ font-family:"Montserrat",sans-serif; font-weight:700; line-height:1.5; color:#cfe0e3; font-size:1rem; }
.signature--dark{ color:#bcd1d5; }

/* ---------- Pied de page ---------- */
.site-footer{ background:var(--footer); border-top:1px solid var(--line); margin-top:0; }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:2.4rem; padding-block:3.4rem 2.4rem; }
.footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.footer-cols h3{ font-family:"Inter",sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.footer-cols a{ display:block; color:var(--text); font-size:.96rem; margin-bottom:.55rem; transition:color .16s ease; }
.footer-cols a:hover{ color:var(--coral); }
.footer-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-block:1.3rem; color:var(--muted); font-size:.85rem;
}

/* ---------- Focus visible ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--coral); outline-offset:3px; border-radius:4px;
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:fixed; inset:68px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(31,54,64,.98); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    padding:.5rem 0;
  }
  body.nav-open .site-nav{ opacity:1; transform:none; pointer-events:auto; }
  .site-nav a{ padding:.85rem 1.5rem; border-top:1px solid var(--line); }
  .site-nav a.is-active::after{ display:none; }
  .site-nav a.is-active{ color:var(--coral); }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

@media (max-width:760px){
  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:0; }
  .step{ border-top:1px solid var(--line-strong); padding-block:1.2rem; }
  .contact-grid{ grid-template-columns:1fr; gap:2rem; }
  .footer-inner{ grid-template-columns:1fr; gap:1.8rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}