/* ─────────────────────────────────────────────────────────────────────
   MAEDER INTERNATIONAL · feuille de style V9 · partagée par toutes les pages
   Blanc, noir, UN accent. Deux polices. Angles nets. Deux gris. Grille apparente.
   Une seule retouche ici se répercute partout · ne pas dupliquer dans les pages.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   MAEDER INTERNATIONAL · format V9
   Blanc, noir, UN accent repris du logo. Deux polices. Angles nets.
   Deux gris. Rien qui brille. Aucun chiffre inventé.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --noir:#000;--blanc:#fff;--gris:#ECECEC;--gris-clair:#F7F7F7;--gris-texte:#6B6B6B;
  --accent:#C2551F;          /* orange du logo, densifié pour rester lisible en bouton */
  --accent-clair:#E97A45;    /* l'orange exact du logo · marques, soulignements */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --marge:clamp(20px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--noir);background:var(--blanc);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

/* Bandeau d'offre · le seul endroit où l'orange plein est autorisé en fond */
.flash{background:var(--noir);color:var(--blanc);text-align:center;padding:11px 16px;font-size:14px;font-weight:500}
.flash a{color:var(--blanc);text-decoration:none;display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.flash b{color:var(--accent-clair);font-weight:800}
.flash .fleche{color:var(--accent-clair);font-weight:700}

.nav{position:sticky;top:0;z-index:50;background:var(--blanc);border-bottom:1px solid var(--gris)}
.nav-in{display:flex;align-items:center;gap:16px;padding:10px var(--marge);max-width:1400px;margin:0 auto}
.logo{height:88px;width:auto;flex:0 0 auto}
.nav-liens{display:none;gap:24px;margin-left:auto;font-size:15px;font-weight:500}
.nav-liens a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap}
.nav-liens a:hover{border-bottom-color:var(--noir)}
.nav-cta{flex:0 0 auto;margin-left:auto;padding:11px 20px;background:var(--accent);color:var(--blanc);text-decoration:none;font-size:14px;font-weight:700;border-radius:2px;white-space:nowrap}
.nav-liens+.nav-cta{margin-left:0}
.nav-cta:hover{opacity:.88}
@media(max-width:420px){
  .nav-in{gap:10px;padding-left:16px;padding-right:16px}
  .logo{height:62px}
  .nav-cta{padding:10px 14px;font-size:13px}
  .flash{font-size:12.5px;padding:9px 12px}
}

/* Hero · deux colonnes sur grand écran, le portrait garde son format */
.hero{display:grid;gap:0;background:var(--blanc)}
.hero-txt{padding:clamp(40px,6vw,84px) var(--marge);display:flex;flex-direction:column;justify-content:center}
.sur{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gris-texte);margin-bottom:18px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7.2vw,76px);line-height:1;letter-spacing:-.02em;margin-bottom:20px}
.hero-sous{font-size:clamp(17px,2.1vw,20px);max-width:44ch;color:#1a1a1a}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-photo{position:relative;min-height:340px;background:var(--gris)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.langues{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;padding-top:22px;border-top:1px solid var(--gris);font-size:15px;font-weight:500}
.langues span{display:flex;align-items:center;gap:7px}

.btn{display:inline-block;padding:15px 28px;font-size:15px;font-weight:700;text-decoration:none;border-radius:2px;border:1px solid transparent;transition:opacity .15s;font-family:inherit;cursor:pointer}
.btn:hover{opacity:.85}
.btn-plein{background:var(--accent);color:var(--blanc)}
.btn-noir{background:var(--noir);color:var(--blanc)}
.btn-ligne{background:transparent;color:var(--noir);border-color:var(--noir)}

/* Chiffres · seulement des faits vérifiables */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--gris);border-top:1px solid var(--gris);border-bottom:1px solid var(--gris)}
.chiffre{background:var(--blanc);padding:30px 24px}
.chiffre .n{font-family:var(--serif);font-size:clamp(34px,4.4vw,46px);line-height:1;margin-bottom:8px}
.chiffre .l{font-size:14px;color:var(--gris-texte);line-height:1.4}

section{padding:clamp(56px,8vw,108px) var(--marge)}
.in{max-width:1400px;margin:0 auto}
.etiquette{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gris-texte);margin-bottom:20px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,54px);line-height:1.04;letter-spacing:-.02em;margin-bottom:20px}
.chapo{font-size:clamp(17px,2vw,20px);max-width:60ch;color:#1a1a1a}
.duo{display:grid;gap:clamp(30px,5vw,68px);align-items:start}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr;align-items:center}}

/* Services · quatre missions */
.missions{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--gris);border:1px solid var(--gris);margin-top:44px}
.mission{background:var(--blanc);padding:34px 30px}
.mission .num{font-family:var(--serif);font-size:34px;line-height:1;color:var(--accent-clair);margin-bottom:14px}
.mission h3{font-size:20px;font-weight:700;margin-bottom:10px;line-height:1.25}
.mission p{font-size:15.5px;color:#3a3a3a;line-height:1.55;margin-bottom:16px}
.mission ul{list-style:none;font-size:14.5px;color:var(--gris-texte)}
.mission li{padding:5px 0 5px 18px;position:relative;line-height:1.45}
.mission li::before{content:'';position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--accent-clair)}

/* Sites vitrine · l'offre qui tourne aujourd'hui */
.offre{background:var(--noir);color:var(--blanc)}
.offre .etiquette{color:#9a9a9a}
.offre h2{color:var(--blanc)}
.offre .chapo{color:#e4e4e4}
.prix{display:flex;align-items:baseline;gap:14px;margin:30px 0 10px;flex-wrap:wrap}
.prix .p{font-family:var(--serif);font-size:clamp(46px,7vw,74px);line-height:1;color:var(--accent-clair)}
.prix .barre{font-size:22px;color:#8a8a8a;text-decoration:line-through}
.prix .unite{font-size:16px;color:#c8c8c8}
.offre-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 26px;margin:26px 0 32px;font-size:15.5px}
.offre-liste div{padding-left:18px;position:relative;color:#e4e4e4;line-height:1.45}
.offre-liste div::before{content:'';position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--accent-clair)}

/* Méthode */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--gris);border:1px solid var(--gris);margin-top:44px}
.etape{background:var(--blanc);padding:30px 26px}
.etape .n{font-family:var(--serif);font-size:38px;line-height:1;color:var(--accent-clair);margin-bottom:12px}
.etape h3{font-size:18px;font-weight:700;margin-bottom:9px}
.etape p{font-size:15px;color:#3a3a3a;line-height:1.55}

.cadre{border:1px solid var(--gris);border-left:4px solid var(--accent-clair);padding:24px 26px;font-size:16px;line-height:1.6;color:#3a3a3a;margin-top:26px}
.cadre b{color:var(--noir)}

/* Formulaire */
.form{display:grid;gap:14px;max-width:600px}
.ligne{display:grid;gap:14px}
@media(min-width:560px){.ligne{grid-template-columns:1fr 1fr}}
label{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-texte);display:block;margin-bottom:6px}
input,textarea{width:100%;padding:13px 14px;border:1px solid var(--gris);border-radius:2px;font-family:inherit;font-size:16px;background:var(--blanc);color:var(--noir)}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}
.rgpd{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--gris-texte);line-height:1.45}
.rgpd input{width:auto;margin-top:3px}
.form-note{font-size:14px;color:var(--gris-texte)}

.coord{font-size:19px;line-height:2}
.coord a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent-clair)}

footer{border-top:1px solid var(--gris);padding:38px var(--marge);font-size:14px;color:var(--gris-texte)}
.foot-in{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.foot-in a{text-decoration:none;border-bottom:1px solid var(--gris)}

@media(min-width:900px){
  .nav-liens{display:flex}
  .hero{grid-template-columns:1.15fr 1fr;align-items:stretch}
  .hero-photo{min-height:min(80vh,660px)}
}

/* ── GRILLE APPARENTE ─────────────────────────────────────────────────────
   Chaque rubrique est separee par un trait noir plein, chaque element porte
   son cadre. Rien de decoratif : ce sont des filets, ils servent a lire. */

/* 1 · trait fort entre les grandes rubriques */
section{border-top:2px solid var(--noir);position:relative}
.offre{border-top:2px solid var(--noir)}
.chiffres{border-top:2px solid var(--noir);border-bottom:2px solid var(--noir)}

/* 2 · l'etiquette de rubrique devient une pastille encadree */
.etiquette{display:inline-block;border:1px solid var(--noir);padding:6px 12px;margin-bottom:24px;color:var(--noir);background:var(--blanc)}
.offre .etiquette{border-color:var(--blanc);color:var(--blanc);background:transparent}

/* 3 · filet sous chaque titre de rubrique */
h2{padding-bottom:20px;border-bottom:1px solid var(--gris);margin-bottom:26px}
.offre h2{border-bottom-color:rgba(255,255,255,.28)}

/* 4 · le chapeau prend un filet a gauche · on voit ou commence le propos */
.chapo{border-left:3px solid var(--accent-clair);padding-left:18px}
.offre .chapo{border-left-color:var(--accent-clair)}

/* 5 · les deux colonnes sont separees par un trait vertical */
@media(min-width:900px){
  .duo{position:relative}
  .duo::before{content:'';position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:1px;background:var(--gris)}
  .duo>*:first-child{padding-right:clamp(20px,3vw,40px)}
  .duo>*:last-child{padding-left:clamp(20px,3vw,40px)}
}

/* 6 · chaque carte porte son propre cadre, au lieu de partager un fond gris */
.missions,.etapes,.chiffres{background:transparent;border:0;gap:0}
.mission,.etape,.chiffre{border:1px solid var(--gris);margin:-1px 0 0 -1px}
.mission{border-top-width:2px;border-top-color:var(--noir)}
.etape{border-top-width:2px;border-top-color:var(--noir)}

/* 7 · les puces des missions deviennent des lignes separees */
.mission ul{border-top:1px solid var(--gris);padding-top:12px;margin-top:4px}
.mission li{border-bottom:1px solid var(--gris-clair);padding:8px 0 8px 18px}
.mission li:last-child{border-bottom:0}

/* 8 · la liste de l'offre passe en cellules encadrees */
.offre-liste{gap:0}
.offre-liste div{border:1px solid rgba(255,255,255,.22);margin:-1px 0 0 -1px;padding:14px 16px 14px 30px}
.offre-liste div::before{left:16px;top:23px}

/* 9 · le bloc prix se detache dans son propre cadre */
.prix{border:1px solid rgba(255,255,255,.32);padding:22px 26px;margin:26px 0 0}

/* 10 · le formulaire et ses champs · chaque ligne se voit */
.form{border:1px solid var(--gris);padding:clamp(22px,3vw,34px)}
input,textarea{border:1px solid #cfcfcf}
.rgpd{border-top:1px solid var(--gris);padding-top:14px}

/* 11 · les langues du hero en cellules */
.langues{gap:0;border-top:1px solid var(--gris);border-left:1px solid var(--gris);margin-top:32px;padding-top:0}
.langues span{border-right:1px solid var(--gris);border-bottom:1px solid var(--gris);padding:12px 16px;flex:1 0 auto;justify-content:center}

/* 12 · le hero separe du contenu par un trait, et ses deux colonnes aussi */
.hero{border-bottom:2px solid var(--noir)}
@media(min-width:900px){.hero-photo{border-left:1px solid var(--gris)}}

/* 13 · pied de page */
footer{border-top:2px solid var(--noir)}


/* ── ANIMATION AU DEFILEMENT ──────────────────────────────────────────────
   Un fondu et 14 px de montee. Rien d'autre : sur un site qui se veut sobre,
   une animation qui se remarque est une animation ratee. */
.anim{opacity:0;transform:translateY(14px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.anim.vu{opacity:1;transform:none}
/* le hero ne s'anime pas · il est deja visible au chargement, l'animer le ferait clignoter */
@media(prefers-reduced-motion:reduce){
  .anim{opacity:1;transform:none;transition:none}
}



/* ── VARIANTE NOIR DOMINANT ───────────────────────────────────────────────
   On inverse les cinq variables · l'encre devient blanche, le papier devient
   noir. Tout le reste de la feuille suit sans etre touche. Les filets de la
   grille apparente restent visibles, juste assez pour se lire sur du noir. */
body.sombre{
  --noir:#FFFFFF;         /* l'encre · texte, traits forts */
  --blanc:#0A0A0A;        /* le papier · fonds */
  --gris:#2E2E2E;         /* filets de la grille */
  --gris-clair:#141414;   /* fonds de rubrique */
  --gris-texte:#9C9C9C;   /* texte secondaire */
}
body.sombre{background:#0A0A0A;color:#fff}
body.sombre .chapo{color:#E2E2E2}
body.sombre .mission p,body.sombre .etape p,body.sombre .metier p,body.sombre .atout p{color:#C9C9C9}
body.sombre .zone p{color:#C9C9C9}

/* le bandeau d'offre s'inverse · sur fond noir, un bloc noir ne se detache plus */
body.sombre .flash{background:var(--accent);color:#fff}
body.sombre .flash b,body.sombre .flash .fleche{color:#fff;text-decoration:underline}

/* la rubrique offre passe en blanc · c'est elle qui doit trancher maintenant */
body.sombre .offre{background:#fff;color:#000;border-top-color:#fff}
body.sombre .offre h2,body.sombre .offre .chapo{color:#000}
body.sombre .offre .etiquette{border-color:#000;color:#000;background:transparent}
body.sombre .offre h2{border-bottom-color:#DCDCDC}
body.sombre .offre .prix{border-color:#DCDCDC}
body.sombre .offre .prix .p{color:var(--accent)}
body.sombre .offre .prix .barre{color:#8a8a8a}
body.sombre .offre .prix .unite{color:#4a4a4a}
body.sombre .offre-liste div{border-color:#DCDCDC;color:#2a2a2a}
body.sombre .offre-liste div::before{background:var(--accent)}
body.sombre .offre .btn-plein{background:#000;color:#fff}

/* boutons · le bouton « noir » devient blanc pour rester lisible */
body.sombre .btn-noir{background:#fff;color:#000}
body.sombre .btn-ligne{color:#fff;border-color:rgba(255,255,255,.5)}
body.sombre .btn-blanc{background:#fff;color:#000}

/* champs de formulaire · un champ blanc sur fond noir eblouit */
body.sombre input,body.sombre textarea{background:#141414;border-color:#3A3A3A;color:#fff}
body.sombre input::placeholder,body.sombre textarea::placeholder{color:#7A7A7A}

/* le logo sombre a une pilule noire · sur fond noir il faut la version claire */
body.sombre .logo{filter:none}

/* la capture de site garde un cadre visible */
body.sombre .apercu,body.sombre .apercu .barre{border-color:#2E2E2E}
body.sombre .apercu .barre{background:#141414}
body.sombre .plan{filter:grayscale(1) invert(.92) contrast(.9)}


/* ── CORRECTIONS CONTRASTE EN SOMBRE ──────────────────────────────────────
   Deux couleurs etaient codees en dur et ne suivaient pas l'inversion. */
body.sombre .hero-sous{color:#DCDCDC}
body.sombre .flash a,body.sombre .flash b,body.sombre .flash .fleche{color:#fff}
body.sombre .flash b{text-decoration:underline}
/* toute couleur de texte codee en dur dans les pages est ramenee a du lisible */
body.sombre .atout p,body.sombre .metier p,body.sombre .option p,
body.sombre .mission p,body.sombre .etape p{color:#C9C9C9}
body.sombre .item p{color:#A8A8A8}
body.sombre .cadre{color:#C9C9C9}
body.sombre .cadre b{color:#fff}
body.sombre .hero-photo{background:var(--gris-clair)}


/* ── DEGRADE BLEU NUIT ────────────────────────────────────────────────────
   Reponse 2.1 · « noir profond avec un degrade leger vers le bleu nuit,
   plus de profondeur, moins plat ». Le degrade est fixe : il ne defile pas
   avec la page, sinon on voit des raccords entre les rubriques. */
body.sombre{
  background:#07070C;
  background-image:radial-gradient(120% 80% at 50% 0%,#0E1424 0%,#0A0B12 42%,#07070C 100%);
  background-attachment:fixed;
}
body.sombre .nav{background:rgba(7,7,12,.92);backdrop-filter:blur(12px)}
/* les rubriques laissent voir le degrade au lieu de le masquer */
body.sombre section{background:transparent}
body.sombre section[style*="gris-clair"]{background:rgba(255,255,255,.028) !important}
body.sombre .chiffre,body.sombre .mission,body.sombre .etape,body.sombre .metier,
body.sombre .atout,body.sombre .item,body.sombre .option,body.sombre .pilier{background:rgba(255,255,255,.022)}
body.sombre .hero-langues,body.sombre .hero-chiffres,body.sombre .hero-photo{background:rgba(255,255,255,.03)}


/* ── CONTRASTE DU BANDEAU ET DU PRIX ──────────────────────────────────────
   Blanc sur orange ne donnait qu'un rapport de 2,16 · illisible en plein soleil
   sur un téléphone. Texte sombre sur l'orange : rapport 9,8. */
body.sombre .flash{background:var(--accent-clair);color:#180801}
body.sombre .flash a,body.sombre .flash b,body.sombre .flash .fleche{color:#180801;font-weight:700}
body.sombre .flash b{text-decoration:underline;text-underline-offset:3px}
body.sombre .offre .prix .unite{color:#2a2a2a}