/* CastiCode Algérie — site vitrine
   Public : commerçants et dirigeants non spécialistes de l'informatique -> texte lisible, contraste élevé, vocabulaire simple.
   Direction : premium international — hero sombre à art lumineux, en-tête clair (logo couleur d'origine, jamais modifié),
   grilles à filets dans des cadres arrondis, rythme clair / sombre.
   Proportions mesurées : en-tête ~68 px ; boutons 40 px (barre) et 48 px (actions principales, cible tactile >= 44 px), poids 500.
   Palette : marque (navy, rust, cedar) + deux teintes ajoutées pour les fonds sombres (night, ember) et un bleu de lumière (steel).
   Pour changer la police des titres, modifier uniquement --display. */
:root{
  --ink:#0F1A2A;
  --paper:#FFFFFF;
  --mist:#EEF1F5;
  --navy:#24425E;
  --navy-deep:#16293B;
  --rust:#A8461F;
  --cedar:#3F5346;
  --mute:#5B6773;
  --night:#08111E;
  --night-2:#0C1A2B;
  --steel:#5B93D3;
  --ember:#F28C52;
  --on-dark:#C7D3DF;
  --on-dark-mute:#8FA3B8;
  --text:rgba(15,26,42,0.82);
  --line: rgba(15,26,42,0.11);
  --line-dark: rgba(255,255,255,0.10);
  --navy-tint: rgba(36,66,94,0.06);
  --display:'Space Grotesk', system-ui, sans-serif;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:20px;
  --sh-xs:0 1px 2px rgba(15,26,42,0.06);
  --sh-sm:0 1px 3px rgba(15,26,42,0.10), 0 1px 2px rgba(15,26,42,0.06);
  --sh-md:0 14px 34px rgba(15,26,42,0.10);
  --ring:0 0 0 3px rgba(36,66,94,0.30);
  --maxw:1240px;
  --inner:64px;
  --hdr:68px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-0.035em; color:var(--ink); text-wrap:balance;}
p{color:var(--text); text-wrap:pretty;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
::selection{background:rgba(36,66,94,0.18);}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:2px;}
.ic{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:#fff; color:var(--navy-deep); padding:10px 16px; border-radius:var(--r-md); box-shadow:var(--sh-md); font-weight:500; text-decoration:none;}
.skip:focus{left:16px;}

.band{position:relative; border-top:1px solid var(--line);}
.band.alt{background:var(--mist);}
section{scroll-margin-top:calc(var(--hdr) + 12px);}

/* En-tête clair : le logo garde ses couleurs d'origine */
/* Le flou est sur ::before (pas sur header) pour ne pas casser position:fixed des descendants (nav mobile) — backdrop-filter crée un containing block pour eux sinon */
header{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); transition:box-shadow .2s;}
header::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,0.90); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);}
header.scrolled{box-shadow:0 10px 30px rgba(15,26,42,0.08);}
.headbar{display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--hdr); padding:0 var(--inner); max-width:var(--maxw); margin:0 auto;}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--navy-deep);}
.logo-mark{width:36px; height:36px; flex-shrink:0; shape-rendering:geometricPrecision;}
.logo-word{font-family:var(--display); font-weight:700; font-size:1.6rem; letter-spacing:-0.03em; line-height:1;}
nav.mainnav{display:flex; align-items:center; gap:28px;}
nav.mainnav a.navlink{font-size:0.95rem; text-decoration:none; color:var(--text); font-weight:500; transition:color .15s;}
nav.mainnav a.navlink:hover{color:var(--navy);}
.head-phone{font-weight:500; font-size:0.95rem; text-decoration:none; color:var(--navy-deep); white-space:nowrap; padding-left:4px;}
.navtoggle{display:none; background:none; border:0; cursor:pointer; width:44px; height:44px; margin-right:-8px; align-items:center; justify-content:center; flex-direction:column;}
.navtoggle span{display:block; width:22px; height:2px; background:var(--ink); margin:3px 0;}

/* Boutons : 40 px (barre) / 48 px (actions principales), poids 500 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; font-family:var(--sans); font-weight:500; font-size:0.94rem; line-height:1; border-radius:var(--r-md); text-decoration:none; border:1px solid transparent; white-space:nowrap; cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .12s;}
.btn svg{width:18px; height:18px; fill:currentColor;}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}
.btn:active{transform:scale(0.98);}
.btn-lg{height:48px; padding:0 22px; font-size:1rem;}
.btn-primary{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), var(--sh-sm);}
.btn-primary:hover{background:linear-gradient(180deg, #2A4A6A 0%, var(--navy-deep) 100%); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 22px rgba(15,26,42,0.24);}
.btn-primary:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), var(--ring);}
.btn-outline{background:#fff; color:var(--ink); border-color:rgba(15,26,42,0.16); box-shadow:var(--sh-xs);}
.btn-outline:hover{background:var(--mist); border-color:rgba(15,26,42,0.3);}
.btn-light{background:linear-gradient(180deg, #fff 0%, #F6F8FA 100%); color:var(--navy-deep); box-shadow:0 1px 2px rgba(0,0,0,0.22), 0 16px 36px rgba(242,140,82,0.22);}
.btn-light:hover{background:#fff; transform:translateY(-1px); box-shadow:0 1px 2px rgba(0,0,0,0.22), 0 18px 40px rgba(242,140,82,0.3);}
.btn-glass, .btn-outline-light{color:#fff; border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.btn-glass:hover, .btn-outline-light:hover{background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.55); transform:translateY(-1px);}
.btn-light:focus-visible, .btn-glass:focus-visible, .btn-outline-light:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,0.45);}
.arrow::after{content:""; width:16px; height:16px; background:currentColor; flex:none; transition:transform .15s; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;}
.arrow:hover::after{transform:translateX(3px);}

.tag{font-family:var(--mono); font-size:0.8rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust); margin-bottom:14px;}
.dark .tag{color:var(--ember);}

/* Bandeau défilant : signal "vivant", sans jamais mentionner de prix */
.marquee{background:var(--night-2); border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); overflow:hidden;}
.marquee-track{display:flex; gap:56px; white-space:nowrap; padding:15px 0; width:max-content; animation:marqueeScroll 30s linear infinite;}
.marquee-track span{font-family:var(--mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-mute);}
.marquee-track span b{color:#fff; font-weight:500;}
@keyframes marqueeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ===== Hero sombre : art lumineux abstrait (aucun logo recoloré) ===== */
.hero{border-top:0; overflow:hidden; isolation:isolate; color:var(--on-dark); background:linear-gradient(180deg, #070F1B 0%, #0A1626 100%);}
.hero-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
/* Fond du hero — éclipse (validée) : un disque noir cerclé d'un liseré de lumière ember, un seul objet net, sans multicolore */
.v-eclipse .disc{position:absolute; top:50%; right:9%; width:min(34vw,470px); aspect-ratio:1; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 42% 38%, #0E1E31, #050B14 70%); box-shadow:0 0 0 1.5px #FFD2B3, 0 0 0 4px rgba(242,140,82,0.9), 0 0 40px 6px rgba(242,140,82,0.5), 0 0 140px 40px rgba(242,140,82,0.16), 0 0 260px 90px rgba(91,147,211,0.12);}
.v-eclipse .disc::after{content:""; position:absolute; top:9%; left:17%; width:14px; height:14px; border-radius:50%; background:#FFF3EA; box-shadow:0 0 18px 6px rgba(255,210,179,0.9), 0 0 60px 20px rgba(242,140,82,0.45);}
@media (max-width:900px){.v-eclipse .disc{width:58vw; right:-30%; top:4%; transform:none; opacity:0.5;}}

.hero-bg::after{content:""; position:absolute; inset:0; opacity:0.28; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
/* Pages de service : hero plus court, éclipse plus petite, fil d'Ariane */
.hero-sub .hero-grid{padding-top:104px; padding-bottom:104px;}
@media (max-width:900px){.hero-sub .hero-grid{padding-top:40px; padding-bottom:64px;}}
.hero-sub h1{font-size:clamp(2.4rem, 5vw, 4.1rem); max-width:18ch;}
.hero-sub .v-eclipse .disc{width:min(28vw,380px);}
.crumbs{display:flex; flex-wrap:wrap; gap:10px; font-size:0.92rem; color:var(--on-dark-mute); margin-bottom:22px;}
.crumbs a{color:var(--on-dark); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.25);}
.crumbs a:hover{border-bottom-color:#fff;}
/* Articles "Conseils" : hero sans visuel, colonne de lecture confortable */
.hero-article h1{font-size:clamp(2.1rem, 4.2vw, 3.4rem); max-width:22ch;}
.cells.cells-top{margin-top:88px;}
.offer h3 a{color:inherit; text-decoration:none;}
.offer h3 a:hover{color:var(--navy);}
.readmore{font-weight:500; color:var(--navy); text-decoration:none;}
.readmore:hover{text-decoration:underline; text-underline-offset:3px;}
.prose{max-width:46rem; margin:0 auto; padding:88px var(--inner) 104px;}
.prose h2{font-size:clamp(1.5rem, 2.6vw, 1.9rem); font-weight:500; line-height:1.2; margin:56px 0 16px;}
.prose > h2:first-child{margin-top:0;}
.prose h3{font-size:1.25rem; font-weight:500; line-height:1.3; margin:32px 0 10px;}
.prose p, .prose li{font-size:1.1rem; line-height:1.75;}
.prose p{margin-bottom:18px;}
.prose ul{margin:0 0 18px 1.2em;}
.prose li{margin-bottom:10px; color:var(--text);}
.prose strong{color:var(--ink); font-weight:600;}
.prose a{color:var(--navy); text-underline-offset:3px;}
.prose .related{margin-top:48px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--mist); font-weight:500;}
.prose .sources{margin-top:40px; padding-top:24px; border-top:1px solid var(--line);}
.prose .sources h2{font-family:var(--mono); font-size:0.8rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--mute); margin:0 0 12px;}
.prose .sources ul{list-style:none; margin-left:0;}
.prose .sources li{font-size:0.95rem;}
@media (max-width:900px){.prose{padding-top:56px; padding-bottom:72px;} .cells.cells-top{margin-top:56px;}}
/* Titres de services liés à leur page : même apparence, soulignés au survol */
.wr-text h3 a, .wr-text p a{color:inherit; text-decoration:none; border-bottom:1.5px solid rgba(36,66,94,0.28); transition:border-color .15s, color .15s;}
.wr-text h3 a:hover, .wr-text p a:hover{color:var(--navy); border-bottom-color:var(--navy);}

.hero-grid{max-width:var(--maxw); margin:0 auto; padding:132px var(--inner) 124px;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 15px 0 13px; border:1px solid rgba(255,255,255,0.14); border-radius:var(--r-pill); background:rgba(255,255,255,0.06); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:0.9rem; font-weight:500; color:var(--on-dark); margin-bottom:28px;}
.eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 3px rgba(242,140,82,0.22);}
.hero h1{font-size:clamp(2.7rem, 6vw, 4.8rem); font-weight:500; line-height:1.04; letter-spacing:-0.045em; margin-bottom:24px; color:#fff; max-width:16ch;}
.hero h1 .soft{color:var(--on-dark-mute);}
.hero .lede{font-size:1.2rem; color:var(--on-dark); max-width:31em; margin-bottom:34px;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap;}
.callme{margin-top:26px; font-size:1.02rem; color:var(--on-dark-mute);}
.callme a{font-weight:600; color:#fff; text-decoration:none; white-space:nowrap; border-bottom:1.5px solid rgba(255,255,255,0.28);}
.callme a:hover{border-bottom-color:#fff;}

/* En-têtes de section */
.head{max-width:var(--maxw); margin:0 auto; padding:112px var(--inner) 60px;}
.head h2{font-size:clamp(2rem,3.8vw,3rem); font-weight:500; line-height:1.08; letter-spacing:-0.042em; max-width:20ch; margin-bottom:18px;}
.head h2 .soft{color:var(--mute);}
.head p{font-size:1.15rem; max-width:44em;}

/* Grilles à filets dans un cadre arrondi, alignées sur le texte */
.cells{width:calc(100% - 2*var(--inner)); max-width:calc(var(--maxw) - 2*var(--inner)); margin:0 auto 112px; display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 20px 44px rgba(15,26,42,0.08);}
#expertises .cells{margin-bottom:80px;}
.cells.c4{grid-template-columns:repeat(4,1fr);}
.cell{position:relative; padding:40px 36px 44px; border-top:1px solid var(--line); background:#fff; transition:background .2s;}
.cells.c3 > .cell:nth-child(-n+3), .cells.c4 > .cell:nth-child(-n+4){border-top:0;}
.cells.c3 > .cell:not(:nth-child(3n)), .cells.c4 > .cell:not(:nth-child(4n)){border-right:1px solid var(--line);}
.band.alt .cells{background:#fff;}

/* Services */
.offer{display:flex; flex-direction:column;}
.offer:hover{background:var(--mist);}
.offer .ico{width:48px; height:48px; border-radius:10px; background:linear-gradient(180deg, #F2F6FB, #E7EEF7); border:1px solid rgba(36,66,94,0.14); color:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:24px;}
.offer .ico svg{width:24px; height:24px;}
.offer h3{font-size:1.4rem; font-weight:600; line-height:1.2; margin-bottom:12px;}
.offer p{font-size:1.02rem; margin-bottom:24px; flex:1;}
.card-cta{display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--navy); font-size:0.98rem; text-decoration:none; align-self:flex-start; padding:6px 0; border-bottom:1px solid rgba(36,66,94,0.28);}
.card-cta:hover{color:var(--rust); border-bottom-color:var(--rust);}

/* Vitrine services : blocs asymétriques colorés (inspiré pylote.io, palette de marque) */
.showcase{max-width:var(--maxw); margin:0 auto 56px; padding:0 var(--inner); display:grid; gap:24px;}
.wide-row{display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 50px rgba(15,26,42,0.14);}
.wide-row.rev .wr-text{order:2;}
.wide-row.rev .wr-visual{order:1;}
.wr-text{padding:56px 52px; align-self:center; background:#fff;}
.wr-text h3{font-size:1.7rem; font-weight:600; line-height:1.18; letter-spacing:-0.03em; margin-bottom:14px;}
.wr-text p{font-size:1.06rem; max-width:30em;}
.wr-visual{min-height:300px; display:flex; align-items:center; justify-content:center; padding:32px; position:relative; overflow:hidden;}
.wr-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.wr-visual.has-photo::after{content:""; position:absolute; inset:0;}
.wide-row.c-navy .wr-visual.has-photo::after{background:linear-gradient(150deg, rgba(36,66,94,0.72) 0%, rgba(22,41,59,0.55) 100%);}
.wide-row.c-rust .wr-visual.has-photo::after{background:linear-gradient(150deg, rgba(194,82,31,0.7) 0%, rgba(168,70,31,0.52) 100%);}
.wide-row.c-navy .wr-visual{background:linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);}
.wide-row.c-rust .wr-visual{background:linear-gradient(150deg, #C2521F 0%, var(--rust) 100%);}
.wide-row.c-cedar .wr-visual{background:linear-gradient(150deg, #536D5B 0%, var(--cedar) 100%);}
.wr-mock{width:100%; max-width:320px; filter:drop-shadow(0 18px 30px rgba(0,0,0,0.28));}

/* Deux colonnes : titre + contenu */
.split{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:5fr 7fr;}
.split > .side{border-right:1px solid var(--line);}
.split > .side .head{position:sticky; top:calc(var(--hdr) + 16px); margin:0; max-width:none; padding:112px 48px 60px var(--inner);}
.about .side .head, .contact .side .head{position:static; padding-bottom:40px;}
.rows .row{display:grid; grid-template-columns:64px 1fr; gap:10px; padding:46px var(--inner) 48px 48px; border-top:1px solid var(--line);}
.rows .row:first-child{border-top:0;}
.rows .row .num{width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:1rem; box-shadow:0 0 0 5px var(--navy-tint);}
.rows .row h4{font-size:1.5rem; font-weight:500; line-height:1.2; margin-bottom:12px;}
.rows .row p{font-size:1.06rem; max-width:34em;}

/* Section sombre (rythme) — palette plus énergique */
.band.dark{position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(65% 95% at 102% -6%, rgba(91,147,211,0.38), transparent 62%), radial-gradient(55% 80% at -6% 108%, rgba(242,140,82,0.20), transparent 66%), var(--night-2); border-top-color:rgba(255,255,255,0.08); color:var(--on-dark);}
.band.dark .ring{position:absolute; left:-120px; bottom:-140px; width:440px; height:440px; z-index:-1; opacity:0.5; pointer-events:none;}
@media (max-width: 900px){ .band.dark .ring{display:none;} }
.dark h2, .dark h4{color:#fff;}
.dark .head h2 .soft{color:var(--on-dark-mute);}
.dark p{color:var(--on-dark);}
.dark .tag{color:var(--ember);}
.dark .split > .side{border-right-color:rgba(255,255,255,0.09);}
.dark .rows .row{border-top-color:rgba(255,255,255,0.09);}
.dark .rows .row .num{background:rgba(242,140,82,0.10); border:1px solid rgba(242,140,82,0.5); color:var(--ember); box-shadow:0 0 0 5px rgba(242,140,82,0.06);}

/* Étapes */
.step .dot{display:flex; align-items:center; margin-bottom:26px;}
.step .dot span{width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:1.1rem; flex:none; box-shadow:0 0 0 5px var(--navy-tint);}
.step .dot::after{content:""; flex:1; height:1px; background:var(--line); margin:0 -36px 0 16px;}
.step:last-child .dot::after{display:none;}
.step h4{font-size:1.32rem; line-height:1.2; margin-bottom:12px;}
.step p{font-size:1.02rem;}

/* Pour qui — photo + filtre couleur de marque (même palette que la vitrine services) */
.case{padding:0;}
.case .media{height:190px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.case .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.case .media::after{content:""; position:absolute; inset:0;}
.case:nth-child(3n+1) .media::after{background:linear-gradient(150deg, rgba(36,66,94,0.78), rgba(22,41,59,0.6));}
.case:nth-child(3n+2) .media::after{background:linear-gradient(150deg, rgba(194,82,31,0.76), rgba(168,70,31,0.58));}
.case:nth-child(3n+3) .media::after{background:linear-gradient(150deg, rgba(83,109,84,0.76), rgba(63,83,70,0.58));}
.case .media svg{position:relative; z-index:1; width:72px; height:72px; padding:21px; background:#fff; border-radius:var(--r-lg); box-shadow:0 14px 30px rgba(0,0,0,0.3); color:var(--navy);}
.case .body{padding:32px 36px 44px;}
.case .kicker{font-size:0.95rem; font-weight:600; color:var(--rust); margin-bottom:12px;}
.case h4{font-size:1.38rem; line-height:1.22; margin-bottom:12px;}
.case p{font-size:1.02rem;}

/* À propos */
.about-body{padding:0 var(--inner) 112px;}
.about-body p{font-size:1.12rem; max-width:34em; margin-bottom:20px;}
.std{margin:112px var(--inner) 112px 48px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-sm);}
.std h4{font-size:1.2rem; font-weight:500; letter-spacing:-0.02em; padding:24px 28px; border-bottom:1px solid var(--line);}
.std ul{list-style:none;}
.std li{display:flex; align-items:center; gap:16px; padding:22px 28px; font-size:1.08rem; font-weight:500; border-bottom:1px solid var(--line);}
.std li:last-child{border-bottom:0;}
.std li svg{color:var(--cedar);}

/* Questions */
.faq details{border-top:1px solid var(--line);}
.faq details:first-child{border-top:0;}
.faq summary{padding:34px var(--inner) 34px 48px; font-family:var(--display); font-weight:500; font-size:1.3rem; letter-spacing:-0.03em; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; transition:color .15s;}
.faq summary:hover{color:var(--navy);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-size:1.7rem; font-weight:400; color:var(--navy); line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 var(--inner) 34px 48px; font-size:1.06rem; max-width:36em;}

/* Appel à l'action lumineux */
.band.cta{border-top:0; overflow:hidden; isolation:isolate; color:var(--on-dark); background:radial-gradient(80% 140% at 92% -10%, rgba(91,147,211,0.52), transparent 60%), radial-gradient(50% 100% at 4% 115%, rgba(242,140,82,0.3), transparent 62%), var(--night);}
.band.cta::before{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 70% 100% at 90% 0%, #000, transparent 70%); mask-image:radial-gradient(ellipse 70% 100% at 90% 0%, #000, transparent 70%);}
.cta-in{max-width:var(--maxw); margin:0 auto; padding:112px var(--inner); display:grid; grid-template-columns:1fr auto; gap:56px; align-items:center;}
.cta-in h2{font-size:clamp(2.2rem,4.4vw,3.4rem); font-weight:500; line-height:1.05; letter-spacing:-0.045em; color:#fff; max-width:17ch; margin-bottom:16px;}
.cta-in p{font-size:1.15rem; max-width:34em; color:var(--on-dark);}
.cta-in .cta-col{display:grid; gap:12px; justify-items:stretch;}

/* Contact */
.contact .info{padding:0 48px 112px var(--inner);}
.contact .rows-i{border-top:1px solid var(--line);}
.info-row{display:flex; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); font-size:1.08rem; color:var(--ink);}
.info-row.big{font-size:1.6rem; font-family:var(--display); font-weight:500; letter-spacing:-0.03em;}
.info-row a{text-decoration:none;}
.info-row a:hover{color:var(--navy);}
.form{margin:112px var(--inner) 112px 48px; padding:36px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md); align-self:start;}
.form h3{font-size:1.4rem; font-weight:500; margin-bottom:24px; letter-spacing:-0.03em;}
.field{margin-bottom:20px;}
.field label{display:block; font-size:0.98rem; font-weight:500; margin-bottom:8px; color:var(--ink);}
.field input, .field textarea, .field select{width:100%; border:1px solid rgba(15,26,42,0.2); border-radius:var(--r-md); padding:0 14px; height:48px; font-family:var(--sans); font-size:1.02rem; background:#fff; color:var(--ink); box-shadow:var(--sh-xs); transition:border-color .15s, box-shadow .15s;}
.field textarea{height:auto; padding:12px 14px; line-height:1.5;}
.field input:hover, .field textarea:hover, .field select:hover{border-color:rgba(15,26,42,0.36);}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--navy); box-shadow:var(--ring);}
.form .btn{width:100%; margin-top:6px;}
.form-note{margin-top:14px; font-size:0.92rem; color:var(--mute);}

/* Pied de page (logo : version inversée officielle) */
footer{background:var(--navy-deep); color:var(--on-dark); padding:88px 0 32px;}
.foot{max-width:var(--maxw); margin:0 auto; padding:0 var(--inner);}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px;}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:18px; color:#fff;}
.foot-brand svg{width:40px; height:40px; shape-rendering:geometricPrecision;}
.foot-brand span{font-family:var(--display); font-weight:700; font-size:1.8rem; letter-spacing:-0.03em; line-height:1;}
.foot-grid h5{font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-0.01em; color:#fff; margin-bottom:18px;}
.foot-grid a, .foot-grid p{display:block; font-size:0.98rem; color:#B7C3CD; text-decoration:none; margin-bottom:12px;}
.foot-grid a:hover{color:#fff;}
.foot-bottom{margin-top:64px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.9rem; color:var(--on-dark-mute);}

/* Bulle WhatsApp : pilule dans le système de boutons de la marque, pas un cercle vert générique */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:60; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:var(--navy-deep); color:#fff; border-radius:50%; text-decoration:none; box-shadow:0 14px 32px rgba(15,26,42,0.32), inset 0 1px 0 rgba(255,255,255,0.08); transition:background .15s, transform .15s, box-shadow .15s;}
.wa-float:hover{background:var(--navy); transform:translateY(-2px); box-shadow:0 18px 38px rgba(15,26,42,0.38), inset 0 1px 0 rgba(255,255,255,0.1);}
.wa-float:active{transform:translateY(0) scale(0.96);}
.wa-ic{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.wa-ic svg{width:26px; height:26px; color:#3DDC7A;}

/* Apparition au défilement (activée par main.js) */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .btn, .wa-float{transition:none;}
}

@media (max-width: 1180px){ .head-phone{display:none;} }
@media (max-width: 1100px){
  :root{--inner:40px;}
  .hero-grid{padding-top:96px;}
  .cells.c3, .cells.c4{grid-template-columns:1fr 1fr;}
  .cells > .cell{border-right:0 !important; border-top:1px solid var(--line) !important;}
  .cells > .cell:nth-child(-n+2){border-top:0 !important;}
  .cells > .cell:nth-child(odd){border-right:1px solid var(--line) !important;}
  .cta-in{grid-template-columns:1fr; gap:36px;}
  .cta-in .cta-col{grid-auto-flow:column; justify-content:start;}
  .wr-text{padding:44px 40px;}
}
@media (max-width: 780px){
  .wide-row, .wide-row.rev{grid-template-columns:1fr;}
  .wide-row.rev .wr-text{order:1;}
  .wide-row.rev .wr-visual{order:2;}
  .wr-visual{min-height:220px; padding:28px;}
  .wr-text{padding:36px 28px;}
}
@media (max-width: 900px){
  .split{grid-template-columns:1fr;}
  .split > .side{border-right:0;}
  .split > .side .head{position:static; padding:80px var(--inner) 40px;}
  .rows .row, .faq summary, .faq details p{padding-left:var(--inner); padding-right:var(--inner);}
  .std{margin:0 var(--inner) 80px;}
  .about-body{padding-bottom:40px;}
  .contact .info{padding-left:var(--inner); padding-right:var(--inner); padding-bottom:40px;}
  .form{margin:0 var(--inner) 80px;}
  .head{padding-top:80px;}
  .cells{margin-bottom:80px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width: 860px){
  nav.mainnav{position:fixed; inset:var(--hdr) 0 0 0; background:#fff; flex-direction:column; align-items:flex-start; gap:0; padding:8px var(--inner) 24px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;}
  nav.mainnav.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  nav.mainnav a.navlink{padding:18px 0; width:100%; border-bottom:1px solid var(--line); font-size:1.1rem; color:var(--ink);}
  nav.mainnav .btn{margin-top:18px; width:100%; height:48px; font-size:1rem;}
  .navtoggle{display:flex;}
}
@media (max-width: 640px){
  :root{--inner:20px; --hdr:64px;}
  .logo-mark{width:32px; height:32px;} .logo-word{font-size:1.45rem;}
  .hero-grid{padding-top:48px; padding-bottom:64px;}
  .cta-row .btn{width:100%;}
  .cells.c3, .cells.c4{grid-template-columns:1fr;}
  .cells > .cell, .cells > .cell:nth-child(odd){border-right:0 !important; border-top:1px solid var(--line) !important;}
  .cells > .cell:first-child{border-top:0 !important;}
  .cell{padding:32px 24px 34px;}
  .case .body{padding:28px 24px 34px;}
  .head{padding:68px var(--inner) 40px;}
  .rows .row{grid-template-columns:1fr; padding-top:34px; padding-bottom:36px;}
  .rows .row .num{margin-bottom:8px;}
  .faq summary{padding-top:26px; padding-bottom:26px; font-size:1.15rem;}
  .cta-in{padding:72px var(--inner);}
  .cta-in .cta-col{grid-auto-flow:row;}
  .foot-grid{grid-template-columns:1fr;}
  .info-row.big{font-size:1.4rem;}
  .step .dot::after{display:none;}
  .form{padding:26px 22px;}
  .wa-float{width:50px; height:50px; right:16px; bottom:16px;}
  .wa-ic svg{width:23px; height:23px;}
}