/* ==========================================================================
   Webaxys — feuille de style unique
   ========================================================================== */

:root{
  --black:#000;
  --ink:#020202;
  --ink-soft:#262626;
  --mint:#e0f0eb;
  --ice:#f8fbfb;
  --cream:#fff9f4;
  --grey:#f8f8f8;
  --green:#6ab593;

  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-title:"Inter Tight","Inter",system-ui,sans-serif;

  --gutter:45px;
  --pad:6%;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:#fff;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
b,strong{font-weight:600}

h1,h2,h3,h4{font-family:var(--font-title);margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- conteneur ---------- */
.shell{
  margin:0 var(--gutter);
  padding:0 var(--pad);
  max-width:100%;
}

/* ---------- titres surlignés en noir ---------- */
.mark{
  display:inline;
  font-size:40px;
  font-weight:700;
  line-height:1.38;
  color:#fff;
  background:var(--black);
  box-shadow:-13px 0 0 var(--black),13px 0 0 var(--black);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.mark--center{display:block;width:max-content;max-width:100%;margin-inline:auto}

/* ---------- texte d'introduction ---------- */
.lead{
  font-family:var(--font-title);
  font-size:25px;
  line-height:1.4;
  margin-top:35px;
}
.lead--center{text-align:center;max-width:942px;margin-inline:auto}

/* ---------- bouton ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-title);
  font-size:18px;
  font-weight:700;
  line-height:1.56;
  color:var(--black);
  background:#fff;
  text-decoration:none;
  padding:12px 44px;
  border:1px solid var(--black);
  border-bottom-width:6px;
}
.btn:hover{background:var(--black);color:#fff}

/* ---------- liens fléchés ---------- */
.link-arrow{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-title);
  font-weight:700;
  text-decoration:underline;
}
.link-arrow::before{
  content:"";
  flex:0 0 auto;
  width:29px;height:18px;
  margin-right:8px;
  background:url("../img/arrow.svg") no-repeat center/contain;
}

/* ==========================================================================
   En-tête
   ========================================================================== */
.header{padding:25px 0;background:#fff}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo img{width:170px}

.nav__list{display:flex;align-items:center}
.nav__list > li{position:relative}
.nav__list > li > a{
  display:block;
  font-family:var(--font-title);
  font-size:18px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  padding:0 11px;
}
.nav__list > li > a:hover,
.nav__list > li > a.is-active{color:var(--black);text-decoration:underline}

.has-sub > a::after{content:"⌄";margin-left:6px;font-size:14px;vertical-align:2px}

.nav__sub{
  position:absolute;
  top:100%;left:0;
  min-width:230px;
  padding:12px 0;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  opacity:0;visibility:hidden;
  transition:opacity .15s ease;
  z-index:30;
}
.has-sub:hover .nav__sub,
.has-sub:focus-within .nav__sub{opacity:1;visibility:visible}
.nav__sub a{
  display:block;
  padding:8px 20px;
  font-size:16px;
  text-decoration:none;
  color:var(--ink-soft);
}
.nav__sub a:hover{background:var(--mint);color:var(--black)}

/* burger (mobile) */
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.nav-burger span{display:block;width:26px;height:2px;background:var(--black)}
.nav-overlay{display:none}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:var(--mint)}
.hero h1{
  font-size:60px;
  font-weight:700;
  line-height:1.08;
  padding-top:85px;
}
.hero__body{
  display:flex;
  align-items:stretch;
  margin-top:75px;
  padding-bottom:85px;
}
.hero__icon{
  flex:0 0 25%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.hero__content{
  flex:1 1 auto;
  padding:8px 8px 8px 80px;
  border-left:1px solid var(--black);
}
.hero__content p{font-size:18px;line-height:1.56;margin-top:35px}
.hero__content .btn{margin-top:50px}

/* bandeau image pleine largeur */
.banner{padding:0 var(--gutter)}
.banner img{width:100%;height:auto}

/* ==========================================================================
   Solutions
   ========================================================================== */
.solutions{
  background:var(--ice);
  margin-top:32px;
  padding-top:85px;
  padding-bottom:85px;
}
.cards{margin-top:50px}
.card{
  border-left:19px solid var(--black);
  padding:25px 25px 30px 30px;
  margin-bottom:30px;
}
.card:last-child{margin-bottom:0}
.card--mint{background:var(--mint)}
.card h3{font-size:25px;font-weight:400;line-height:1.12}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{font-size:18px;line-height:1.56;margin-top:10px}

/* ==========================================================================
   Data centers
   ========================================================================== */
.datacenters{margin-top:32px;padding-top:85px}
.dc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:50px;
}
.dc{display:flex;flex-direction:column}
.dc__text{flex:1 1 auto;padding:58px 54px 124px}
.dc__text--center{text-align:center}
.dc__text--mint{background:var(--mint)}
.dc__text--cream{background:var(--cream)}
.dc__text p{font-size:16px;margin-top:30px}
.ruled{
  font-size:25px;
  font-weight:700;
  line-height:1.12;
  padding-bottom:38px;
  border-bottom:1px solid var(--black);
}
.dc__media{
  position:relative;
  height:133px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dc__media img{width:auto;height:auto;max-width:133px}
.dc__media > img{width:133px;height:133px}
.dc__badge{
  position:absolute;
  top:-66px;
  width:133px;height:133px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ==========================================================================
   Notre vision
   ========================================================================== */
.vision{padding-top:85px}
.vision__rows{margin-top:75px;position:relative}
.vision__rows::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:var(--black);
}
.vrow{display:flex;align-items:center}
.vrow__icon{
  flex:0 0 50%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:100px 51px 100px 0;
}
.vrow__text{flex:0 0 50%;padding:100px 0 100px 51px}
.vrow h3{font-size:25px;font-weight:400;line-height:1.12}
.vrow p{font-size:18px;line-height:1.56;margin-top:10px}

.vrow--reverse .vrow__text{
  text-align:right;
  padding:100px 51px 100px 0;
}
.vrow--reverse .vrow__icon{
  justify-content:flex-start;
  padding:100px 0 100px 51px;
}

/* ==========================================================================
   Partenaires
   ========================================================================== */
.partners{background:var(--grey);padding:85px 0;margin-top:40px}
.partners__head{display:flex;align-items:center;margin-bottom:75px}
.partners__head h2{font-size:40px;font-weight:700;line-height:1.38;white-space:nowrap}
.rule{flex:1 1 auto;height:1px;background:var(--black);margin-left:25px}

.partners__list{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.partner{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-title);
  font-size:20px;
  font-weight:600;
  text-decoration:none;
}
.partner::before{
  content:"";
  flex:0 0 auto;
  width:20px;height:20px;
  margin-right:16px;
  background:url("../img/bullet-partenaire.svg") no-repeat center/contain;
}
.partner:hover{text-decoration:underline}

.more{margin-top:50px;text-align:right}
.more .link-arrow{font-size:25px;line-height:1.12}
.link-arrow--lg{font-size:30px;line-height:1.2}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.footer{font-size:13.6px;line-height:1.6;padding-bottom:0}

.footer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-top:48px}
.footer__cta{display:flex;align-items:center;gap:16px}
.social{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;height:58px;
  background:var(--green);
  color:#fff;
}
.social svg{width:26px;height:26px;fill:currentColor}

.footer__sites{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  border-top:1px solid var(--black);
  padding-top:20px;
  margin-top:20px;
}
.site h3{
  display:inline-block;
  font-size:20px;
  font-weight:700;
  line-height:1.25;
  color:#fff;
  background:var(--black);
  padding:5px 13px;
}
.site p{font-size:16px;margin-top:10px}
.site .link-arrow{font-size:18px;margin-top:20px}

.footer__menu{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  border-top:1px solid var(--black);
  padding-top:20px;
  margin-top:20px;
}
.fcol{flex:1 1 220px}
.fcol__title{font-size:20px;font-weight:600;line-height:1.25;margin-bottom:10px}
.fcol__title a{text-decoration:none}
.fcol__title a:hover{text-decoration:underline}
.fcol ul{margin-left:18px;list-style:url("../img/bullet-nav.svg")}
.fcol li{padding:2px 0}
.fcol a{font-size:16px;text-decoration:none}
.fcol a:hover{text-decoration:underline}

.footer__legal{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:32px;
  border-top:1px solid var(--black);
  margin-top:64px;
  padding:8px 0 32px;
}
.footer__legal a{text-decoration:none}
.footer__legal a:hover{text-decoration:underline}

/* ==========================================================================
   Bandeau cookies (sans JS)
   ========================================================================== */
.cookiebar{
  position:fixed;
  left:0;right:0;bottom:0;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.1);
  z-index:50;
}
.cookiebar__inner{display:flex;align-items:center;justify-content:space-between;padding-block:10px}
.cookiebar label{cursor:pointer;font-size:22px;line-height:1;padding:0 4px}
.cookie-close:checked ~ .cookiebar{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  :root{--gutter:24px;--pad:4%}
  .hero h1{font-size:46px}
  .mark,.partners__head h2{font-size:32px}
}

@media (max-width:900px){
  .nav{
    position:fixed;
    top:0;right:-320px;
    width:320px;max-width:85vw;
    height:100vh;
    background:#fff;
    padding:90px 24px 24px;
    overflow-y:auto;
    transition:right .25s ease;
    z-index:40;
  }
  .nav__list{flex-direction:column;align-items:stretch}
  .nav__list > li > a{padding:12px 0;font-size:20px}
  .nav__sub{
    position:static;
    opacity:1;visibility:visible;
    border:0;box-shadow:none;
    padding:0 0 8px 16px;
    min-width:0;
  }
  .nav__sub a{padding:6px 0}
  .has-sub > a::after{display:none}
  .nav-burger{display:flex}
  .nav-toggle:checked ~ .header .nav{right:0}
  .nav-toggle:checked ~ .nav-overlay{
    display:block;
    position:fixed;inset:0;
    background:rgba(0,0,0,.4);
    z-index:35;
  }

  .hero h1{font-size:34px;padding-top:50px}
  .hero__body{flex-direction:column;margin-top:40px;padding-bottom:50px}
  .hero__icon{flex:none;justify-content:flex-start;padding:0 0 30px}
  .hero__content{padding:0;border-left:0}

  .solutions,.datacenters,.vision{padding-top:50px}
  .solutions{padding-bottom:50px}

  .dc-grid{grid-template-columns:1fr}
  .dc__text{padding:40px 28px 50px}

  .vision__rows{margin-top:40px}
  .vision__rows::before{display:none}
  .vrow,.vrow--reverse{flex-direction:column;align-items:flex-start}
  .vrow__icon,.vrow__text,
  .vrow--reverse .vrow__icon,
  .vrow--reverse .vrow__text{
    flex:none;width:100%;
    padding:0 0 40px;
    justify-content:flex-start;
    text-align:left;
  }
  .vrow__icon{padding-bottom:16px}

  .partners{padding:50px 0}
  .partners__head{margin-bottom:40px}
  .partners__list{flex-direction:column;align-items:center;gap:16px}
  .more{text-align:center}

  .footer__head{flex-direction:column}
  .footer__sites{flex-direction:column;gap:30px}
  .footer__menu{flex-direction:column;gap:30px}
  .footer__legal{gap:16px 24px;margin-top:40px}
}

@media (max-width:560px){
  .mark{font-size:26px;box-shadow:-8px 0 0 var(--black),8px 0 0 var(--black)}
  .partners__head h2{font-size:26px}
  .lead{font-size:20px}
  .hero h1{font-size:28px}
  .btn{display:block;text-align:center;padding:12px 20px}
  .partners__head .rule{display:none}
}

/* ---------- impression ---------- */
@media print{
  .header,.nav,.cookiebar,.banner{display:none}
  body{font-size:12pt}
}

/* ==========================================================================
   PAGES INTÉRIEURES — composants partagés
   ========================================================================== */

/* ---------- bandes de section ---------- */
.band{padding-top:85px;padding-bottom:85px}
.band--ice{background:var(--ice)}
.band--grey{background:var(--grey)}
.band--mint{background:var(--mint)}
.band--cream{background:var(--cream)}
.band + .band{margin-top:32px}

/* ---------- titres ---------- */
.page-title{
  font-family:var(--font-title);
  font-size:35px;
  font-weight:700;
  line-height:1.12;
}
.page-title--xl{font-size:60px;line-height:1.08}
.h3-plain{font-family:var(--font-title);font-size:40px;font-weight:700;line-height:1.38}
.h4-plain{font-family:var(--font-title);font-size:40px;font-weight:400;line-height:1.25}
.h5-plain{font-family:var(--font-title);font-size:25px;font-weight:700;line-height:1.12}
.h3-bar{
  font-family:var(--font-title);
  font-size:25px;
  font-weight:700;
  line-height:1.12;
  padding-left:14px;
  border-left:11px solid var(--black);
}

/* ---------- rythme vertical ---------- */
.stack > * + *{margin-top:35px}
.stack-sm > * + *{margin-top:20px}
.band > p,
.band > ul,
.band > .split,
.band > .cols{font-size:18px;line-height:1.56}

/* ---------- icône + texte avec filet vertical ---------- */
.split{display:flex;align-items:center;margin-top:75px}
.split__icon{
  flex:0 1 33%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.split__body{
  flex:1 1 0;
  min-width:0;
  padding-left:80px;
  border-left:1px solid var(--black);
}
.split__body > * + *{margin-top:20px}
.split--flush{margin-top:35px}
.split--noline .split__body{border-left:0}

/* ---------- colonnes de cartes colorées ---------- */
.cols{display:flex;flex-wrap:wrap;gap:35px;margin-top:50px}
.cols__item{flex:1 1 45%;padding:45px}
.cols__item > * + *{margin-top:25px}
.cols__item--mint{background:var(--mint)}
.cols__item--cream{background:var(--cream)}
.cols__item--ice{background:var(--ice)}
.cols__item--lemon{background:#fffde7}

/* ---------- listes ---------- */
.list-arrow{margin-left:36px;list-style:url("../img/bullet-nav.svg")}
.list-arrow li{padding:4px 0}
.list-plain{margin-left:31px}
.list-plain li{padding:4px 0;list-style:none}
.list-disc{margin-left:24px;list-style:disc}
.list-disc li{padding:3px 0}

/* ---------- utilitaires ---------- */
.center{text-align:center}
.btn-row{display:flex;flex-wrap:wrap;gap:20px;margin-top:35px}
.btn-row--right{justify-content:flex-end}
.btn-row--center{justify-content:center}
.justify{text-align:justify}
.btn-row .btn{margin:0}
.ruled{text-align:center}
.ruled--left{text-align:left;padding-bottom:38px;border-bottom:1px solid var(--black)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.qa{
  display:flex;
  gap:24px;
  margin-top:50px;
  padding-bottom:50px;
  border-bottom:1px solid var(--black);
}
.qa:last-child{border-bottom:0;padding-bottom:0}
.qa__icon{flex:0 0 39px}
.qa__body{flex:1 1 auto;min-width:0}
.qa__body > * + *{margin-top:20px}
.qa__body p{font-size:18px;line-height:1.56}

/* ==========================================================================
   Histoire — frise chronologique
   ========================================================================== */
.timeline{position:relative;margin-top:75px}
.timeline::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:var(--black);
}
.tl{display:flex;align-items:flex-start}
.tl__side{
  flex:0 0 50%;
  padding:80px 51px 80px 0;
  text-align:right;
}
.tl__side .lead{margin-top:20px}
.tl__body{flex:0 0 50%;padding:80px 0 80px 51px}
.tl__body > * + *{margin-top:20px}
.tl__body p{font-size:18px;line-height:1.56}

/* ==========================================================================
   Fiches data center
   ========================================================================== */
.dcpage{display:flex;margin-top:50px}
.dcpage__main{flex:1 1 60%;min-width:0;padding-right:40px;text-align:justify}
.dcpage__main > * + *{margin-top:25px}
.dcpage__main p{font-size:18px;line-height:1.56}
.dcpage__main h2{font-family:var(--font-title);font-size:25px;font-weight:700;line-height:1.12;margin-top:40px}
.dcpage__aside{
  flex:0 1 40%;
  min-width:0;
  padding-left:45px;
  border-left:1px solid var(--black);
}
.dcpage__aside > * + *{margin-top:35px}
.badges{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.badges img{max-width:130px}
.fact > * + *{margin-top:12px}
.fact p{font-size:18px}
.fact ul{margin-left:24px;list-style:disc;font-size:16px}
.fact li{padding:3px 0}
.fact .mark{margin-bottom:8px}

/* ==========================================================================
   Formulaires
   ========================================================================== */
.form{max-width:820px;margin-top:50px}
.form h3{font-family:var(--font-title);font-size:25px;font-weight:700;margin:50px 0 10px}
.form h3:first-of-type{margin-top:30px}
.form > p{font-size:16px}

.field{margin-top:25px}
.field > label,
.field > p{
  display:block;
  font-family:var(--font-title);
  font-size:20px;
  margin-bottom:8px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%;
  max-width:520px;
  padding:12px 14px;
  font:inherit;
  color:inherit;
  background:#fff;
  border:1px solid var(--black);
  border-radius:0;
}
.field textarea{min-height:160px;max-width:100%;resize:vertical}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.check{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.check input{margin-top:5px;flex:0 0 auto}
.check label{font-size:16px;line-height:1.5}

.subfields{
  margin:18px 0 18px 28px;
  padding-left:22px;
  border-left:2px solid var(--mint);
}
/* Repli progressif : sans :has(), tous les sous-blocs restent visibles. */
@supports selector(:has(*)){
  .choice > .subfields{display:none}
  .choice:has(> .check > input:checked) > .subfields{display:block}
}

.form-legal{font-size:14px;line-height:1.6;margin-top:35px;max-width:820px}
.form .btn{margin-top:35px}
.form-note{
  margin-top:25px;
  padding:16px 20px;
  background:var(--mint);
  font-size:15px;
  line-height:1.6;
}

/* ==========================================================================
   Pages légales / texte long
   ========================================================================== */
.prose{max-width:960px}
.prose h2{
  font-family:var(--font-title);
  font-size:30px;
  font-weight:700;
  line-height:1.2;
  margin-top:50px;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-title);font-size:22px;font-weight:700;margin-top:35px}
.prose p{margin-top:18px;line-height:1.7}
.prose ul{margin:16px 0;list-style:none}
.prose ul li{padding:3px 0}
.prose ul li::marker{content:none}
.prose a{color:var(--black)}
.table-scroll{overflow-x:auto;margin-top:28px}
.prose table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
.prose th,
.prose td{border:1px solid var(--black);padding:8px 10px;vertical-align:top;text-align:left}
.prose thead th{background:var(--mint)}

/* ==========================================================================
   Responsive — pages intérieures
   ========================================================================== */
@media (max-width:1180px){
  .page-title{font-size:30px}
  .page-title--xl{font-size:44px}
  .h3-plain,.h4-plain{font-size:30px}
}

@media (max-width:900px){
  .band{padding-top:50px;padding-bottom:50px}

  .split{display:block;margin-top:40px}
  .split__icon{padding:0 0 24px;justify-content:flex-start}
  .split__icon:empty{display:none}
  .split__body{padding-left:0;border-left:0}

  .cols{gap:24px;margin-top:35px}
  .cols__item{flex:1 1 100%;padding:23px}

  .qa{display:block;margin-top:35px;padding-bottom:35px}
  .qa__icon{margin-bottom:16px}

  .timeline{margin-top:40px}
  .timeline::before{display:none}
  .tl{display:block}
  .tl__side{padding:40px 0 16px;text-align:left}
  .tl__body{padding:0 0 24px}

  .dcpage{display:block;margin-top:35px}
  .dcpage__main{padding-right:0}
  .dcpage__aside{
    margin-top:50px;
    padding-left:0;
    padding-top:35px;
    border-left:0;
    border-top:1px solid var(--black);
  }

  .page-title--xl{font-size:34px}
  .btn-row--right,.btn-row--center{justify-content:flex-start}
  .dcpage__main{text-align:left}
  .form h3{font-size:22px;margin-top:35px}
  .prose h2{font-size:24px;margin-top:35px}
  .h4-plain{font-size:24px}
}

@media (max-width:560px){
  .page-title{font-size:26px}
  .page-title--xl{font-size:28px}
  .h3-plain,.h4-plain{font-size:22px}
  .h3-bar{font-size:20px;border-left-width:8px}
  .link-arrow--lg{font-size:20px;word-break:break-word}
  .btn-row{display:block}
  .btn-row .btn + .btn{margin-top:14px}
}