/* MyVerif – myverif.com (version 17, d'après la maquette « Résidences bien suivies »)
   Police hébergée sur le site : Plus Jakarta Sans (licence libre SIL OFL). */
@font-face{font-family:"Jakarta";src:url("assets/fonts/jakarta-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url("assets/fonts/jakarta-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jakarta";src:url("assets/fonts/jakarta-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  color-scheme:light;
  --navy:#102c58; --ink:#15285c; --text:#2a3555; --muted:#5a6684;
  --blue:#1f62e0; --blue-soft:#eaf1ff; --green:#17804a; --green-2:#179467; --mint:#9be3c3;
  --line:#e2e8f2; --bg:#f4f7fc; --white:#fff;
  --violet:#7a4de8; --violet-soft:#f2edff; --bleu-carte:#eaf2ff; --vert-soft:#e6f6ef; --vert-icone:#11a06e;
  --orange:#f06a1d; --orange-soft:#fff1e6;
  --ombre:0 10px 30px rgba(20,40,90,.08); --ombre-forte:0 24px 60px rgba(16,44,88,.18);
  --font:"Jakarta","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --large:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;overflow-x:clip;background:linear-gradient(180deg,#fff 0,var(--bg) 640px) no-repeat,var(--bg);color:var(--text);font:500 16px/1.6 var(--font)}
img,svg{display:block;max-width:100%}
a{color:var(--blue)}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:var(--ink);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.cadre{width:min(100% - 40px,var(--large));margin-inline:auto}
.cadre-large{width:min(100% - 40px,1320px);margin-inline:auto}
.lien-evitement{position:absolute;left:-999px;top:10px;z-index:50;background:#fff;padding:8px 14px;border-radius:10px}
.lien-evitement:focus{left:12px}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Logo ---------- */
.marque{display:flex;align-items:center;gap:10px;text-decoration:none}
.marque .symbole{width:40px;height:39px;flex:none}
.marque-texte{display:flex;flex-direction:column;line-height:1}
.marque-nom{font:800 27px/1 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;letter-spacing:-.8px;color:var(--navy)}
.marque-nom span{color:var(--green)}
.marque-slogan{font-size:12px;font-weight:700;color:var(--muted);margin-top:4px;letter-spacing:.01em}

/* ---------- En-tête ---------- */
.entete{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.entete .cadre-large{display:flex;align-items:center;gap:24px;min-height:78px}
.menu{display:flex;align-items:stretch;gap:4px;margin-left:auto}
.menu a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:78px;padding:8px 10px;border-radius:14px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:700}
.menu a{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.menu a:hover{background:var(--bg)}
.menu a.actif:hover{background:var(--blue-soft)}
.menu a.actif{background:var(--blue-soft);color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
.espace{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--green);border-radius:14px;color:#fff;text-decoration:none;font-weight:700;font-size:14px;background:var(--green);white-space:nowrap;box-shadow:0 8px 18px rgba(23,128,74,.22)}
.espace:hover{background:#136b3e;border-color:#136b3e;color:#fff}
.bouton-menu{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}

/* ---------- Ouverture ---------- */
.vitrine{display:grid;grid-template-columns:minmax(0,1fr) 472px;gap:26px;align-items:start;padding-top:30px}
.vitrine-principal{min-width:0}
.ouverture{padding:0 0 22px}
.ouverture-grille{display:grid;grid-template-columns:.86fr 1.14fr;gap:8px;align-items:center}
.ouverture-texte{position:relative;z-index:1}
.ouverture h1{font-size:clamp(34px,3.5vw,50px);font-weight:800}
.ouverture h1 .vert{color:var(--green-2)}
.chapo{margin-top:18px;font-size:17px;color:var(--muted);max-width:30rem}
.bouton{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:16px 26px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 12px 26px rgba(31,98,224,.28)}
.bouton:hover{filter:brightness(1.07)}
.atouts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:24px 0 0;padding:12px 18px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;width:fit-content;max-width:100%}
.atouts li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink)}
.atouts .ico{width:20px;height:20px}
.atouts li:nth-child(1) .ico{color:#fff;fill:var(--vert-icone);stroke:#fff}
.atouts li:nth-child(n+2) .ico{color:var(--blue)}
.photo-ouverture{position:relative;border-radius:0 26px 26px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%);mask-image:linear-gradient(90deg,transparent 0,#000 15%)}
.photo-ouverture img{width:100%;height:auto}

/* ---------- Cartes de services ---------- */
.services{padding:4px 0 24px}
.services-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.service{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--ombre);text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.service:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,40,90,.13)}
.service img{width:100%;height:124px;object-fit:cover}
.service-corps{position:relative;flex:1;padding:34px 16px 60px}
.service .pastille{position:absolute;top:-26px;left:14px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 6px 16px rgba(20,40,90,.14)}
.service .pastille .ico{width:28px;height:28px}
.service h3{font-size:18px;font-weight:800}
.service p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.service .fleche{position:absolute;right:16px;bottom:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff}
.service .fleche .ico{width:20px;height:20px}
.s-violet .service-corps{background:linear-gradient(180deg,#fff 0%,var(--violet-soft) 100%)}
.s-violet .pastille{color:var(--violet)} .s-violet .fleche{background:var(--violet)}
.s-bleu .service-corps{background:linear-gradient(180deg,#fff 0%,var(--bleu-carte) 100%)}
.s-bleu .pastille{color:var(--blue)} .s-bleu .fleche{background:var(--blue)}
.s-vert .service-corps{background:linear-gradient(180deg,#fff 0%,var(--vert-soft) 100%)}
.s-vert .pastille{color:var(--vert-icone)} .s-vert .fleche{background:var(--vert-icone)}
.s-orange .service-corps{background:linear-gradient(180deg,#fff 0%,var(--orange-soft) 100%)}
.s-orange .pastille{color:var(--orange)} .s-orange .fleche{background:var(--orange)}

/* ---------- Aperçu de l'application ---------- */
.apercu{grid-column:1/-1;padding:4px 0 34px}
.etiquette{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green-2);margin-bottom:14px}
.widgets{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
.widget{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--ombre);min-width:0}
.widget-titre{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.widget-titre strong{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink);white-space:nowrap}
.widget-titre .ico{color:var(--orange)}
.widget-titre .bleu{color:var(--blue)}
.widget-titre a,.voir-tout{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.activite{display:flex;align-items:center;gap:14px}
.activite img{width:72px;height:58px;object-fit:cover;border-radius:12px;flex:none}
.activite small{display:block;font-weight:700;color:var(--ink);font-size:13px}
.activite strong{display:block;color:var(--ink);font-size:16px;margin:2px 0}
.activite span{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.rond-fleche{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.rond-fleche .ico{width:18px;height:18px}
.progression{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:12px}
.barre{flex:1;height:7px;border-radius:9px;background:#e8edf5;overflow:hidden}
.barre i{display:block;height:100%;width:40%;background:var(--vert-icone);border-radius:9px}
.taches{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.taches li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink)}
.taches li time{margin-left:auto;color:var(--muted);font-size:13px}
.case{width:18px;height:18px;border-radius:5px;border:1.8px solid #b9c3d6;flex:none;display:grid;place-items:center}
.case.cochee{background:var(--vert-icone);border-color:var(--vert-icone)}
.case.cochee::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.widget-photo{position:relative;padding:0;overflow:hidden;min-height:210px}
.widget-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.puce-info{position:absolute;right:12px;bottom:12px;left:12px;max-width:330px;margin-left:auto;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:var(--ombre-forte)}
.puce-info .icone-ronde{width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.puce-info .icone-ronde .ico{width:19px;height:19px}
.puce-info strong{display:block;font-size:13px;color:var(--ink);line-height:1.25}
.puce-info small{display:block;font-size:12px;color:var(--muted)}
.puce-info .ico.suite{margin-left:auto;width:18px;height:18px;color:var(--ink)}

/* ---------- Téléphones (dessinés en HTML : nets à toutes les tailles) ---------- */
.telephones{position:relative;height:740px;align-self:start}
.tel{position:absolute;border-radius:46px;background:#0d1426;padding:10px;box-shadow:var(--ombre-forte),inset 0 0 0 2px #2b3550}
.tel-1{left:0;top:0;width:278px;z-index:2}
.tel-2{right:0;top:70px;width:228px;z-index:1}
.activite-2{margin-top:7px}
.ecran{position:relative;border-radius:35px;background:#fff;overflow:hidden;padding:12px 12px 10px;font-size:11px;color:var(--ink)}
.encoche{position:absolute;top:0;left:50%;transform:translateX(-50%);width:92px;height:22px;background:#0d1426;border-radius:0 0 15px 15px}
.statut{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:11px;padding:0 8px 8px}
.statut svg{width:42px;height:10px}
.tel-haut{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 10px}
.tel-haut .marque .symbole{width:24px;height:23px}
.tel-haut .marque-nom{font-size:17px}
.cloche{width:28px;height:28px;border-radius:50%;background:var(--bg);display:grid;place-items:center}
.cloche .ico{width:15px;height:15px}
.tel h4{margin:0;font-size:20px;font-weight:800;color:var(--ink)}
.tel .sous{color:var(--muted);font-size:11px;margin:2px 0 9px}
.tel-photo{position:relative;border-radius:14px;overflow:hidden}
.tel-photo img{width:100%;height:114px;object-fit:cover}
.tel-photo .puce-info{left:8px;right:8px;bottom:8px;padding:6px 8px;gap:7px;border-radius:10px;max-width:none}
.tel-photo .icone-ronde{width:24px;height:24px}
.tel-photo .icone-ronde .ico{width:13px;height:13px}
.tel-photo .puce-info strong{font-size:10.5px}
.tel-photo .puce-info small{font-size:9px}
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0}
.tuile{border-radius:12px;padding:9px 6px;text-align:center}
.tuile .ico{width:24px;height:24px;margin:0 auto 4px}
.tuile b{display:block;font-size:11.5px}
.tuile span{display:block;font-size:9px;color:var(--muted);line-height:1.3}
.t-violet{background:var(--violet-soft);color:var(--violet)} .t-bleu{background:var(--bleu-carte);color:var(--blue)}
.t-vert{background:var(--vert-soft);color:var(--vert-icone)} .t-orange{background:var(--orange-soft);color:var(--orange)}
.tuile b{color:var(--ink)}
.tel-ligne-titre{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;margin:2px 0 6px}
.tel-ligne-titre a{color:var(--blue);text-decoration:none;font-size:10.5px}
.tel .activite{gap:8px}
.tel .activite img{width:54px;height:42px;border-radius:8px}
.tel .activite small{font-size:9.5px} .tel .activite strong{font-size:11.5px} .tel .activite span{font-size:9.5px}
.tel .rond-fleche{width:24px;height:24px} .tel .rond-fleche .ico{width:13px;height:13px}
.tel-nav{display:flex;justify-content:space-around;border-top:1px solid var(--line);margin:9px -12px 0;padding:7px 0 2px;font-size:9.5px;font-weight:700;color:var(--muted)}
.tel-nav span{display:flex;flex-direction:column;align-items:center;gap:2px}
.tel-nav .ico{width:17px;height:17px}
.tel-nav .on{color:var(--blue)}
.barre-accueil{width:86px;height:4px;border-radius:9px;background:#c9d1dd;margin:7px auto 0}
.retour{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink);margin:2px 0 10px;font-weight:700}
.retour .ico{width:14px;height:14px}
.tel-entete{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.tel-entete .icone-ronde{width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.tel-entete .icone-ronde .ico{width:16px;height:16px}
.tel-entete b{display:block;font-size:13px}
.tel-entete span{display:block;font-size:9.5px;color:var(--muted)}
.tel-2 .tel-photo img{height:146px}
.zones{list-style:none;margin:9px 0;padding:0;display:grid;gap:5px}
.zones li{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:10.5px;font-weight:700}
.zones .ico{width:15px;height:15px;color:var(--ink)}
.zones .ico.suite{margin-left:auto;width:12px;height:12px}
.demarrer{display:block;text-align:center;background:var(--blue);color:#fff;border-radius:999px;padding:5px 8px;font-weight:800;font-size:11px;line-height:1.4}

/* ---------- Bandeau des qualités ---------- */
.qualites{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.qualites ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.qualites li{display:flex;align-items:center;gap:14px}
.qualites .rond{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.qualites .rond .ico{width:24px;height:24px}
.qualites strong{display:block;font-size:17px;color:var(--ink)}
.qualites span{display:block;font-size:14px;color:var(--muted)}

/* ---------- Sections de contenu ---------- */
.section{padding:72px 0}
.section h2{font-size:clamp(28px,3.4vw,40px);font-weight:800}
.section .intro{margin-top:12px;color:var(--muted);font-size:17px;max-width:42rem}
.comparaison .cadre{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.coches{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.coches li{display:flex;gap:12px;align-items:flex-start}
.coches .ico{color:var(--vert-icone);margin-top:2px}
.coches strong{display:block;color:var(--ink)}
.coches span{display:block;color:var(--muted);font-size:14.5px}
.carte-compare{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--ombre)}
.carte-compare h3{font-size:18px}
.carte-compare .sous-titre{color:var(--muted);font-size:14px;margin:2px 0 16px}
.deux-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.deux-photos figure{margin:0}
.deux-photos img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.deux-photos figcaption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:13.5px;color:var(--muted)}
.deux-photos figcaption strong{display:block;color:var(--ink)}
.etat{font-style:normal;font-size:11.5px;font-weight:800;border-radius:99px;padding:4px 10px}
.etat.bon{background:var(--vert-soft);color:var(--green)}
.etat.mauvais{background:#fde8e8;color:#b42318}
.constat{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:14.5px}
.constat strong{display:block;color:var(--ink)}
.constat small{display:block;margin-top:6px;color:var(--green);font-weight:800;font-size:13px}
.rapports{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.bloc{border:1px solid var(--line);border-radius:20px;padding:24px;background:linear-gradient(180deg,#fff,var(--bg))}
.bloc .rond{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);margin-bottom:14px}
.bloc h3{font-size:18px}
.bloc p{margin-top:8px;color:var(--muted);font-size:15px}
.bloc .loi{display:block;margin-top:8px;font-size:12.5px;font-weight:800;color:var(--green)}
.questions{max-width:820px;margin-top:28px;display:grid;gap:12px}
.questions details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px}
.questions summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font-weight:800;color:var(--ink)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";position:absolute;right:0;top:12px;width:28px;height:28px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:20px;line-height:28px;text-align:center}
.questions details[open] summary::after{content:"–"}
.questions details p{padding:0 0 18px;color:var(--muted)}
.contact .cadre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:40px;box-shadow:var(--ombre)}
.contact p{margin-top:8px;color:var(--muted)}
.contact .bouton{margin-top:0}

/* ---------- Pied de page ---------- */
.pied{background:var(--navy);color:#c7d3ea;padding:20px 0 12px;font-size:14px}
.pied .cadre{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px}
.pied .marque .symbole{width:32px;height:31px}
.pied .marque-nom{font-size:23px}
.pied .marque-nom{color:#fff}
.pied .marque-nom span{color:var(--mint)}
.pied .marque-slogan{color:#9fb0cf}
.pied .symbole .anneau{stroke:#fff}
.pied .symbole .coche{fill:var(--mint)}
.pied nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.pied nav a{color:#fff;text-decoration:none;font-weight:700}
.pied nav a:hover{text-decoration:underline}
.pied .ligne{width:min(100% - 40px,var(--large));margin:14px auto 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);text-align:center;color:#9fb0cf;font-size:13px}

/* ---------- Pages de texte ---------- */
.page{padding:56px 0 80px}
.page .cadre{max-width:820px}
.page h1{font-size:clamp(30px,4vw,42px);font-weight:800}
.page h2{font-size:21px;margin-top:34px}
.page p{margin-top:12px}

/* ---------- Écrans moyens ---------- */
@media (max-width:1240px){
  .menu a{min-width:64px;font-size:12.5px;padding:8px 6px}
  .vitrine{grid-template-columns:1fr}
  .telephones{width:min(100%,560px);margin:0 auto 34px;height:740px}
}
@media (max-width:980px){
  .bouton-menu{display:inline-flex}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px 20px 18px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(20,40,90,.1)}
  .entete.menu-ouvert .menu{display:flex}
  .menu a{flex-direction:row;justify-content:flex-start;gap:12px;font-size:15px;padding:12px 14px;min-width:0}
  .menu a.actif{box-shadow:none}
  .espace{display:none}
  .menu .espace-mobile{display:flex;margin-top:8px;background:var(--green);color:#fff}
  .menu .espace-mobile:hover{background:#136b3e}
  .comparaison .cadre{grid-template-columns:1fr}
  .ouverture-grille{grid-template-columns:1fr;gap:0}
  .photo-ouverture{margin-top:26px;border-radius:24px;-webkit-mask-image:none;mask-image:none}
  .photo-ouverture{border-radius:24px;-webkit-mask-image:none;mask-image:none}
  .services-grille{grid-template-columns:1fr 1fr}
  .service img{height:180px}
  .widgets{grid-template-columns:1fr 1fr}
  .widget-photo{grid-column:1/-1}
  .qualites ul,.trois{grid-template-columns:1fr 1fr}
}
@media (min-width:981px){ .menu .espace-mobile{display:none} }
@media (max-width:600px){
  .ouverture{padding-top:30px}
  .services-grille,.widgets,.qualites ul,.trois{grid-template-columns:1fr}
  .service img{height:200px}
  .telephones{height:650px}
  .tel-1{left:50%;transform:translateX(-50%)}
  .tel-2{display:none}
  .atouts{gap:8px 16px}
  .contact .cadre{padding:26px 20px}
  .pied nav{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;width:100%}
  .pied .marque-slogan{display:none}
  .section{padding:56px 0}
}

/* Étiquette « Bientôt » sur une fonction à venir */
.bientot{position:absolute;top:12px;right:12px;z-index:1;background:#fff;color:var(--vert-icone);font-size:12px;font-weight:800;border-radius:999px;padding:4px 11px;box-shadow:0 4px 12px rgba(20,40,90,.16)}

/* =====================================================================
   ANIMATIONS AU DÉFILEMENT — 100 % CSS, sans script
   - À l'ouverture : le titre, le texte, le bouton, la photo et les
     téléphones apparaissent l'un après l'autre.
   - En descendant : les blocs montent doucement en apparaissant, la photo
     d'accueil zoome légèrement, une barre verte en haut suit la lecture.
   - Navigateurs sans « animations liées au défilement » (Firefox, anciens
     Safari) : la page s'affiche simplement, sans effet, rien n'est caché.
   - Si le visiteur a demandé « réduire les animations » : aucun effet.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){

  @keyframes mv-monte{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
  @keyframes mv-zoom{from{opacity:0;scale:1.05}to{opacity:1;scale:1}}

  /* Ouverture de la page */
  .ouverture h1{animation:mv-monte .75s cubic-bezier(.2,.7,.2,1) both}
  .ouverture .chapo{animation:mv-monte .75s .12s cubic-bezier(.2,.7,.2,1) both}
  .ouverture .bouton{animation:mv-monte .75s .22s cubic-bezier(.2,.7,.2,1) both}
  .atouts{animation:mv-monte .75s .32s cubic-bezier(.2,.7,.2,1) both}
  .photo-ouverture{animation:mv-zoom 1s .1s cubic-bezier(.2,.7,.2,1) both}
  .tel-1{animation:mv-monte .9s .35s cubic-bezier(.2,.7,.2,1) both}
  .tel-2{animation:mv-monte .9s .55s cubic-bezier(.2,.7,.2,1) both}

  @supports (animation-timeline: view()){
    @keyframes mv-revele{from{opacity:0;translate:0 46px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
    @keyframes mv-gauche{from{opacity:0;translate:-40px 0}to{opacity:1;translate:0 0}}
    @keyframes mv-droite{from{opacity:0;translate:40px 0}to{opacity:1;translate:0 0}}
    @keyframes mv-photo{to{scale:1.08}}
    @keyframes mv-ombre{to{box-shadow:0 8px 26px rgba(16,44,88,.12)}}
    @keyframes mv-lecture{to{scale:1 1}}

    /* Blocs qui montent en apparaissant */
    .service,.widget,.qualites li,.bloc,.questions details,.carte-compare,
    .section h2,.section .intro,.section .etiquette,.coches li,.contact .cadre,.apercu .etiquette{
      animation:mv-revele linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 75%;
    }
    /* Effet « cascade » : chaque carte un peu après la précédente */
    .services-grille .service:nth-child(2),.widgets .widget:nth-child(2),.qualites li:nth-child(2),.trois .bloc:nth-child(2){animation-range:entry 8% entry 83%}
    .services-grille .service:nth-child(3),.widgets .widget:nth-child(3),.qualites li:nth-child(3),.trois .bloc:nth-child(3){animation-range:entry 16% entry 91%}
    .services-grille .service:nth-child(4),.qualites li:nth-child(4){animation-range:entry 24% entry 99%}

    /* Photos entrée / sortie : l'une arrive de la gauche, l'autre de la droite
       (le cadre les rogne pendant le glissement : jamais de défilement de côté) */
    .deux-photos{overflow:hidden}
    .deux-photos figure:nth-child(1){animation:mv-gauche linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
    .deux-photos figure:nth-child(2){animation:mv-droite linear both;animation-timeline:view();animation-range:entry 10% entry 90%}

    /* Photo d'accueil : léger zoom pendant qu'on descend */
    .photo-ouverture img{animation:mv-photo linear both;animation-timeline:scroll(root);animation-range:0 700px}

    /* En-tête : une ombre apparaît dès qu'on descend */
    .entete{animation:mv-ombre linear both;animation-timeline:scroll(root);animation-range:0 90px}

    /* Barre de lecture verte sous l'en-tête */
    .entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
      background:linear-gradient(90deg,var(--green-2),var(--blue));transform-origin:0 50%;scale:0 1;
      animation:mv-lecture linear both;animation-timeline:scroll(root)}
  }
}