/* ============================================================
   site.css - Charte du site « applications web sur mesure » (palette A : turquoise et soleil)
   Source : _Claude/maquette/maquette-accueil.html (page de référence), adaptée :
   - chargé APRÈS Bootstrap 5.3.7 : variables --bs-* surchargées, classes maison sans collision
     (.btn-cta, .sit-card, .pastille, .chapo, .surligne remplacent .btn, .card, .badge, .lead, mark) ;
   - aucun mode sombre en v1 (décision 2026-10-15) : les variables permettent de l'ajouter plus tard ;
   - aucun style en ligne ni script en ligne : tout est ici ou dans site.js (CSP script-src 'self') ;
   - police Public Sans hébergée localement (aucun appel externe).
   ============================================================ */

/* ---- Police : Public Sans, sous-ensemble latin, graisses 400 à 800 (fichier variable, licence OFL) ---- */
@font-face{
  font-family:'Public Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/PublicSans-latin-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Jetons de la charte ---- */
:root{
  --bg:#ffffff; --fg:#0E2B33; --muted:#3F6670; --primary:#0A6B73; --accent:#FFB000; --accent-hover:#E69F00;
  --accent-fg:#1A1A1A; --accent-soft:#FFE08A;
  --soft:#EEF9F7; --pale:#D9F3EF; --line:#CFE6E3; --card:#ffffff; --tealmid:#7CCFC8;
  --foot-bg:#0E2B33; --foot-fg:#E6ECF2; --foot-muted:#B5D3D0; --final-bg:#0A6B73; --final-fg:#ffffff;
  --font:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Surcharge des variables Bootstrap 5.3 (docs/04 : contraintes techniques) */
  --bs-primary:#0A6B73; --bs-primary-rgb:10,107,115;
  --bs-body-color:#0E2B33; --bs-body-color-rgb:14,43,51;
  --bs-body-bg:#ffffff; --bs-body-bg-rgb:255,255,255;
  --bs-body-font-family:var(--font);
  --bs-link-color:#0A6B73; --bs-link-color-rgb:10,107,115;
  --bs-link-hover-color:#085158; --bs-link-hover-color-rgb:8,81,88;
  --bs-border-color:#CFE6E3; --bs-border-radius:.875rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:var(--primary)}
a:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
h1,h2,h3,p,ol,ul{margin:0}
.in{max-width:1120px;margin:0 auto;padding-block:56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));position:relative}
h2{font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.15;font-weight:800;text-wrap:balance}
h3{font-size:19px;line-height:1.35;font-weight:700}

/* ---- Lien d'évitement (clavier) ---- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-fg);font-weight:700;padding:10px 16px;border-radius:10px;text-decoration:none}
.skip-link:focus{top:12px}

/* ---- En-tête et navigation ---- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .in{padding-block:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.brand{display:flex;flex-direction:column;justify-content:center;min-height:44px;line-height:1.25;color:var(--fg);text-decoration:none}
.brand strong{font-size:20px;font-weight:800}
.brand span{font-size:14px;color:var(--muted)}
.nav-toggle{background:transparent;border:2px solid var(--primary);color:var(--primary);border-radius:12px;min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.nav-toggle svg{width:26px;height:26px}
.nav-principal{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-block:8px}
.nav-principal a{color:var(--fg);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center;border-bottom:3px solid transparent}
.nav-principal a:hover{color:var(--primary)}
.nav-principal a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav-principal a.btn-cta{border-bottom-width:0;margin-top:8px}
@media (min-width:768px){
  .nav-toggle{display:none}
  .nav-principal,.nav-principal.collapse:not(.show){flex-basis:auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 20px;padding-block:0}
  .nav-principal a.btn-cta{margin-top:0}
}

/* ---- Bouton d'action (jaune soleil : seule couleur d'action du site) ---- */
.btn-cta{background:var(--accent);color:var(--accent-fg)!important;font-weight:700;text-decoration:none;min-height:54px;padding:12px 26px;border-radius:14px;display:inline-flex;align-items:center;gap:10px;line-height:1.3;font-size:18px;border:0;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn-cta::after{content:"→";transition:transform .15s ease}
.btn-cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.18)}
.btn-cta:hover::after{transform:translateX(4px)}
.btn-cta:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn-cta:focus-visible{outline-color:var(--fg)}
.nav-principal a.btn-cta{min-height:44px;padding:8px 18px;font-size:16px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.nav-principal a.btn-cta::after{content:none}
.nav-principal a.btn-cta:hover{color:var(--accent-fg)}

/* ---- Séparateurs de sections (variantes : couleur de départ et d'arrivée) ---- */
.sep{background:var(--from);line-height:0;margin-top:-1px}
.sep svg{display:block;width:100%;height:clamp(36px,6vw,76px)}
.sep path{fill:var(--to)}
.sep.flip svg{transform:scaleX(-1)}
.sep--pale-soft{--from:var(--pale);--to:var(--soft)}
.sep--soft-bg{--from:var(--soft);--to:var(--bg)}
.sep--bg-soft{--from:var(--bg);--to:var(--soft)}
.sep--bg-final{--from:var(--bg);--to:var(--final-bg)}
.sep--soft-final{--from:var(--soft);--to:var(--final-bg)}
.sep--pale-bg{--from:var(--pale);--to:var(--bg)}

/* ---- Hero ---- */
.herosec{background:var(--pale);position:relative;overflow:hidden}
.herosec::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--accent-soft);right:-120px;top:-140px}
.herosec::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:34px solid var(--tealmid);opacity:.35;left:-110px;bottom:-130px}
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:32px 48px;z-index:1}
.hero>*{flex:1 1 360px;min-width:0}
.hero .txt{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
h1{font-size:clamp(2.1rem,7.4vw,3.5rem);line-height:1.08;font-weight:800;text-wrap:balance;letter-spacing:-.01em}
.surligne{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 88%;background-size:100% .34em;animation:marker 1s .3s ease-out backwards;color:var(--fg)}
@keyframes marker{from{background-size:0 .34em}}
.chapo{font-size:1.15rem;color:var(--muted);max-width:34em}
.note{font-size:14px;color:var(--muted)}
.note-block{display:block;margin-top:8px}

/* ---- Schéma animé du hero (SVG + CSS purs) ---- */
.scene{width:100%;height:auto;display:block;overflow:visible}
.scene text{font-family:var(--font)}
.sc-card{fill:var(--card);stroke:var(--primary);stroke-width:2.5}
.sc-file{fill:var(--card);stroke:var(--line);stroke-width:2}
.sc-ln{fill:var(--line)}
.sc-rule{stroke:var(--line);stroke-width:2}
.sc-p{fill:var(--primary)}
.sc-a{fill:var(--accent)}
.sc-t{fill:var(--tealmid)}
.sc-lab{fill:var(--fg);font-size:14px;font-weight:700}
.sc-lab-lg{font-size:17px}
.sc-sub{fill:var(--muted);font-size:12px;font-weight:600}
.sc-conn{fill:none;stroke:var(--primary);stroke-width:2.5;stroke-dasharray:6 7;stroke-linecap:round;animation:conn 10s ease-in-out infinite,dash 1s linear infinite}
.sc-file-g{transform-box:fill-box;transform-origin:center;animation:tidy 10s ease-in-out infinite}
.f1{--dx:110px;--dy:50px;--r:-12deg}
.f2{--dx:130px;--dy:-40px;--r:9deg}
.f3{--dx:90px;--dy:-120px;--r:-6deg}
.gx{transform-box:fill-box;transform-origin:left center;animation:growx 10s ease-in-out infinite backwards;animation-delay:calc(var(--i,0)*.25s)}
.gy{transform-box:fill-box;transform-origin:center bottom;animation:growy 10s ease-in-out infinite backwards;animation-delay:calc(var(--i,0)*.25s)}
.d0{--i:0}.d1{--i:1}.d2{--i:2}.d3{--i:3}.d4{--i:4}.d5{--i:5}.d6{--i:6}.d7{--i:7}
@keyframes tidy{0%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}6%{opacity:1}10%{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}30%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes growx{0%,32%{transform:scaleX(0)}52%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes growy{0%,32%{transform:scaleY(0)}52%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes conn{0%,28%{opacity:0}34%,90%{opacity:1}100%{opacity:0}}
@keyframes dash{to{stroke-dashoffset:-13}}

/* ---- Situations (cartes décalées, un dessin par situation) ---- */
.soft{background:var(--soft)}
.sit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin-top:32px}
@media (min-width:700px){.sit .sit-card:nth-child(even){margin-top:36px}.sit{margin-bottom:36px}}
.sit-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px 14px 22px;display:flex;flex-direction:column;gap:16px;min-width:0;transition:transform .2s ease,box-shadow .2s ease}
.sit-card:hover{transform:translateY(-6px);box-shadow:0 14px 0 -6px var(--tealmid)}
.sit-card p{padding-inline:8px;font-size:17px}
.panel{background:var(--pale);border-radius:14px;padding:12px}
.ill{display:block;width:100%;height:auto}
.i-card{fill:var(--card);stroke:var(--primary);stroke-width:2}
.i-sheet{fill:var(--card);stroke:var(--line);stroke-width:2}
.i-tl{fill:var(--tealmid)}
.i-a{fill:var(--accent)}
.i-ln{fill:var(--line)}
.i-p{stroke:var(--primary);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.i-pf{fill:var(--primary)}
.i-tang{stroke:#E08A00;fill:none;stroke-width:2.5;stroke-linecap:round}
.i-dash{stroke:var(--primary);fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:5 6;animation:dash 1s linear infinite}
.i-grid{stroke:var(--line);stroke-width:2;fill:none}
.i-frame{fill:none;stroke:var(--primary);stroke-width:3;stroke-dasharray:7 7}
.i-q{fill:var(--primary);font-size:34px;font-weight:800;font-family:inherit}
.i-fx{fill:#1A1A1A;font-size:12px;font-weight:800;font-family:inherit}
.i-check{stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;border-bottom:3px solid var(--accent);align-self:flex-start;color:var(--fg)}
.more:hover{color:var(--primary)}
.more-wrap{margin-top:8px}
.more-wrap--faq{margin-top:24px}

/* ---- Étapes (grands chiffres en contour, soulignement jaune) ---- */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:32px 28px;margin-top:36px;counter-reset:s}
.step{counter-increment:s;display:flex;flex-direction:column;gap:12px;font-size:19px;font-weight:600;min-width:0}
.step::before{content:counter(s);font-size:92px;line-height:.9;font-weight:800;color:transparent;-webkit-text-stroke:3px var(--primary)}
.step:last-child::before{color:var(--primary)}
.step::after{content:"";order:2;display:block;height:6px;width:56px;border-radius:3px;background:var(--accent)}
.step p{order:1}
/* Tout reste visible sans JavaScript : l'animation ne joue qu'à l'arrivée à l'écran (classe .seen posée par site.js) */
.rv.seen{animation:rise .7s ease-out backwards}
.rv.seen:nth-child(2){animation-delay:.12s}.rv.seen:nth-child(3){animation-delay:.24s}.rv.seen:nth-child(4){animation-delay:.36s}
.rv.seen.step::after{animation:bar .8s .3s ease-out backwards}
@keyframes rise{from{opacity:.25;transform:translateY(18px)}}
@keyframes bar{from{width:0}}
.promise{display:inline-block;margin-top:34px;font-size:19px;font-weight:700;background:var(--pale);padding:10px 20px;border-radius:999px}

/* ---- FAQ (grand « ? » en fond de carte) ---- */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin-top:32px}
.faq>div{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:10px}
.faq>div::before{content:"?";position:absolute;right:14px;top:-26px;font-size:150px;line-height:1;font-weight:800;color:var(--pale)}
.faq h3,.faq p{position:relative}
.faq p{color:var(--muted)}

/* ---- Présentation (photo cadrée d'un bloc jaune, pastille « depuis 1998 ») ---- */
.about{display:flex;flex-wrap:wrap;align-items:center;gap:36px 56px}
.frame{position:relative;flex:0 0 220px;width:220px;height:260px;margin-right:20px}
.frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--accent);border-radius:22px}
.photo{position:absolute;inset:0;border:3px dashed var(--primary);border-radius:22px;background:var(--pale);color:var(--primary);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
.photo img{width:100%;height:100%;object-fit:cover;border-radius:19px;display:block}
.pastille{position:absolute;left:-26px;bottom:-14px;width:96px;height:96px;border-radius:50%;background:var(--primary);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1.15;text-align:center;transform:rotate(-8deg);animation:wob 6s ease-in-out infinite}
.pastille b{font-size:22px;font-weight:800}
@keyframes wob{50%{transform:rotate(6deg)}}
/* Sans photo (assets/img/portrait.jpg absente) : la pastille « depuis 1998 » seule, sans cadre */
.about--sans-photo{gap:28px 40px}
.about--sans-photo .pastille{position:static;flex:0 0 auto;width:124px;height:124px;font-size:14px;box-shadow:10px 10px 0 var(--accent)}
.about--sans-photo .pastille b{font-size:30px}
.about-txt{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.about-lead{font-size:20px}

/* ---- Appel final ---- */
.final{background:var(--final-bg);color:var(--final-fg);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--accent);right:-100px;bottom:-170px}
.final::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;border:30px solid rgba(255,255,255,.18);right:120px;top:-110px}
.final .in{display:flex;flex-direction:column;align-items:flex-start;gap:20px;z-index:1}
.final h2{max-width:16em}
.final .chapo{color:var(--final-fg)}
.final a:focus-visible{outline-color:#fff}

/* ---- Pied de page ---- */
.site-footer{background:var(--foot-bg);color:var(--foot-fg)}
.site-footer .in{padding-block:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px}
.site-footer strong{font-size:18px;color:#fff;display:block}
.site-footer span{font-size:15px;color:var(--foot-muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 20px}
.site-footer nav a{color:var(--foot-fg);font-size:15px;text-decoration:underline;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.site-footer a:focus-visible{outline-color:#fff}

/* ---- Pages internes (lot 4) : bandeau de titre, fiches de situation, etapes detaillees, texte courant ---- */
.page-titre{background:var(--pale);position:relative;overflow:hidden}
.page-titre::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--accent-soft);right:-90px;top:-120px}
.page-titre .in{padding-block:44px;display:flex;flex-direction:column;gap:14px;z-index:1}
.page-titre h1{font-size:clamp(1.9rem,6vw,2.9rem);max-width:20em}

.fiche{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:22px}
.fiche+.fiche{margin-top:28px}
@media (min-width:900px){.fiche{grid-template-columns:260px minmax(0,1fr);gap:32px;padding:28px}}
.fiche h2{font-size:clamp(1.4rem,3.6vw,1.8rem);margin-bottom:14px}
.fiche dl{margin:0;display:grid;gap:14px}
.fiche dt{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.fiche dd{margin:2px 0 0}
.fiche-limite{background:var(--accent-soft);border-radius:14px;padding:14px 16px}
.cas-liste{margin:16px 0 0;padding-left:1.2em;display:grid;gap:8px}

.steps--detail{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.steps--detail .step{font-weight:400;font-size:17px}
.steps--detail .step h3{order:1;font-size:20px}
.steps--detail .step p{order:1;color:var(--muted)}

.prose{display:flex;flex-direction:column;gap:16px;font-size:19px;max-width:38em}
.prose p{margin:0}

/* ---- Accessibilité : l'utilisateur a demandé moins d'animations ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}