/* ============================================================
   CreativOne — site vitrine
   1. Base + keyframes
   2. Survols repris de la maquette (.hv0 … .hv19)
   3. Menu mobile
   4. Packs (page Tarifs)
   5. FAQ (page Tarifs)
   6. Simulateur de credits
   7. Responsive
   Nouveaux blocs : toujours a la fin, apres le responsive.
   ============================================================ */

/* ---------- 1. BASE ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ margin:0; font-family:'Poppins',system-ui,sans-serif; background:#0F1623; color:#fff; -webkit-font-smoothing:antialiased; }
img,video{ max-width:100%; }
::selection{ background:#0F608D; color:#fff; }
[x-cloak]{ display:none !important; }

@keyframes co-blob1{ 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,-40px) scale(1.18);} 100%{transform:translate(0,0) scale(1);} }
@keyframes co-blob2{ 0%{transform:translate(0,0) scale(1.1);} 50%{transform:translate(-70px,50px) scale(.92);} 100%{transform:translate(0,0) scale(1.1);} }
@keyframes co-blob3{ 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,60px) scale(1.12);} 100%{transform:translate(0,0) scale(1);} }
@keyframes co-curtainlogo{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
@keyframes co-floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes co-glow{ 0%,100%{ opacity:.55;} 50%{ opacity:1;} }
@keyframes co-gridpan{ from{ background-position:0 0; } to{ background-position:0 -800px; } }
@keyframes co-load{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@keyframes co-scrollcue{ 0%{ transform:translateY(0); opacity:0;} 30%{opacity:1;} 60%{opacity:1;} 100%{ transform:translateY(14px); opacity:0;} }
@keyframes co-spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes co-spinrev{ from{ transform:rotate(0deg);} to{ transform:rotate(-360deg);} }
@keyframes pf-fadeup{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes pf-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- 2. SURVOLS ---------- */
.hv0:hover{ color:#fff; background:rgba(255,255,255,.1); }
.hv1:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }
.hv2:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(15,96,141,.7); background:#1370A0; }
.hv3:hover{ transform:translateY(-3px); box-shadow:0 24px 58px rgba(15,96,141,.8), inset 0 1px 0 rgba(255,255,255,.25); background:#1370A0; }
.hv4:hover{ background:rgba(255,255,255,.18); border-color:#fff; transform:translateY(-3px); }
.hv5:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(15,96,141,.16); border-color:#BFE0F0; }
.hv6:hover{ box-shadow:0 36px 70px rgba(0,0,0,.6); border-color:rgba(58,166,220,.45); }
.hv7:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(15,96,141,.7); background:#1370A0; }
.hv8:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.26); }
.hv9:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(15,96,141,.7); background:#1370A0; }
.hv10:hover{ transform:translateY(-2px); box-shadow:0 20px 48px rgba(0,0,0,.3); }
.hv11:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
.hv12:hover{ color:#fff; }
.hv13:hover{ background:#0F608D; color:#fff; transform:translateY(-3px); }
.hv14:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(15,96,141,.7); background:#1370A0; }
.hv15:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.3); }
.hv16:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.hv17:hover{ transform:translateY(-1px); background:#1370A0; }
.hv18:hover{ gap:20px; }
.hv19:hover{ transform:translateY(-2px); background:#1370A0; }

/* ---------- 3. MENU MOBILE ---------- */
/* app.js gere l'affichage burger/liens selon la largeur ; Alpine gere l'ouverture. */
[data-drawer]{ display:none; opacity:0; }
[data-drawer].is-open{ display:flex; opacity:1; }
body.menu-open{ overflow:hidden; }

/* entree en cascade des liens du tiroir */
[data-drawer] [data-drawer-links] > a,
[data-drawer] [data-drawer-actions] > a{
  opacity:0; transform:translateY(-26px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1);
}
[data-drawer].is-open [data-drawer-links] > a,
[data-drawer].is-open [data-drawer-actions] > a{ opacity:1; transform:translateY(0); }
[data-drawer].is-open [data-drawer-links] > a:nth-child(1){ transition-delay:70ms; }
[data-drawer].is-open [data-drawer-links] > a:nth-child(2){ transition-delay:132ms; }
[data-drawer].is-open [data-drawer-links] > a:nth-child(3){ transition-delay:194ms; }
[data-drawer].is-open [data-drawer-links] > a:nth-child(4){ transition-delay:256ms; }
[data-drawer].is-open [data-drawer-links] > a:nth-child(5){ transition-delay:318ms; }
[data-drawer].is-open [data-drawer-links] > a:nth-child(6){ transition-delay:380ms; }
[data-drawer].is-open [data-drawer-actions] > a:nth-child(1){ transition-delay:442ms; }
[data-drawer].is-open [data-drawer-actions] > a:nth-child(2){ transition-delay:504ms; }

[data-burger].is-open [data-burger-l]:nth-child(1){ transform:translateY(7px) rotate(45deg); }
[data-burger].is-open [data-burger-l]:nth-child(2){ opacity:0; }
[data-burger].is-open [data-burger-l]:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 4. PACKS ---------- */
.pack{
  display:flex; flex-direction:column; padding:34px 30px 32px; border-radius:24px;
  background:#FBFCFE; border:1px solid rgba(15,22,35,.1); box-shadow:0 12px 34px rgba(15,22,35,.06);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.pack.is-hero{
  background:linear-gradient(165deg,#123449,#0F1623);
  border:1px solid rgba(58,166,220,.4);
  box-shadow:0 30px 70px rgba(15,96,141,.34);
  transform:translateY(-10px);
}
.pack-badge{
  align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:1.4px;
  padding:6px 12px; border-radius:999px; margin-bottom:18px;
  background:rgba(15,96,141,.1); color:#0F608D;
}
.pack.is-hero .pack-badge{ background:#3AA6DC; color:#0B1622; }
.pack-name{ margin:0 0 6px; font-size:23px; font-weight:700; letter-spacing:-.5px; color:#0F1623; }
.pack.is-hero .pack-name{ color:#fff; }
.pack-tagline{ margin:0 0 22px; font-size:14.5px; line-height:1.55; font-weight:300; color:rgba(15,22,35,.6); }
.pack.is-hero .pack-tagline{ color:rgba(255,255,255,.72); }
.pack-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.pack-amount{ font-size:44px; font-weight:700; letter-spacing:-1.6px; line-height:1; color:#0F1623; }
.pack.is-hero .pack-amount{ color:#fff; }
.pack-unit{ font-size:15px; font-weight:400; color:rgba(15,22,35,.6); }
.pack.is-hero .pack-unit{ color:rgba(255,255,255,.72); }
.pack-pill{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:11px 15px;
  border-radius:12px; margin-top:12px;
  background:rgba(15,96,141,.07); color:#0F608D; border:1px solid rgba(15,96,141,.14);
}
.pack.is-hero .pack-pill{ background:rgba(58,166,220,.18); color:#9FDBF5; border-color:rgba(58,166,220,.3); }
.pack-pill-total{ font-size:15.5px; font-weight:700; }
.pack-pill-detail{ font-size:13.5px; opacity:.8; }
.pack-rule{ height:1px; background:rgba(15,22,35,.1); margin:22px 0; }
.pack.is-hero .pack-rule{ background:rgba(255,255,255,.16); }
.pack-feats{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.pack-feat{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.5; font-weight:300; color:rgba(15,22,35,.78); }
.pack.is-hero .pack-feat{ color:rgba(255,255,255,.86); }
.pack-dot{
  flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(45,212,151,.16); color:#1FA97A;
}
.pack.is-hero .pack-dot{ background:rgba(58,166,220,.25); color:#7DCBEC; }
.pack-cta{
  margin-top:auto; display:flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:12px; text-decoration:none;
  font-size:15.5px; font-weight:600;
  background:transparent; color:#0F608D; border:1.5px solid rgba(15,96,141,.35);
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.pack-cta:hover{ transform:translateY(-2px); background:rgba(15,96,141,.07); border-color:#0F608D; }
.pack.is-hero .pack-cta{ background:#fff; color:#0F608D; border:none; box-shadow:0 10px 26px rgba(0,0,0,.3); }
.pack.is-hero .pack-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.4); }

/* ---------- 5. FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.6); border:1px solid rgba(15,22,35,.09);
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.faq-item.is-open{ background:#fff; border-color:rgba(15,96,141,.24); box-shadow:0 14px 34px rgba(15,22,35,.08); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; background:transparent; border:none; cursor:pointer;
  font-family:inherit; text-align:left;
  font-size:16.5px; font-weight:600; letter-spacing:-.2px; color:#0F1623;
}
.faq-icon{
  flex:none; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,96,141,.09); color:#0F608D; transform:rotate(0deg);
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, color .3s;
}
.faq-item.is-open .faq-icon{ background:#0F608D; color:#fff; transform:rotate(180deg); }
.faq-body{ overflow:hidden; max-height:0; opacity:0; transition:max-height .42s cubic-bezier(.16,1,.3,1), opacity .3s; }
.faq-item.is-open .faq-body{ max-height:320px; opacity:1; }
.faq-body p{ margin:0; padding:0 24px 22px; font-size:15px; line-height:1.65; font-weight:300; color:rgba(15,22,35,.68); }

/* ---------- 6. SIMULATEUR DE CREDITS ---------- */
.sim-plan{
  flex:1; min-width:120px; cursor:pointer; text-align:left; padding:14px 16px;
  border-radius:14px; font-family:inherit; background:rgba(255,255,255,.03);
  border:1.5px solid rgba(255,255,255,.1);
  transition:border-color .3s, background .3s, box-shadow .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.sim-plan:hover{ border-color:rgba(58,166,220,.4); }
.sim-plan.is-active{
  border-color:rgba(58,166,220,.7);
  background:linear-gradient(160deg, rgba(23,137,192,.3), rgba(15,96,141,.14));
  box-shadow:0 12px 30px rgba(15,96,141,.35);
  transform:translateY(-2px);
}
.sim-step{
  width:30px; height:30px; border-radius:8px; border:none; background:transparent;
  color:#fff; font-size:20px; line-height:1; cursor:pointer; font-family:inherit;
  transition:background .2s;
}
.sim-step:hover{ background:rgba(255,255,255,.12); }
.sim-step.is-plus{ background:#0F608D; }
.sim-step.is-plus:hover{ background:#1370A0; }
.sim-token{
  width:100%; aspect-ratio:1; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.14);
  transition:background .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s;
}
.sim-token.is-on{
  background:linear-gradient(150deg,#3AA6DC,#0F608D);
  box-shadow:0 4px 12px rgba(15,96,141,.5), inset 0 1px 0 rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.18);
}
.sim-reset{
  margin-top:14px; width:100%; padding:12px; border-radius:11px; background:transparent;
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7);
  font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:background .2s, color .2s;
}
.sim-reset:hover{ background:rgba(255,255,255,.07); color:#fff; }

/* ---------- 7. RESPONSIVE ---------- */
/* app.js pilote la nav au scroll en style inline : d'ou les !important. */
@media (max-width:900px){
  #nav{ padding:14px 26px !important; }
}
@media (max-width:620px){
  #nav{ padding:14px 18px !important; }
}
@media (max-width:860px){
  .pack.is-hero{ transform:none; }
}
/* Barre du haut : le CTA ne doit jamais passer sur deux lignes ni pousser
   le logo. Sous 480 px il disparait — le tiroir le propose deja. */
#nav [data-navactions] > a[href="#contact"]{ white-space:nowrap; }
@media (max-width:480px){
  #nav [data-navactions] > a[href="#contact"]{ display:none !important; }
}


/* Barre de la page projet : le logo est centre en absolu, donc il passe sous
   le lien de retour et le CTA des que la place manque. Sur mobile on le retire
   plutot que de laisser les trois se chevaucher. */
@media (max-width:620px){
  [data-navprojet]{ padding-left:18px !important; padding-right:18px !important; }
  [data-navprojet] [data-navprojet-logo]{ display:none !important; }
}


/* ===== Logo de marque =====================================================
   La regle `img,video{max-width:100%}` (ligne 17) ecrase le logo a la largeur
   de son parent flex : hauteur fixe + largeur bridee = image deformee.
   `max-width:none` la neutralise, `flex-shrink:0` empeche le parent de le
   comprimer, et la hauteur passe par --logo-h pour rester surchargeable en
   media query (une hauteur en style inline serait imbattable sans !important). */
.logo-marque{ height:var(--logo-h,32px); width:auto; display:block; max-width:none; flex-shrink:0; }
@media (max-width:520px){ .logo-marque{ height:calc(var(--logo-h,32px) * .82); } }


/* ===== Formulaire de contact (section #contact de l'accueil) ==============
   Poses sur le fond petrol #0F608D : champs en blanc translucide, bordure
   claire. Le champ .co-form-hp est le piege a robots de Netlify : il doit
   exister dans le HTML mais rester invisible ET hors du parcours clavier. */
.co-form{ max-width:640px; margin:0 auto; text-align:left; }
.co-form-hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.co-form-row{ display:flex; gap:16px; }
.co-form-row > .co-field{ flex:1 1 0; min-width:0; }
.co-field{ margin-bottom:16px; }
.co-field label{
  display:block; margin-bottom:8px; font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,.9); letter-spacing:.2px;
}
.co-opt{ font-weight:400; color:rgba(255,255,255,.55); }
.co-field input,
.co-field select,
.co-field textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-family:inherit; font-size:15.5px; font-weight:400;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.co-field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.co-field input::placeholder,
.co-field textarea::placeholder{ color:rgba(255,255,255,.5); }
.co-field input:hover,
.co-field select:hover,
.co-field textarea:hover{ background:rgba(255,255,255,.14); }
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus{
  outline:none; background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.7); box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
/* La liste deroulante s'ouvre avec les couleurs du systeme : sans ces deux
   regles, du texte blanc sur fond blanc dans le menu natif. */
.co-field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:42px;
}
.co-field select option{ background:#0F1623; color:#fff; }

.co-form-submit{
  width:100%; margin-top:6px; padding:17px 32px; border-radius:13px; border:none;
  background:#fff; color:#0F608D; font-family:inherit; font-size:17px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  box-shadow:0 14px 38px rgba(0,0,0,.22); transition:transform .25s, box-shadow .25s, background .25s;
}
.co-form-submit:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.28); background:#F3F9FC; }
.co-form-submit:active{ transform:translateY(0); }

.co-form-note{
  margin:16px 0 0; font-size:13px; line-height:1.6; font-weight:300;
  color:rgba(255,255,255,.65); text-align:center;
}
.co-form-note a{ color:rgba(255,255,255,.9); }

@media (max-width:620px){
  .co-form-row{ flex-direction:column; gap:0; }
}


/* ===== Pages légales (mentions-legales, confidentialite) =================
   Colonne de texte sobre sur le fond sombre du site. Volontairement sans
   animation ni fioriture : ce sont des pages qu'on vient lire, pas parcourir. */
.legal-wrap{ position:relative; min-height:100vh; background:#0F1623; color:#fff; overflow:hidden; }
.legal-halo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.legal-bar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:18px; max-width:860px; margin:0 auto; padding:26px 24px 0;
}
.legal-retour{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:11px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:#fff;
  text-decoration:none; font-size:14.5px; font-weight:500; white-space:nowrap;
  transition:background .2s, border-color .2s;
}
.legal-retour:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); }

.legal{ position:relative; z-index:1; max-width:860px; margin:0 auto; padding:52px 24px 90px; }
.legal h1{ margin:0 0 10px; font-size:clamp(30px,4.4vw,46px); font-weight:700; letter-spacing:-1.2px; line-height:1.1; }
.legal .legal-maj{ margin:0 0 46px; font-size:14px; color:rgba(255,255,255,.5); }
.legal h2{
  margin:44px 0 16px; font-size:20px; font-weight:600; letter-spacing:-.3px;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.1);
}
.legal h3{ margin:26px 0 10px; font-size:16px; font-weight:600; color:#8FCBEA; }
.legal p, .legal li{ font-size:16px; line-height:1.72; font-weight:300; color:rgba(255,255,255,.78); }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 14px; padding-left:20px; }
.legal li{ margin-bottom:9px; }
.legal strong{ font-weight:600; color:#fff; }
.legal a{ color:#8FCBEA; text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:#fff; }

/* Bloc d'identite : libelle a gauche, valeur a droite, et empile sur mobile. */
.legal-id{ margin:0; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.03); overflow:hidden; }
.legal-id > div{ display:flex; gap:18px; padding:13px 20px; border-bottom:1px solid rgba(255,255,255,.07); }
.legal-id > div:last-child{ border-bottom:none; }
.legal-id dt{ flex:0 0 220px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.55); }
.legal-id dd{ margin:0; flex:1 1 auto; font-size:15.5px; font-weight:400; color:#fff; }
@media (max-width:620px){
  .legal-id > div{ flex-direction:column; gap:4px; }
  .legal-id dt{ flex:none; }
}


/* ===== Pages de service (creation-de-site, seo, apps, communication) ======
   Colonne de lecture large sur le fond sombre du site. Meme grammaire que les
   pages legales (.legal-*) mais avec des blocs commerciaux : cartes, etapes,
   FAQ, encadre final. */
.svc-page{ position:relative; background:#0F1623; color:#fff; overflow:hidden; }
.svc-halo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.svc{ position:relative; z-index:1; max-width:920px; margin:0 auto; padding:130px 24px 90px; }

.svc-fil{ margin-bottom:26px; font-size:13.5px; color:rgba(255,255,255,.45); }
.svc-fil a{ color:rgba(255,255,255,.7); text-decoration:none; }
.svc-fil a:hover{ color:#fff; text-decoration:underline; }

.svc-eyebrow{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:2px; color:#3AA6DC; margin-bottom:14px; }
.svc h1{ margin:0 0 22px; font-size:clamp(31px,4.6vw,50px); font-weight:700; letter-spacing:-1.3px; line-height:1.1; }
.svc-chapo{ margin:0 0 34px; max-width:700px; font-size:18.5px; line-height:1.68; font-weight:300; color:rgba(255,255,255,.8); }

.svc h2{ margin:56px 0 18px; font-size:clamp(23px,2.6vw,30px); font-weight:650; letter-spacing:-.6px; }
.svc h3{ margin:0 0 10px; font-size:18px; font-weight:600; }
.svc p{ margin:0 0 15px; font-size:16.5px; line-height:1.72; font-weight:300; color:rgba(255,255,255,.78); }
.svc strong{ font-weight:600; color:#fff; }
.svc a{ color:#8FCBEA; text-decoration:underline; text-underline-offset:3px; }
.svc a:hover{ color:#fff; }

.svc-btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:13px;
  background:#0F608D; color:#fff !important; text-decoration:none !important; font-size:16px; font-weight:600;
  box-shadow:0 12px 32px rgba(15,96,141,.45); transition:transform .22s, box-shadow .22s, background .22s;
}
.svc-btn:hover{ transform:translateY(-2px); background:#1370A0; box-shadow:0 16px 38px rgba(15,96,141,.55); }
.svc-btn.is-fantome{ background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.28); box-shadow:none; }
.svc-btn.is-fantome:hover{ background:rgba(255,255,255,.14); }
.svc-cta-haut{ display:flex; flex-wrap:wrap; gap:13px; }

/* Cartes « ce qu'on realise » */
.svc-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:6px; }
.svc-carte{
  padding:24px 24px 20px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  transition:border-color .3s, background .3s;
}
.svc-carte:hover{ border-color:rgba(58,166,220,.4); background:rgba(255,255,255,.06); }
.svc-carte p{ margin:0; font-size:15.5px; }

/* Etapes numerotees : le compteur remplace la puce native. */
.svc-etapes{ list-style:none; counter-reset:etape; margin:22px 0 0; padding:0; }
.svc-etapes > li{ counter-increment:etape; position:relative; padding:0 0 26px 62px; }
.svc-etapes > li::before{
  content:counter(etape,decimal-leading-zero);
  position:absolute; left:0; top:-2px; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,96,141,.28); border:1px solid rgba(58,166,220,.35);
  color:#8FCBEA; font-size:15px; font-weight:600;
}
.svc-etapes > li:not(:last-child)::after{
  content:""; position:absolute; left:21.5px; top:50px; bottom:6px; width:1px;
  background:linear-gradient(180deg, rgba(58,166,220,.35), transparent);
}
.svc-etapes p{ margin:0; }

.svc-faq > div{ padding:20px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.svc-faq > div:last-child{ border-bottom:none; }
.svc-faq p{ margin:0; }

.svc-final{
  margin-top:64px; padding:38px 34px; border-radius:20px; text-align:center;
  background:linear-gradient(150deg, rgba(15,96,141,.5), rgba(15,96,141,.18));
  border:1px solid rgba(58,166,220,.28);
}
.svc-final h2{ margin:0 0 12px; }
.svc-final p{ margin:0 auto 24px; max-width:520px; }

@media (max-width:620px){
  .svc{ padding-top:106px; }
  .svc-final{ padding:30px 22px; }
  .svc-etapes > li{ padding-left:54px; }
  .svc-etapes > li::before{ width:38px; height:38px; }
  .svc-etapes > li:not(:last-child)::after{ left:18.5px; top:44px; }
}

/* Lien « en savoir plus » des cartes de service de l'accueil. Ces cartes sont
   sur fond BLANC (section claire) : d'ou le petrol plutot que le bleu ciel. */
.svc-lien-carte{
  position:relative; display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  color:#0F608D; text-decoration:none; font-size:15px; font-weight:600;
  transition:gap .22s, color .22s;
}
.svc-lien-carte:hover{ gap:11px; color:#0B4A6E; text-decoration:underline; text-underline-offset:3px; }