/* ============================================================
   maximecollot.fr — feuille de style unique
   ============================================================ */

:root{
  --navy:#0A1A2F;
  --navy-800:#12263F;
  --navy-700:#1B3557;
  --blue:#1257C7;
  --logo-blue:#1C8AF8;   /* le bleu du logo : sur fond marine, et en décor */
  --blue-dark:#0E45A0;
  --blue-soft:#EAF1FD;
  --green:#12875A;
  --green-soft:#E6F5EE;
  --red:#C2261B;

  --bg:#F4F6FA;
  --surface:#FFFFFF;
  --surface-2:#FAFBFD;
  --border:#E2E7F0;
  --border-strong:#CBD4E3;
  --text:#0F1B2D;
  --muted:#5D6B80;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(10,26,47,.06), 0 1px 3px rgba(10,26,47,.05);
  --shadow:0 4px 16px rgba(10,26,47,.08);
  --shadow-lg:0 12px 36px rgba(10,26,47,.14);
  --maxw:1100px;
  --header-h:64px;

  --ff-sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-head:"Barlow Condensed","Inter",Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ff-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:var(--blue); text-decoration:none }
a:hover{ color:var(--blue-dark) }

h1,h2,h3{
  font-family:var(--ff-head); font-weight:600;
  line-height:1.12; letter-spacing:.2px; margin:0;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.4rem, 6vw, 4rem) }
h2{ font-size:clamp(1.9rem, 4vw, 2.7rem) }
h3{ font-size:1.25rem; text-transform:none; letter-spacing:0 }
p{ margin:0 0 1rem }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px }

/* ---------------- En-tête ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  background:rgba(10,26,47,.92);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
  height:100%; display:flex; align-items:center; gap:24px;
}
.logo{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--ff-head); font-size:1.35rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
  color:#fff; white-space:nowrap;
}
.logo img{ height:30px; width:auto; display:block }
.logo-texte span{ color:var(--logo-blue) }

.nav{ margin-left:auto; display:flex; align-items:center; gap:22px }
.nav a{
  color:rgba(255,255,255,.78); font-size:.92rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--logo-blue) }
.nav .btn{ border-bottom:none }

.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:#fff; margin:4px 0;
  transition:transform .2s, opacity .2s;
}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius);
  font-weight:600; font-size:.95rem; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .15s, transform .08s, box-shadow .15s;
}
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-sm) }
.btn-primary:hover{ background:var(--blue-dark); color:#fff }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3) }
.btn-ghost:hover{ background:rgba(255,255,255,.1); color:#fff }
.btn-outline{ background:var(--surface); color:var(--navy); border-color:var(--border-strong) }
.btn-outline:hover{ background:var(--surface-2); color:var(--navy) }
.btn-lg{ padding:15px 30px; font-size:1rem }

/* ---------------- Sections ---------------- */
section{ padding:78px 0 }
.section-head{ max-width:660px; margin-bottom:44px }
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--blue); margin-bottom:10px;
}
.section-head p{ color:var(--muted); font-size:1.06rem; margin-top:14px }

/* ---------------- Héros ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy); color:#fff;
  padding:clamp(56px, 9vw, 104px) 0 clamp(64px, 10vw, 112px);
}

/* Le fond : deux halos très étalés et une trame fine. Rien de tape-à-l'œil,
   juste assez de profondeur pour que le texte ne flotte pas sur un aplat. */
.hero-fond{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 8% 0%,   rgba(28,138,248,.28), transparent 62%),
    radial-gradient(760px 480px at 92% 96%, rgba(18,87,199,.32),  transparent 60%),
    linear-gradient(180deg, #0C1F38 0%, var(--navy) 55%, #08172A 100%);
}
.hero-fond::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(900px 600px at 30% 20%, #000 20%, transparent 78%);
}

.hero .wrap{ position:relative }
.hero-grille{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(34px, 5vw, 66px); align-items:center;
}

.hero-pastille{
  display:inline-block; margin-bottom:22px;
  padding:7px 15px; border-radius:99px;
  background:rgba(28,138,248,.14); border:1px solid rgba(28,138,248,.32);
  color:#9CCBFB; font-size:.83rem; font-weight:600; letter-spacing:.2px;
}

.hero h1{
  font-family:var(--ff-head); font-weight:600;
  font-size:clamp(2.6rem, 6.4vw, 4.4rem); line-height:.98;
  letter-spacing:-.5px; text-transform:uppercase;
  margin:0 0 22px;
}
.hero h1 em{ font-style:normal; color:var(--logo-blue) }

.hero .lede{
  font-size:clamp(1.02rem, 1.5vw, 1.18rem); line-height:1.65;
  color:rgba(255,255,255,.8); max-width:52ch; margin:0 0 30px;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:44px }

.hero-facts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px 30px;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
}
.fact strong{
  display:block; font-family:var(--ff-head); font-size:1.15rem;
  font-weight:600; letter-spacing:.2px; margin-bottom:3px;
}
.fact span{ font-size:.86rem; color:rgba(255,255,255,.6); line-height:1.5 }

/* ---------------- La fenêtre, motif du logo ---------------- */
.fenetre{
  margin:0; border-radius:14px; overflow:hidden;
  background:var(--navy-800);
  box-shadow:0 2px 6px rgba(0,0,0,.28), 0 28px 70px rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.1);
}
.fenetre-barre{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; background:var(--navy-800);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fenetre-barre i{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.28);
}
.fenetre img{ display:block; width:100%; height:auto }

.hero-visuel{ position:relative }
.fenetre--flottante{ position:relative; z-index:2 }
/* Une seconde fenêtre, en retrait : on comprend qu'il y a plusieurs sites
   derrière, sans avoir à le lire. */
.fenetre--seconde{
  position:absolute; right:-22px; bottom:-40px; width:72%;
  z-index:1; opacity:.5; filter:saturate(.7);
}

@media (max-width:900px){
  .hero-grille{ grid-template-columns:1fr }
  .hero-visuel{ margin-top:8px }
  .fenetre--seconde{ display:none }
  .hero-facts{ grid-template-columns:1fr 1fr }
}
@media (max-width:560px){
  .hero-facts{ grid-template-columns:1fr; gap:16px }
  .hero-actions .btn{ width:100% }
}


/* ---------------- Grilles / cartes ---------------- */
.grid{ display:grid; gap:20px }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-2{ grid-template-columns:repeat(2,1fr) }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-sm);
}
.card h3{ margin-bottom:10px }
.card p{ color:var(--muted); font-size:.96rem; margin:0 }
.card .ico{
  width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center; margin-bottom:18px;
  background:var(--blue-soft); color:var(--blue);
}
/* Sans cette taille, l'icône s'affiche à la dimension de son viewBox et
   remplit l'écran. */
.card .ico svg{ width:21px; height:21px; stroke-width:1.9 }

.card ul{ margin:14px 0 0; padding-left:18px; color:var(--muted); font-size:.94rem }
.card li{ margin-bottom:5px }

/* ---------------- Réalisations ---------------- */
/* La grille suit le nombre de projets : deux colonnes dès qu'il y a de quoi
   les remplir, une seule sinon. */
.works{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)) }

/* Projet unique : carte en paysage, capture à gauche — sinon la carte
   s'étirerait sur toute la largeur avec une image écrasée. */
.works > .work:only-child{
  display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch;
}
.works > .work:only-child .work-visual{
  height:100%; min-height:320px;
  border-bottom:0; border-right:1px solid var(--border);
}
.works > .work:only-child .work-body{ padding:34px }
.work{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s, transform .25s, border-color .25s;
}
.work:hover{
  transform:translateY(-4px); border-color:var(--border-strong);
  box-shadow:0 18px 44px rgba(10,26,47,.14);
}
.work-visual{
  height:264px; position:relative; overflow:hidden;
  background:var(--navy-800);
  border-bottom:1px solid var(--border);
}
/* La capture vit dans une fenêtre de navigateur, comme dans le logo. */
.work-visual .fenetre-barre{
  position:absolute; inset:0 0 auto 0; z-index:2;
  padding:10px 13px;
}
/* Cadrage haut : c'est l'en-tête du site qu'on veut voir, pas son milieu.
   La hauteur retranche la barre de la fenêtre, posée par-dessus. */
.work-visual img{
  width:100%; height:calc(100% - 35px); margin-top:35px;
  object-fit:cover; object-position:top center;
  display:block; transition:transform .5s ease;
}
.work:hover .work-visual img{ transform:scale(1.03) }
/* Repli quand aucune capture n'est encore disponible */
.work-visual .initials{
  font-family:var(--ff-head); font-size:3.1rem; font-weight:600;
  color:rgba(255,255,255,.28); letter-spacing:3px;
}
.work-body{ padding:24px; flex:1; display:flex; flex-direction:column }
.work-body h3{ margin-bottom:6px }
.work-sector{
  font-size:.8rem; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.work-body p{ color:var(--muted); font-size:.95rem; flex:1 }
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.tag{
  font-size:.76rem; font-weight:600; padding:4px 10px; border-radius:999px;
  background:var(--blue-soft); color:var(--blue-dark);
}
.tag-live{ background:var(--green-soft); color:var(--green) }

.work-lien{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:18px; font-weight:600; font-size:.94rem;
  color:var(--blue-dark);
}
.work-lien svg{ width:17px; height:17px; transition:transform .16s }
.work-lien:hover svg{ transform:translateX(3px) }

/* ---------------- Méthode ---------------- */
.steps{ counter-reset:step; display:grid; gap:0 }
.step{
  display:grid; grid-template-columns:64px 1fr; gap:22px;
  padding:26px 0; border-bottom:1px solid var(--border);
}
.step:last-child{ border-bottom:0 }
.step-num{
  font-family:var(--ff-head); font-size:2.1rem; font-weight:600;
  color:var(--blue); line-height:1;
}
.step h3{ margin-bottom:6px }
.step p{ color:var(--muted); margin:0; max-width:62ch }

/* ---------------- Tarifs ---------------- */
/* align-items:stretch (défaut) + colonne flex : les trois cartes ont la même
   hauteur et leurs boutons s'alignent, quel que soit le nombre de lignes. */
.prices{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr) }
.price{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:30px 26px; position:relative;
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.price--featured{ border-color:var(--blue); box-shadow:var(--shadow) }
.price-flag{
  position:absolute; top:-11px; left:26px;
  background:var(--blue); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  padding:4px 11px; border-radius:999px;
}
.price h3{ margin-bottom:4px }
.price .from{ font-size:.82rem; color:var(--muted) }
.price .amount{
  font-family:var(--ff-head); font-size:2.5rem; font-weight:600;
  color:var(--navy); line-height:1.1; margin:6px 0 4px;
}
.price .amount small{ font-size:1rem; color:var(--muted); font-weight:500 }
.price ul{ list-style:none; margin:20px 0 24px; padding:0; flex:1 }
.price li{
  position:relative; padding-left:24px; margin-bottom:9px;
  font-size:.94rem; color:var(--muted);
}
.price li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--green); font-weight:700;
}
.price .btn{ width:100% }
.price-note{
  margin-top:26px; font-size:.9rem; color:var(--muted);
  padding:16px 18px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius);
}

/* ---------------- Contact ---------------- */
.contact{
  background:var(--navy); color:#fff;
}
.contact h2{ color:#fff }
.contact .section-head p{ color:rgba(255,255,255,.72) }
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start }

.contact-side p{ color:rgba(255,255,255,.72); font-size:.98rem }
.contact-list{ list-style:none; padding:0; margin:26px 0 0 }
.contact-list li{ display:flex; gap:13px; align-items:flex-start; margin-bottom:18px }
.contact-list svg{ width:19px; height:19px; flex:0 0 19px; margin-top:3px; color:var(--logo-blue); stroke-width:1.9 }
.contact-list strong{ display:block; font-size:.98rem; color:#fff }
.contact-list a{ color:#fff }
.contact-list a:hover{ color:var(--logo-blue) }
.contact-list span{ font-size:.88rem; color:rgba(255,255,255,.6) }

form{ display:grid; gap:16px }
.field label{
  display:block; font-size:.86rem; font-weight:600;
  margin-bottom:6px; color:rgba(255,255,255,.86);
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  color:#fff; font-family:inherit; font-size:.97rem;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.38) }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--logo-blue);
  background:rgba(255,255,255,.1);
}
.field select option{ background:var(--navy-800); color:#fff }
.field textarea{ resize:vertical; min-height:118px }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }

/* Téléphone : l'indicatif du pays est collé au champ, comme un seul contrôle. */
.tel-groupe{ display:flex }
.tel-groupe select{
  /* Une largeur fixe : le contenu le plus long est « 🇱🇺 +352 ». */
  flex:0 0 96px; width:96px; padding-right:6px; text-align:left;
  border-radius:var(--radius) 0 0 var(--radius);
  border-right:0; background:rgba(255,255,255,.12);
}
.tel-groupe input{ flex:1; min-width:0; border-radius:0 var(--radius) var(--radius) 0 }
/* Le focus doit éclairer le groupe entier, pas une moitié. */
.tel-groupe:focus-within select,
.tel-groupe:focus-within input{ border-color:var(--logo-blue) }

/* Les gages, sous le bouton : ce qu'on promet en trois mots. */
.form-gages{
  list-style:none; margin:16px 0 14px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:.85rem; color:rgba(255,255,255,.72);
}
.form-gages li{ display:flex; align-items:center; gap:7px }
.form-gages li::before{
  content:""; flex:0 0 14px; width:14px; height:14px; border-radius:50%;
  background:var(--logo-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* Un champ que le visiteur doit corriger. */
.field.erreur input,
.field.erreur select,
.field.erreur textarea{ border-color:#FF8A7A }
.field .erreur-texte{
  display:block; margin-top:6px; font-size:.82rem; color:#FFB3A7;
}

/* La confirmation remplace le formulaire une fois la demande partie. */
.form-confirme{ text-align:center; padding:26px 10px }
.form-confirme h3{ font-size:1.35rem; margin:0 0 10px }
.form-confirme p{ color:rgba(255,255,255,.78); margin:0 0 8px }
.form-confirme::before{
  content:""; display:block; width:46px; height:46px; margin:0 auto 16px;
  border-radius:50%; background:var(--logo-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")
    center/24px no-repeat;
}
.form-note{ font-size:.82rem; color:rgba(255,255,255,.5); margin:0 }

.form-msg{
  padding:13px 16px; border-radius:var(--radius);
  font-size:.93rem; display:none;
}
.form-msg.ok{ display:block; background:var(--green-soft); color:var(--green) }
.form-msg.ko{ display:block; background:#FBE9E7; color:var(--red) }

/* piège à robots — invisible pour un humain */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------------- Pied de page ---------------- */
.site-footer{
  background:var(--navy-800); color:rgba(255,255,255,.58);
  padding:34px 0; font-size:.88rem;
}
.site-footer .wrap{
  display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:center; justify-content:space-between;
}
.pied-marque img{ height:34px; width:auto; display:block; margin-bottom:10px }
.pied-marque p{ margin:0 }
.site-footer a{ color:rgba(255,255,255,.72) }
.site-footer a:hover{ color:var(--logo-blue) }
.site-footer nav{ display:flex; gap:20px; flex-wrap:wrap }

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr 1fr }
  .prices{ grid-template-columns:1fr; }
  .price--featured{ order:-1 }
  .contact-grid{ grid-template-columns:1fr; gap:38px }
}

@media (max-width:680px){
  section{ padding:58px 0 }
  .hero{ padding:70px 0 76px }
  .grid-3, .grid-2, .works{ grid-template-columns:1fr }
  .works > .work:only-child{ grid-template-columns:1fr }
  .works > .work:only-child .work-visual{
    min-height:0; height:200px;
    border-right:0; border-bottom:1px solid var(--border);
  }
  .works > .work:only-child .work-body{ padding:24px }
  .field-row{ grid-template-columns:1fr }
  .hero-facts{ gap:18px 30px }

  .nav-toggle{ display:block }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy); padding:8px 20px 20px;
    border-bottom:1px solid rgba(255,255,255,.1);
    display:none;
  }
  .nav.open{ display:flex }
  .nav a{
    padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav a:hover{ border-bottom-color:rgba(255,255,255,.08) }
  .nav .btn{ margin-top:14px; border-bottom:none }
  .step{ grid-template-columns:44px 1fr; gap:16px }
}

/* Très petits écrans : le logo et son texte doivent tenir à côté du menu. */
@media (max-width:420px){
  .logo{ gap:8px; font-size:1.1rem }
  .logo img{ height:26px }
}

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

/* ============================================================
   Accessibilité
   ============================================================ */

/* Lien d'évitement : premier élément focusable, invisible tant qu'il n'a pas
   le focus. Permet d'atteindre le contenu sans traverser tout le menu. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--blue); color:#fff;
  padding:12px 20px; border-radius:0 0 var(--radius) 0;
  font-weight:600; font-size:.95rem;
}
.skip:focus{ left:0; color:#fff }

/* Contour de focus visible au clavier, invisible à la souris.
   Deux couches pour rester lisible sur fond clair comme sur fond navy. */
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:3px;
}
.site-header :focus-visible,
.contact :focus-visible,
.hero :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 6px rgba(28,138,248,.55);
}

/* ============================================================
   Pages de réalisation
   ============================================================ */

.wrap-texte{ max-width:760px }
.wrap-texte p{ font-size:1.05rem; color:var(--muted) }
.wrap-texte h2{ margin-bottom:22px }
.fond-clair{ background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; background:var(--blue-soft); color:var(--blue-dark);
  padding:1px 6px; border-radius:5px;
}

/* ---- En-tête de projet ---- */
.projet-hero{
  background:
    radial-gradient(900px 460px at 85% -18%, rgba(18,87,199,.30), transparent 62%),
    var(--navy);
  color:#fff; padding:52px 0 74px;
}
.projet-hero h1{ font-size:clamp(2.2rem, 5vw, 3.4rem); margin-top:6px }
.projet-hero .lede{
  max-width:60ch; margin-top:22px;
  font-size:1.12rem; color:rgba(255,255,255,.82);
}

.fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-size:.88rem; margin-bottom:30px;
  color:rgba(255,255,255,.5);
}
.fil a{ color:rgba(255,255,255,.72) }
.fil a:hover{ color:var(--logo-blue) }
.fil [aria-current]{ color:rgba(255,255,255,.5) }

.projet-faits{
  display:flex; flex-wrap:wrap; gap:16px 44px; margin:44px 0 0;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
}
.projet-faits div{ max-width:34ch }
.projet-faits dt{
  font-size:.76rem; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--logo-blue); margin-bottom:5px;
}
.projet-faits dd{ margin:0; font-size:.98rem; color:rgba(255,255,255,.88) }

/* ---- Captures commentées ---- */
.capture{ margin:0 0 42px }
.capture:last-child{ margin-bottom:0 }
.capture img{
  width:100%; height:auto;
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.capture figcaption{
  margin-top:15px; font-size:.95rem; color:var(--muted);
  max-width:72ch;
}

/* ---- Encadrés ---- */
.encadre{
  margin-top:34px; padding:22px 24px;
  background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--logo-blue); border-radius:var(--radius);
  color:var(--muted); font-size:.98rem;
}
.encadre strong{ color:var(--text) }
.encadre-note{ border-left-color:var(--blue); background:var(--blue-soft) }
.encadre-note strong{ color:var(--blue-dark) }

@media (max-width:680px){
  .projet-hero{ padding:36px 0 54px }
  .projet-faits{ gap:20px; flex-direction:column }
  .capture{ margin-bottom:32px }
}

/* ---- Page légale : hiérarchie correcte pour un lecteur d'écran
   (h1 unique, puis h2), mais poids visuel d'un sous-titre. ---- */
.legal h1{ font-size:clamp(1.9rem, 4vw, 2.7rem) }
.legal h2{
  font-size:1.2rem; text-transform:none; letter-spacing:0;
  margin-top:34px; margin-bottom:10px;
}
.legal p{ color:var(--muted) }

/* Texte secondaire, pour une précision qui ne doit pas peser
   autant que le reste du paragraphe. */
.discret{ color:var(--muted); font-size:.92em }

/* ============================================================
   Apparition au défilement
   ============================================================ */

/* Les éléments montent de quelques pixels en se révélant. Discret : un
   mouvement qu'on remarque à peine est un mouvement réussi.
   Rien ne bouge si le visiteur a demandé moins d'animations — et rien
   n'est caché sans JavaScript, la classe n'étant posée que par lui. */
.js-reveler .a-reveler{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.js-reveler .a-reveler.vu{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .js-reveler .a-reveler{ opacity:1; transform:none; transition:none }
}

/* ============================================================
   En-tête
   ============================================================ */

/* Barre pleine en permanence. Un en-tête transparent au-dessus du héros
   paraissait délavé et rendait le logo difficile à lire : le fond du héros
   change de teinte sous la barre, aucun voile ne rattrape ça proprement.
   Seule l'ombre apparaît au défilement, pour détacher la barre du contenu
   qui passe dessous. */
.site-header{ transition:box-shadow .25s }
.site-header.dense{ box-shadow:0 8px 30px rgba(0,0,0,.22) }

/* ============================================================
   Soin des sections
   ============================================================ */

/* L'exergue porte un filet : il tient la colonne avec le titre. */
.eyebrow{ position:relative; padding-left:30px }
.eyebrow::before{
  content:""; position:absolute; left:0; top:50%;
  width:20px; height:2px; background:var(--blue); border-radius:2px;
}

.section-head h2{
  font-size:clamp(1.9rem, 3.6vw, 2.8rem); line-height:1.05;
  letter-spacing:-.4px;
}

/* Les cartes de prestation se soulèvent à peine au survol. */
.card{ transition:transform .22s, box-shadow .22s, border-color .22s }
.card:hover{
  transform:translateY(-3px); border-color:var(--border-strong);
  box-shadow:0 14px 34px rgba(10,26,47,.1);
}

/* Le tarif mis en avant se détache vraiment. */
.price{ transition:transform .22s, box-shadow .22s }
.price--featured{ transform:translateY(-6px) }
.price:hover{ box-shadow:0 16px 40px rgba(10,26,47,.12) }

/* Les étapes de la méthode sont reliées par un trait continu. */
.steps{ position:relative }
.step{ position:relative }
.step::before{
  content:""; position:absolute; left:31px; top:0; bottom:0;
  width:2px; background:var(--border);
}
.step:first-child::before{ top:34px }
.step:last-child::before{ bottom:calc(100% - 34px) }
.step-num{ position:relative; z-index:1; background:var(--bg); padding:2px 0 }

@media (max-width:680px){
  .step::before{ left:21px }
}