/* ==========================================================================
   Optédif — ESN / Services du numérique
   Design répliqué de fr.optedif-formation.fr :
   fond petrol #165974 · cartes blanches arrondies · vert #00b89c
   sections bleu clair #bee5f5 · police DM Sans
   ========================================================================== */

:root{
  --petrol:#165974;          /* fond de page */
  --petrol-soft:#1d6b88;
  --green:#00b89c;           /* accent principal / boutons / titres */
  --green-dark:#06a78d;
  --lightblue:#bee5f5;       /* sections "comment ça marche" */
  --mint:#d6f3ec;            /* barre d'onglets / surlignages pâles */
  --navy:#163a4a;            /* titres foncés */
  --ink:#0a0a0a;             /* texte courant */
  --slate:#4a5b66;
  --muted:#7a8a92;
  --line:#e6edf0;
  --card-radius:26px;
  --btn-radius:8px;
  --shadow:0 18px 40px rgba(8,32,44,.12);
  --shadow-sm:0 6px 18px rgba(8,32,44,.08);
  --maxw:1240px;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--petrol);   /* fond petrol plein, comme le vrai site */
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

h1,h2,h3,h4{line-height:1.15;color:var(--navy);font-weight:800;letter-spacing:-.01em}

/* couleur verte des titres de section (comme "Votre domaine de formation") */
.h-green{color:var(--green)}
.center{text-align:center}

/* surlignage mot-clé : boîte verte texte blanc */
.hl{background:var(--green);color:#fff;padding:.02em .28em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font);font-weight:600;font-size:.97rem;
  border-radius:var(--btn-radius);padding:13px 24px;cursor:pointer;
  border:1.5px solid transparent;transition:.18s ease;white-space:nowrap;
}
.btn svg{width:17px;height:17px}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}
.btn-outline-green{background:#fff;color:var(--green);border-color:var(--green)}
.btn-outline-green:hover{background:var(--green);color:#fff}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-white:hover{background:#fff;color:var(--navy)}
.btn-ghost-navy{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost-navy:hover{border-color:var(--green);color:var(--green)}
.btn-lg{padding:15px 30px;font-size:1.02rem}

/* lien souligné avec icône (comme "Recevoir le programme...") */
.link-underline{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;border-bottom:2px solid var(--green);padding-bottom:3px}
.link-underline svg{width:18px;height:18px;color:var(--green)}
.link-underline:hover{color:var(--green)}

/* ---------- Header (blanc, fixe) ---------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #eef3f5}
.site-header .wrap{display:flex;align-items:center;gap:26px;height:90px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand .mark{width:46px;height:46px;flex:none}
.brand .bt{font-weight:800;font-size:1.32rem;color:var(--navy);letter-spacing:-.02em;line-height:1.05}
.brand .bt b{color:var(--green)}
.brand .bs{font-size:.82rem;color:var(--green);font-weight:500;margin-top:1px}
/* barre de recherche centrale */
.h-search{flex:1;max-width:540px;position:relative}
.h-search input{width:100%;height:54px;border:1px solid #e2e9ec;border-radius:30px;padding:0 20px 0 48px;font-family:inherit;font-size:.98rem;color:var(--navy);background:#fff;box-shadow:0 2px 8px rgba(8,32,44,.04)}
.h-search input::placeholder{color:#9aa9b0}
.h-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,184,156,.12)}
.h-search .si{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#9aa9b0}
.h-nav{display:flex;align-items:center;gap:26px;flex:none}
.h-nav>a{font-weight:600;font-size:.97rem;color:var(--navy)}
.h-nav>a:hover{color:var(--green)}
.h-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #e2e9ec;border-radius:30px;padding:11px 18px;font-weight:600;font-size:.95rem;color:var(--navy)}
.h-pill:hover{border-color:var(--green);color:var(--green)}
.h-pill svg{width:18px;height:18px}
.h-pill.solid{background:var(--green);color:#fff;border-color:var(--green)}
.h-pill.solid:hover{background:var(--green-dark);color:#fff}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:25px;height:2px;background:var(--navy);border-radius:2px}
@media(max-width:1080px){.h-search{display:none}.h-nav>a{display:none}}
@media(max-width:760px){.h-pill:not(.solid){display:none}.burger{display:flex}}

/* ---------- Carte blanche posée sur le fond petrol ---------- */
.panel{background:#fff;border-radius:var(--card-radius);padding:48px;margin:22px auto;max-width:var(--maxw);box-shadow:var(--shadow)}
.panel.lightblue{background:var(--lightblue)}
.panel.first{margin-top:26px}
.section-pad{padding:0 22px}
@media(max-width:680px){.panel{padding:30px 22px;border-radius:20px;margin:14px auto}}

.sec-title{font-size:clamp(1.7rem,3.4vw,2.4rem);text-align:center;color:var(--green);margin-bottom:8px}
.sec-sub{text-align:center;color:var(--slate);max-width:680px;margin:0 auto 34px;font-size:1.05rem}

/* ---------- HERO (carte blanche) ---------- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-grid h1{font-size:clamp(2rem,4.4vw,3.1rem);color:var(--navy);margin-bottom:14px;line-height:1.12}
.hero-grid .sub{font-size:1.18rem;color:var(--navy);font-weight:500;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:34px;flex-wrap:wrap}
.hero-stats b{display:block;font-size:1.7rem;font-weight:800;color:var(--green);letter-spacing:-.02em}
.hero-stats span{font-size:.85rem;color:var(--slate)}
.hero-illu{width:100%}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:28px}.hero-illu{max-width:440px;margin:0 auto}}

/* ---------- Domaines (pills outline) ---------- */
.domains{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1000px;margin:0 auto}
.domain{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #d7e6ea;border-radius:12px;padding:16px 22px;font-weight:700;color:var(--navy);font-size:1.02rem;transition:.18s;box-shadow:var(--shadow-sm)}
.domain:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.domain svg{width:18px;height:18px;color:var(--green)}

/* ---------- Cartes prestation (comme cartes formation) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid #eaf0f2;border-radius:18px;padding:34px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:.2s;box-shadow:var(--shadow-sm)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d7e6ea}
.pcard .circle{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin-bottom:20px}
.pcard .circle svg{width:40px;height:40px;color:#fff}
.pcard h3{font-size:1.16rem;color:var(--navy);margin-bottom:10px;min-height:2.4em;display:flex;align-items:center}
.pcard p{font-size:.93rem;color:var(--slate);margin-bottom:20px;flex:1}
.pcard .btn{width:auto}
/* variantes couleurs cercles */
.c-green{background:linear-gradient(135deg,#00b89c,#15cdae)}
.c-petrol{background:linear-gradient(135deg,#165974,#2b7d97)}
.c-orange{background:linear-gradient(135deg,#f0a23c,#f7be5e)}
.c-blue{background:linear-gradient(135deg,#3d7bd6,#5d9bef)}
.c-violet{background:linear-gradient(135deg,#6b5bd6,#8b7bef)}
.c-teal{background:linear-gradient(135deg,#119488,#1bbfae)}

/* ---------- Comment ça marche (light blue) ---------- */
.steps3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:18px}
@media(max-width:820px){.steps3{grid-template-columns:1fr}.steps3 .arrow{display:none}}
.step3{text-align:center}
.step3 .ill{width:96px;height:96px;margin:0 auto 18px;display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm)}
.step3 .ill svg{width:46px;height:46px;color:var(--petrol)}
.step3 h3{font-size:1.45rem;color:var(--navy);margin-bottom:10px}
.step3 p{color:var(--slate);font-size:.96rem;max-width:280px;margin:0 auto}
.arrow{align-self:center;color:var(--green);font-size:1.8rem;padding-top:36px}
.arrow svg{width:34px;height:34px}

/* ---------- Engagement / témoignage ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:26px}}
.two-col h2{font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--green);margin-bottom:14px}
.two-col h3{color:var(--green);font-size:1.3rem;margin:6px 0 8px}
.two-col p{color:var(--slate);margin-bottom:12px}
.quote-box{background:var(--green);color:#fff;border-radius:20px;padding:34px 32px;position:relative}
.quote-box .q{font-size:3.4rem;line-height:.6;color:rgba(255,255,255,.55);font-family:Georgia,serif}
.quote-box p{color:#fff;font-size:1.06rem;margin:10px 0 16px}
.quote-box .who{font-weight:700}
.quote-box .who span{display:block;font-weight:400;font-size:.88rem;color:#d7f7f0}

/* liste à puces vertes */
.ticks{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ticks li{padding-left:30px;position:relative;color:var(--slate)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}

/* ---------- CTA question ---------- */
.cta-q{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
@media(max-width:820px){.cta-q{grid-template-columns:1fr}}
.cta-q .eyebrow-mint{display:inline-block;background:var(--mint);color:var(--green);font-size:1.4rem;font-weight:600;padding:4px 16px;border-radius:6px}
.cta-q h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--green);margin:10px 0 22px}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--petrol);color:#cfe2ea;padding:60px 0 0}
.foot-grid{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:44px;max-width:var(--maxw);margin:0 auto;padding:0 22px 40px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{color:#fff;font-size:1rem;margin:18px 0 12px;font-weight:700}
.foot-grid a,.foot-grid p,.foot-grid li{color:#bcd6df;font-size:.94rem;line-height:1.9}
.foot-grid a:hover{color:var(--green)}
.foot-grid ul{list-style:none}
.qualiopi{background:#fff;border-radius:10px;padding:10px 14px;display:inline-flex;align-items:center;gap:10px;margin-top:12px;max-width:230px}
.qualiopi .qx{font-weight:800;color:#1d3f8f;font-size:1.1rem;line-height:1}
.qualiopi .qs{font-size:.66rem;color:#444;line-height:1.2}
.foot-mark{display:flex;align-items:center;gap:10px}
.foot-mark .bt{color:#fff;font-weight:800;font-size:1.2rem}
.foot-mark .bt b{color:var(--green)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:20px;font-size:.86rem;color:#9fbcc6}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{max-width:var(--maxw);margin:0 auto;padding:16px 22px 0;font-size:.88rem;color:#bcd6df;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:#bcd6df}
.breadcrumb a:hover{color:#fff}
.breadcrumb .cur{color:#fff;font-weight:600}

/* ---------- CATEGORY HERO (carte blanche, bandeau + icône) ---------- */
.cat-card{text-align:center}
.cat-banner{height:240px;border-radius:18px;background:
  radial-gradient(600px 300px at 80% 20%,rgba(0,184,156,.5),transparent 60%),
  linear-gradient(120deg,#0e4456,#165974 50%,#1d7d97);position:relative;overflow:hidden;margin-bottom:64px}
.cat-banner::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px}
.cat-icon{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(8,32,44,.2);z-index:2}
.cat-icon>div{width:74px;height:74px;border-radius:50%;display:grid;place-items:center}
.cat-icon svg{width:36px;height:36px;color:#fff}
.cat-card h1{font-size:clamp(1.9rem,4vw,2.7rem);color:var(--navy);margin-bottom:8px}
.cat-card .cat-sub{color:var(--green);font-weight:700;font-size:1.12rem;margin-bottom:18px}
.cat-tags{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.cat-tags a{color:var(--navy);font-weight:600;border-bottom:1.5px solid var(--green);padding-bottom:2px}
.cat-tags a:hover{color:var(--green)}
.cat-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.cat-intro{max-width:860px;margin:30px auto 0;text-align:left;color:var(--slate);font-size:1.02rem}
.cat-intro p{margin-bottom:14px}

/* ---------- TABS (barre mint) ---------- */
.tabbar{background:var(--mint);border-radius:14px;max-width:var(--maxw);margin:22px auto;position:sticky;top:90px;z-index:40}
.tabbar .inner{display:flex;justify-content:center;flex-wrap:wrap}
.tabbar button{background:none;border:0;font-family:var(--font);font-weight:700;font-size:1rem;color:var(--green);cursor:pointer;padding:18px 26px;position:relative;transition:.15s}
.tabbar button:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:20px;width:1px;background:rgba(0,184,156,.3)}
.tabbar button:hover{color:var(--green-dark)}
.tabbar button.active{color:var(--navy)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* sous-prestations (cartes produit) */
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.subgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.subgrid{grid-template-columns:1fr}}
.subcard{border-radius:16px;overflow:hidden;border:1px solid #eaf0f2;background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.2s}
.subcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.subcard .top{height:110px;display:grid;place-items:center}
.subcard .top svg{width:44px;height:44px;color:#fff}
.subcard .body{padding:22px;display:flex;flex-direction:column;flex:1}
.subcard h3{font-size:1.1rem;color:var(--navy);margin-bottom:8px}
.subcard p{font-size:.92rem;color:var(--slate);margin-bottom:18px;flex:1}

/* tableau comparatif engagement */
.cmp{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);background:#fff}
.cmp th,.cmp td{padding:15px 18px;text-align:left;font-size:.94rem;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--petrol);color:#fff;font-weight:700}
.cmp tbody th{background:#f4f9fa;color:var(--navy);font-weight:700;width:26%}
.cmp td{color:var(--slate)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* cadrage (qualif) */
.qual{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.qual{grid-template-columns:1fr}}
.qitem{display:flex;gap:16px;padding:22px;border:1px solid #eaf0f2;border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.qitem .n{width:40px;height:40px;border-radius:10px;background:var(--mint);color:var(--green);display:grid;place-items:center;font-weight:800;flex:none}
.qitem h4{color:var(--navy);font-size:1.02rem;margin-bottom:4px}
.qitem p{color:var(--slate);font-size:.9rem}

/* FAQ */
.faq{max-width:880px;margin:0 auto}
.faq details{border:1px solid #e6edf0;border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:1.4rem;line-height:1;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px;color:var(--slate);font-size:.96rem}

/* featured banner (carte teal) */
.featured{background:linear-gradient(120deg,#0f8e7c,#00b89c);border-radius:20px;padding:40px;color:#fff;display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;overflow:hidden}
@media(max-width:760px){.featured{grid-template-columns:1fr}}
.featured .badges{display:flex;gap:10px;margin-bottom:14px}
.featured .badges span{border:1px solid rgba(255,255,255,.6);border-radius:30px;padding:5px 14px;font-size:.8rem;font-weight:600}
.featured h3{color:#fff;font-size:1.7rem;margin-bottom:8px}
.featured p{color:#e6fbf6;margin-bottom:20px}
.featured .fbtns{display:flex;gap:12px;flex-wrap:wrap}
.featured .illu{justify-self:end}

/* devis form (page catégorie hero, optionnel) */
.note{background:var(--mint);border-radius:0 12px 12px 0;border-left:3px solid var(--green);padding:16px 20px;color:var(--navy);font-size:.95rem;margin-top:22px}