/* =========================================================
   TIORO IMMO — feuille de style de la maquette
   Marine #0E2A47 · Or #C79A3B · Vert nature #2F6B4F
   ========================================================= */

:root{
  --marine:#0E2A47;  --marine-900:#081B2F; --marine-700:#16395C; --marine-100:#E7ECF2;
  --or:#C79A3B;      --or-600:#A87F27;     --or-100:#F7EFDD;
  --or-texte:#7E5F1C; /* or assombri, reserve au texte sur fond clair — contraste 5.9:1 */
  --vert:#2F6B4F;    --vert-700:#23543D;   --vert-100:#E6EFEA;
  --papier:#FFFFFF;  --fond:#F6F5F1;       --encre:#1B2430;
  --gris:#6E7480;    --gris-clair:#9AA0AA; --trait:#E3E1DA;
  --radius:8px;      --ombre:0 2px 14px rgba(14,42,71,.07);
  --ombre-forte:0 10px 34px rgba(14,42,71,.14);
  --font:'Inter','Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--encre);background:var(--papier);
     font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ---------- typographie ---------- */
h1,h2,h3,h4{line-height:1.2;color:var(--marine);font-weight:700}
h1{font-size:clamp(28px,5.4vw,46px);letter-spacing:-.5px}
h2{font-size:clamp(23px,3.4vw,32px);letter-spacing:-.3px}
h3{font-size:19px}
.sur{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;
     text-transform:uppercase;color:var(--or-texte);margin-bottom:12px}
.sur--vert{color:var(--vert)}
.sur--clair{color:var(--or)}
.chapeau{font-size:17px;color:var(--gris);max-width:60ch}
.mini{font-size:13px;color:var(--gris)}
.centre{text-align:center}
.centre .chapeau{margin-left:auto;margin-right:auto}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:6px;
     font-size:14.5px;font-weight:600;letter-spacing:.02em;border:1.5px solid transparent;
     cursor:pointer;transition:.18s;white-space:nowrap}
.btn--or{background:var(--or);color:var(--marine)}
.btn--or:hover{background:var(--or-600)}
.btn--marine{background:var(--marine);color:#fff}
.btn--marine:hover{background:var(--marine-700)}
.btn--vert{background:var(--vert);color:#fff}
.btn--vert:hover{background:var(--vert-700)}
.btn--ligne{border-color:var(--marine);color:var(--marine)}
.btn--ligne:hover{background:var(--marine);color:#fff}
.btn--ligne-clair{border-color:rgba(255,255,255,.5);color:#fff}
.btn--ligne-clair:hover{background:#fff;color:var(--marine)}
.btn--bloc{width:100%;justify-content:center}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
        backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.entete .wrap{max-width:1400px}
.entete__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:140px}
.entete__logo img{height:100px;width:auto}
.entete__logo .logo--compact{display:none}
.nav{display:flex;flex-wrap:nowrap;justify-self:center;align-self:stretch;
     gap:clamp(12px,1.4vw,24px)}          /* l'espacement se resserre tout seul si besoin */
/* la zone survolee occupe toute la hauteur de l'en-tete (pour que le sous-menu
   reste accessible a la souris), mais le trait dore se dessine juste sous le texte */
.nav>a,.nav__lien{position:relative;display:flex;align-items:center;gap:5px;height:100%;
       font-size:16.5px;font-weight:700;color:var(--marine);
       transition:color .15s;white-space:nowrap}
.nav>a::after,.nav__lien::after{content:"";position:absolute;left:0;right:0;
       top:calc(50% + 13px);height:3px;border-radius:2px;background:var(--or);
       transform:scaleX(0);transform-origin:center;
       transition:transform .24s cubic-bezier(.4,0,.2,1)}
.nav>a:hover::after,.nav__lien:hover::after,
.nav__grp:hover .nav__lien::after,
.nav>a.actif::after,.nav__lien.actif::after{transform:scaleX(1)}
.nav>a.actif,.nav__lien.actif{color:var(--or-texte)}
.chev{width:15px;height:15px;flex:0 0 auto;transition:transform .18s}
.nav__grp{position:relative;display:flex;align-self:stretch}
.nav__grp:hover .chev{transform:rotate(180deg)}

/* ---------- sous-menu deroulant ---------- */
.sousmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);
          min-width:236px;background:#fff;border:1px solid var(--trait);
          border-radius:0 0 8px 8px;border-top:3px solid var(--or);
          box-shadow:var(--ombre-forte);padding:8px;z-index:70;
          opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);
          transition:opacity .16s,transform .16s,visibility .16s}
.nav__grp:hover .sousmenu,.nav__grp:focus-within .sousmenu{
          opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sousmenu a{display:block;padding:11px 15px;font-size:15px;font-weight:600;
            color:var(--marine);border-radius:5px;white-space:nowrap;transition:.13s}
.sousmenu a:hover{background:var(--marine-100)}
.sousmenu a.actif{color:var(--or-texte);background:var(--or-100)}
.entete__cta{display:flex;gap:9px;align-items:center;justify-self:end}
/* le menu est centre dans l'espace libre entre le logo et les icones ;
   un centrage optique strict exigerait 1436 px de contenu, au-dela de la largeur du site */
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--marine);margin:4px 0}
@media(max-width:1240px){
  .entete__in{height:112px;grid-template-columns:auto 1fr}
  .nav{display:none;justify-self:stretch;position:absolute;top:112px;left:0;right:0;background:#fff;
       flex-direction:column;gap:0;padding:8px 20px 18px;border-bottom:1px solid var(--trait);
       box-shadow:var(--ombre)}
  .nav.ouvert{display:flex}
  .nav>a,.nav__lien{height:auto;justify-content:center;padding:15px 0;
       border-bottom:1px solid var(--trait);text-align:center;font-size:17px}
  .nav>a::after,.nav__lien::after{display:none}
  .nav__grp{flex-direction:column;align-self:auto}
  .sousmenu{position:static;transform:none;opacity:1;visibility:visible;
            min-width:0;border:0;border-radius:0;box-shadow:none;padding:0;
            background:var(--fond);display:none}
  .nav__grp.ouvert .sousmenu{display:block}
  .nav__grp.ouvert .chev{transform:rotate(180deg)}
  .sousmenu a{text-align:center;padding:13px 0;font-size:15.5px;border-radius:0;
              border-bottom:1px solid var(--trait)}
  .burger{display:block;margin-left:auto}
  .entete__cta .btn--ligne{display:none}
  /* menu replie : le logo complet peut rester genereux */
  .entete__logo img{height:auto;max-height:92px;max-width:calc(100vw - 200px)}
}

/* ---------- bandeau d'accroche ---------- */
.hero{background:var(--marine);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 400px at 78% 12%,rgba(199,154,59,.20),transparent 62%)}
/* Les 20px lateraux viennent de .wrap : les redonner ici, sinon le
   raccourci « padding » les remet a zero et le texte touche les bords.
   En haut, juste ce qu'il faut pour que la pastille ne colle pas au
   menu : l'ancienne valeur de 76px creusait une bande bleue vide. */
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
          gap:52px;align-items:center;padding:26px 20px 84px}
.hero h1{color:#fff}
.hero .sur,.section--marine .sur,.appel .sur{color:var(--or)}
.hero .chapeau{color:#C3CEDC;font-size:18px;margin-top:20px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero__points{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;
              padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero__point{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:#C3CEDC;max-width:190px}
.hero__point b{display:block;color:#fff;font-size:14px;margin-bottom:2px}
.puce{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(199,154,59,.22);
      color:var(--or);display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:2px}
/* ---------- annonce « Nouveau ! » du bandeau ---------- */
/* Bandeau cliquable place au-dessus du titre. Il doit se voir sans
   ecraser le h1 : d'ou la pastille doree pleine pour « Nouveau ! »,
   et le texte en blanc sur un fond dore tres dilue. */
.nouveaute{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;
           padding:7px 18px 7px 7px;border-radius:100px;color:#fff;
           background:rgba(199,154,59,.16);border:1px solid rgba(199,154,59,.45);
           font-size:14px;font-weight:600;line-height:1.3;transition:.15s}
.nouveaute:hover,.nouveaute:focus-visible{background:rgba(199,154,59,.28);
           border-color:var(--or);color:#fff}
.nouveaute__et{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
               padding:5px 12px;border-radius:100px;background:var(--or);color:#fff;
               font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.nouveaute__et svg{width:13px;height:13px;flex:0 0 auto}
/* Sur deux lignes, sans cela, « membre ! » reste seul en bas. */
.nouveaute__txt{text-wrap:balance}
@media(max-width:560px){
  .nouveaute{gap:9px;padding:7px 14px 7px 7px;font-size:13px;align-items:flex-start}
  .nouveaute__et{margin-top:1px}
}

@media(max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:34px;padding:20px 20px 58px}
}

/* ---------- blocs photo de réservation ---------- */
.photo{position:relative;background:var(--marine-100);
  border-radius:var(--radius);display:grid;place-items:center;overflow:hidden}
/* Les photos publiees vivent dans assets/villes/ ; assets/photos/ garde
   les originaux, plus lourds, qui ne sont pas servis aux visiteurs. */
.photo img,.photo>svg.illus{width:100%;height:100%;object-fit:cover;display:block}
.photo::after{content:attr(data-note);position:absolute;bottom:10px;left:10px;
  background:rgba(14,42,71,.78);color:#fff;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:4px;opacity:.9}
.photo--sansnote::after{display:none}
.photo--marine{background:
  repeating-linear-gradient(45deg,#16395C 0 12px,#12324F 12px 24px)}
.photo svg{opacity:.42;width:52px;height:52px}
.photo--16x9{aspect-ratio:16/9}
.photo--4x3{aspect-ratio:4/3}
.photo--1x1{aspect-ratio:1/1}
.photo--haute{aspect-ratio:3/4}

/* ---------- barre de recherche ---------- */
.recherche{background:#fff;border-radius:var(--radius);box-shadow:var(--ombre-forte);
           padding:16px;display:grid;grid-template-columns:.7fr repeat(3,1fr) auto;gap:12px;
           margin-top:-42px;position:relative;z-index:12}
.champ label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
             text-transform:uppercase;color:var(--gris-clair);margin-bottom:5px}
.champ select,.champ input{width:100%;border:1px solid var(--trait);border-radius:5px;
  padding:10px 11px;font-size:14px;font-family:inherit;color:var(--marine);background:#fff}
.champ select:focus,.champ input:focus{outline:2px solid var(--or-100);border-color:var(--or)}
.recherche .btn{align-self:end;height:41px}
@media(max-width:880px){
  .recherche{grid-template-columns:1fr 1fr;margin-top:-26px}
  .recherche .btn{grid-column:1/-1}
}

/* ---------- sections ---------- */
/* 36 px en haut et en bas, soit 72 px entre deux blocs qui se
   suivent. Etait a 80 px, ce qui creait 160 px de vide. */
.section{padding:36px 0}
.section--fond{background:var(--fond)}
.section--marine{background:var(--marine);color:#fff}
.section--marine h2{color:#fff}
.section--marine .chapeau{color:#B9C6D6}
.section__tete{display:flex;align-items:flex-end;justify-content:space-between;
               gap:24px;margin-bottom:38px}
@media(max-width:760px){.section{padding:28px 0}.section__tete{flex-direction:column;align-items:flex-start}}

/* ---------- grilles ---------- */
.grille{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- carte terrain ---------- */
.terrain{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);
         overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.terrain:hover{box-shadow:var(--ombre-forte);transform:translateY(-3px)}
.terrain__img{position:relative}
.terrain__corps{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.terrain__lieu{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
               color:var(--or);margin-bottom:7px}
.terrain h3{margin-bottom:10px;font-size:18px}
.terrain__specs{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--gris);
                padding:12px 0;border-top:1px solid var(--trait);margin-top:auto}
.terrain__specs span{display:flex;align-items:center;gap:6px}
.terrain__pied{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
               padding-top:12px;border-top:1px solid var(--trait)}
.prix{font-size:21px;font-weight:700;color:var(--marine);letter-spacing:-.3px}
.prix small{font-size:12px;font-weight:500;color:var(--gris);letter-spacing:0}
.lien-or{font-size:13.5px;font-weight:600;color:var(--or-texte)}
.lien-or:hover{text-decoration:underline}

/* ---------- pastilles ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
       letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:4px}
.badge--vert{background:var(--vert-100);color:var(--vert-700)}
.badge--or{background:var(--or-100);color:#6B5520}
.badge--marine{background:var(--marine-100);color:var(--marine)}
.badge--flottant{position:absolute;top:12px;left:12px;background:rgba(47,107,79,.95);color:#fff}
.badge--alerte{background:#FBE9E7;color:#A2392B}

/* ---------- étapes ---------- */
.etape{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);padding:26px 22px}
.section--marine .etape{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.etape__num{width:38px;height:38px;border-radius:50%;background:var(--or);color:#fff;
            display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:16px}
.etape h3{margin-bottom:9px;font-size:17px}
.section--marine .etape h3{color:#fff}
.etape p{font-size:14.5px;color:var(--gris)}
.section--marine .etape p{color:#B9C6D6}

/* ---------- tableau ---------- */
.tableau{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--trait);
         border-radius:var(--radius);overflow:hidden;font-size:14.5px}
.tableau th,.tableau td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--trait);
                        vertical-align:top}
.tableau th{background:#FAF9F6;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
            color:var(--gris-clair);font-weight:700}
.tableau tr:last-child td{border-bottom:0}
.tableau td b{color:var(--marine)}
.tableau-scroll{overflow-x:auto}

/* ---------- questions fréquentes ---------- */
.faq{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);overflow:hidden}
.faq details{border-bottom:1px solid var(--trait)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:19px 22px;cursor:pointer;font-weight:600;color:var(--marine);
             font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or-texte);font-size:21px;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{background:#FAF9F6}
.faq p{padding:0 22px 20px;font-size:14.5px;color:var(--gris);max-width:78ch}

/* ---------- encarts ---------- */
.encart{border-left:3px solid var(--or);background:var(--or-100);padding:18px 22px;
        border-radius:0 var(--radius) var(--radius) 0;font-size:14.5px;color:#5F4B1C}
.encart--alerte{border-left-color:#C0492F;background:#FBE9E7;color:#8C3626}
.encart--vert{border-left-color:var(--vert);background:var(--vert-100);color:var(--vert-700)}
.encart b{display:block;margin-bottom:4px;color:inherit}

/* ---------- bandeau d'appel ---------- */
.appel{background:var(--marine);color:#fff;border-radius:var(--radius);padding:44px 40px;
       display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.appel h2{color:#fff;margin-bottom:8px}
.appel p{color:#B9C6D6;font-size:15.5px;max-width:52ch}

/* ---------- pied de page ---------- */
.pied{background:var(--marine-900);color:#9FB0C4;padding:62px 0 26px;font-size:14px}
.pied__grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;
              padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
.pied img{height:auto;max-height:94px;max-width:100%;margin-bottom:18px}
.pied h3,.pied h4{color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.pied ul{list-style:none}
.pied li{margin-bottom:9px}
.pied a:hover{color:var(--or)}
.pied__bas{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
           padding-top:20px;font-size:12.5px;color:#6E8095}
@media(max-width:860px){.pied__grille{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied__grille{grid-template-columns:1fr}}

/* ---------- fil d'ariane ---------- */
.fil{font-size:13px;color:var(--gris);padding:20px 0}
.fil a:hover{color:var(--or)}
.fil span{color:var(--gris-clair);margin:0 7px}

/* ---------- fiche terrain ---------- */
.fiche{display:grid;grid-template-columns:1.6fr .9fr;gap:40px;align-items:start;padding-bottom:70px}
@media(max-width:980px){.fiche{grid-template-columns:1fr;gap:28px}}
.galerie{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.galerie .photo:first-child{grid-row:span 2}
.panneau{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);
         padding:26px;position:sticky;top:160px;box-shadow:var(--ombre)}
@media(max-width:980px){.panneau{position:static}}
.panneau .prix{font-size:30px;display:block;margin:6px 0 4px}
.liste-check{list-style:none;margin:16px 0}
.liste-check li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14.5px;color:var(--gris)}
.liste-check li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2px solid var(--vert);border-bottom:2px solid var(--vert);transform:rotate(-45deg)}
.donnees{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--trait);
         border:1px solid var(--trait);border-radius:var(--radius);overflow:hidden;margin:26px 0}
.donnees div{background:#fff;padding:16px 18px}
.donnees dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
            color:var(--gris-clair);margin-bottom:5px}
.donnees dd{font-size:15.5px;font-weight:600;color:var(--marine)}
.carte-vide{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--trait);
  background:
   linear-gradient(rgba(14,42,71,.045) 1px,transparent 1px) 0 0/34px 34px,
   linear-gradient(90deg,rgba(14,42,71,.045) 1px,transparent 1px) 0 0/34px 34px,
   var(--marine-100);
  display:grid;place-items:center;text-align:center;padding:20px;position:relative}
.epingle{width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--or);
         transform:rotate(-45deg);margin:0 auto 14px;box-shadow:0 4px 12px rgba(14,42,71,.25)}

/* ---------- simulateur ---------- */
.simu{background:var(--fond);border:1px solid var(--trait);border-radius:var(--radius);padding:24px}
.simu__ligne{display:flex;justify-content:space-between;align-items:center;gap:14px;
             padding:11px 0;border-bottom:1px solid var(--trait);font-size:14.5px}
.simu__ligne:last-of-type{border-bottom:0}
.simu__ligne b{color:var(--marine);font-size:17px}
.simu input[type=range]{width:100%;accent-color:var(--or);margin-top:6px}

/* ---------- filtres catalogue ---------- */
.filtres{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);
         padding:18px;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;
         margin-bottom:30px;box-shadow:var(--ombre)}
@media(max-width:880px){.filtres{grid-template-columns:1fr 1fr}.filtres .btn{grid-column:1/-1}}
.resultats{display:flex;justify-content:space-between;align-items:center;gap:16px;
           margin-bottom:22px;flex-wrap:wrap}
.resultats b{color:var(--marine)}

/* ---------- divers ---------- */
.rappel{background:var(--or-100);border-top:1px solid var(--or);border-bottom:1px solid var(--or);
        padding:11px 0;font-size:13px;color:#5F4B1C;text-align:center}
.avis{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);padding:26px}
.avis p{font-size:15px;color:var(--gris);font-style:italic;margin-bottom:18px}
.avis__qui{display:flex;align-items:center;gap:12px}
.avis__ini{width:42px;height:42px;border-radius:50%;background:var(--marine-100);
           color:var(--marine);display:grid;place-items:center;font-weight:700;font-size:14px}
.avis__qui b{display:block;font-size:14px;color:var(--marine)}
.avis__qui small{font-size:12.5px;color:var(--gris-clair)}
.ville{position:relative;border-radius:var(--radius);overflow:hidden;color:#fff}
.ville__txt{position:absolute;left:0;right:0;bottom:0;padding:20px;
            background:linear-gradient(transparent,rgba(8,27,47,.9))}
.ville b{font-size:18px;display:block}
.ville small{font-size:12.5px;color:#C3CEDC}
/* ---------- WhatsApp ---------- */
.ico,.wa,.mail{display:inline-flex;line-height:0;border-radius:50%;transition:.18s;
     position:relative;background:none;border:0;padding:0;cursor:pointer}
.ico img,.wa img,.mail img{width:46px;height:46px}
.ico:hover,.wa:hover,.mail:hover{transform:scale(1.07)}
.ico:focus-visible,.wa:focus-visible,.mail:focus-visible{outline:3px solid var(--or);outline-offset:3px}
@media(max-width:1240px){.ico img,.wa img,.mail img{width:42px;height:42px}}
@media(max-width:420px){.ico img,.wa img,.mail img{width:37px;height:37px}}

/* ---------- selecteur de langue ---------- */
.lang{position:relative;display:inline-flex}
.lang__code{position:absolute;inset:0;display:grid;place-items:center;
            font-size:13.5px;font-weight:800;color:var(--marine);letter-spacing:.3px;
            pointer-events:none}
@media(max-width:420px){.lang__code{font-size:12px}}
.lang__menu{position:absolute;top:calc(100% + 10px);right:0;min-width:190px;background:#fff;
            border:1px solid var(--trait);border-top:3px solid var(--or);border-radius:0 0 8px 8px;
            box-shadow:var(--ombre-forte);padding:7px;z-index:80;display:none}
.lang__menu.ouvert{display:block}
.lang__menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;
              padding:11px 14px;font-size:15px;font-weight:600;color:var(--marine);
              border-radius:5px;transition:.13s}
.lang__menu a em{font-style:normal;font-size:11px;font-weight:600;color:var(--gris-clair);
                 text-transform:uppercase;letter-spacing:.1em}
.lang__menu a:hover{background:var(--marine-100)}
.lang__menu a.actif{background:var(--or-100);color:var(--or-texte)}
.btn svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}

/* ---------- lettre d'information ---------- */
.infolettre{background:var(--marine-900);color:#C3CEDC;padding:38px 0}
.infolettre__in{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.infolettre h2{color:#fff;margin-bottom:12px}
.infolettre p{font-size:15px;max-width:52ch;line-height:1.7}
.infolettre .sur{color:var(--or)}
.infolettre__form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
                  border-radius:var(--radius);padding:26px}
.infolettre .champ{margin-bottom:14px}
.infolettre .champ label{color:#8FA3B8}
.infolettre__avantages{list-style:none;margin-top:18px}
.infolettre__avantages li{position:relative;padding-left:24px;margin-bottom:8px;font-size:14px}
.infolettre__avantages li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(-45deg)}
.case{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:#9FB0C4;
      margin:4px 0 18px;cursor:pointer;line-height:1.55}
.case input{margin-top:3px;accent-color:var(--or);flex:0 0 auto;width:16px;height:16px}
.nl-ok{display:none;margin-top:16px;background:rgba(47,107,79,.28);border-left:3px solid var(--vert);
       padding:13px 16px;border-radius:0 6px 6px 0;font-size:13.5px;color:#DCEAE1}
@media(max-width:860px){.infolettre__in{grid-template-columns:1fr;gap:28px}}

/* ---------- sous-navigation de rubrique ---------- */
.sousnav{position:sticky;top:140px;z-index:50;background:#fff;
         border-bottom:1px solid var(--trait);box-shadow:0 1px 8px rgba(14,42,71,.05)}
.sousnav__in{display:flex;gap:30px;overflow-x:auto;padding:0 20px}
.sousnav a{display:flex;align-items:center;gap:7px;padding:16px 0;font-size:14px;
           font-weight:500;color:var(--gris);white-space:nowrap;
           border-bottom:2px solid transparent;transition:.15s}
.sousnav a b{color:var(--or-texte);font-weight:700}
.sousnav a:hover{color:var(--marine);border-bottom-color:var(--or)}
@media(max-width:1240px){.sousnav{top:112px}.sousnav__in{gap:22px}}
.rubrique{border-top:3px solid var(--or);padding-top:30px;margin-bottom:34px}
.rubrique .sur{color:var(--or-texte)}
[id]{scroll-margin-top:205px}

/* sous 560 px le slogan du logo deviendrait illisible :
   on bascule sur la version compacte, icone + nom seuls */
@media(max-width:560px){
  .entete__logo .logo--complet{display:none}
  .entete__logo .logo--compact{display:block;height:auto;max-height:60px;max-width:calc(100vw - 190px)}
  .pied img{max-height:76px}
}

.pied__grille--5{grid-template-columns:1.6fr 1fr 1fr 1.15fr 1.15fr;gap:30px}
@media(max-width:1100px){.pied__grille--5{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.pied__grille--5{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.pied__grille--5{grid-template-columns:1fr}}

/* ---------- tuiles de categories ---------- */
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.g5{grid-template-columns:repeat(2,1fr)}}
.tuile{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);
       padding:24px 16px;text-align:center;transition:.18s;display:block}
.tuile:hover{border-color:var(--or);box-shadow:var(--ombre-forte);transform:translateY(-3px)}
.tuile svg{width:36px;height:36px;margin:0 auto 14px}
.tuile b{display:block;font-size:15.5px;color:var(--marine);margin-bottom:3px}
.tuile small{font-size:12.5px;color:var(--gris-clair)}

/* ---------- pastilles de navigation entre categories ---------- */
.puces-lignes{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:6px}
.puce-lien{display:inline-block;padding:8px 15px;border:1px solid var(--trait);
           border-radius:100px;font-size:13.5px;font-weight:600;color:var(--marine);
           background:#fff;transition:.15s;white-space:nowrap}
.puce-lien:hover{border-color:var(--or);color:var(--or-texte)}
.puce-lien.actif{background:var(--marine);border-color:var(--marine);color:#fff}

/* ---------- onglets connexion / inscription ---------- */
.onglets{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--fond);
         border-radius:6px;padding:5px;margin-bottom:22px}
.onglet{border:0;background:none;padding:11px 8px;border-radius:5px;cursor:pointer;
        font-family:inherit;font-size:14px;font-weight:700;color:var(--gris);transition:.15s}
.onglet:hover{color:var(--marine)}
.onglet.actif{background:#fff;color:var(--marine);box-shadow:var(--ombre)}
.volet{display:none}
.volet.actif{display:block}

/* ---------- tableau de bord client ---------- */
.tdb{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start}
/* min-width:auto empeche par defaut une colonne de grille de se reduire
   sous la largeur de son contenu : sur mobile, le tableau de bord
   depassait alors de l ecran. */
.tdb>*{min-width:0}
@media(max-width:860px){.tdb{grid-template-columns:1fr}}
.tdb__menu{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);
           padding:18px;display:flex;flex-direction:column;gap:2px}
.tdb__qui{display:flex;align-items:center;gap:11px;padding-bottom:16px;margin-bottom:12px;
          border-bottom:1px solid var(--trait)}
/* Attention : la regle .tdb__menu span plus bas met TOUS les span de
   la colonne en flex, avec padding et justify-content — elle vise les
   entrees de menu. Appliquee a l enveloppe du nom, elle posait le nom
   et l adresse cote a cote dans deux colonnes etroites, ou le texte se
   coupait lettre par lettre. On la neutralise ici.
   min-width:0 est indispensable : sans lui un bloc de grille ou de
   flex refuse de se reduire sous la largeur de son contenu, et une
   adresse electronique deborde de l encadre. */
.tdb__qui>span:last-child{display:block;flex:1 1 auto;min-width:0;
                          padding:0;font-weight:400;color:inherit}
.tdb__qui>.avis__ini{flex:0 0 auto;padding:0}
.tdb__qui b{display:block;font-size:14.5px;color:var(--marine);line-height:1.3}
/* Une adresse n a pas d espace ou se couper : on l autorise a rompre
   n importe ou plutot que de la laisser depasser. */
.tdb__qui b,.tdb__qui small{overflow-wrap:anywhere}
.tdb__qui small{display:block;margin-top:3px;line-height:1.35}
.tdb__menu a,.tdb__menu span{display:flex;align-items:center;justify-content:space-between;gap:8px;
             padding:10px 12px;border-radius:5px;font-size:14.5px;font-weight:600;
             color:var(--gris);cursor:default}
.tdb__menu a.actif,.tdb__menu span.actif{background:var(--marine);color:#fff}
.pastille{background:var(--or);color:var(--marine);font-size:11.5px;font-weight:800;
          min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 6px}
.tdb__menu .actif .pastille{background:var(--or)}
.tdb__corps{background:#fff;border:1px solid var(--trait);border-radius:var(--radius);padding:26px}
.tdb__titre{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-clair);
            margin-bottom:14px;font-weight:700}
.stat{background:var(--fond);border:1px solid var(--trait);border-radius:var(--radius);
      padding:18px;text-align:center}
.stat b{display:block;font-size:30px;color:var(--marine);line-height:1.1}
.stat small{font-size:12.5px;color:var(--gris)}
.stat--or{background:var(--or-100);border-color:var(--or)}
.stat--or b{color:var(--or-texte)}

/* ---------- jalons d'avancement ---------- */
.jalons{position:relative;padding-left:26px}
.jalons::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--trait)}
.jalon{position:relative;padding:0 0 20px}
.jalon:last-child{padding-bottom:0}
.jalon::before{content:"";position:absolute;left:-24px;top:4px;width:16px;height:16px;
               border-radius:50%;background:#fff;border:2px solid var(--trait)}
.jalon.fait::before{background:var(--vert);border-color:var(--vert)}
.jalon.encours::before{background:var(--or);border-color:var(--or);
               box-shadow:0 0 0 4px rgba(199,154,59,.22)}
.jalon b{display:block;font-size:15px;color:var(--gris-clair)}
.jalon.fait b,.jalon.encours b{color:var(--marine)}
.jalon small{font-size:12.5px;color:var(--gris)}

/* ---------- accroches de mise en page ---------- */
.tuiles{margin-top:4px}
.lang__btn{line-height:0}
.depot-form{display:block}

/* ---------- comptes clients ---------- */
.onglets{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--fond);
         border-radius:6px;padding:5px;margin-bottom:22px}
.onglet{border:0;background:none;padding:11px 8px;border-radius:5px;cursor:pointer;
        font-family:inherit;font-size:14px;font-weight:700;color:var(--gris);transition:.15s}
.onglet:hover{color:var(--marine)}
.onglet.actif{background:#fff;color:var(--marine);box-shadow:var(--ombre)}
.volet{display:none}
.volet.actif{display:block}
.lien-voir{border:0;background:none;padding:0;margin-left:auto;cursor:pointer;
           font-family:inherit;font-size:11.5px;font-weight:700;color:var(--or-texte);
           text-transform:uppercase;letter-spacing:.06em}
.lien-voir:hover{text-decoration:underline}
.champ label{display:flex;align-items:center;gap:8px}
.force__barre{height:5px;background:var(--fond);border-radius:3px;overflow:hidden}
.force__barre i{display:block;height:100%;width:0;background:var(--trait);
                border-radius:3px;transition:width .25s,background .25s}
.force span{display:block;font-size:11.5px;font-weight:700;margin-top:5px;min-height:16px}
.msg{display:none}

/* ---------- accessibilité : texte réservé aux lecteurs d'écran ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- lien d'évitement ---------- */
.evitement{position:absolute;left:-9999px;top:0;z-index:200;background:var(--marine);
           color:#fff;padding:12px 20px;border-radius:0 0 6px 0;font-weight:700;
           font-size:14px;text-decoration:none}
.evitement:focus{left:0}

/* ---------- catalogue : sections masquées par le filtrage ---------- */
[hidden]{display:none !important}


/* ---------- etiquettes d etat, espace client ----------
   Reprises de la feuille du back office : le client suit ses depots
   avec le meme vocabulaire visuel que l agence. Le rouge n existe
   pas dans cette palette, il est ecrit en clair. */
.et{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
    padding:5px 11px;border-radius:20px;white-space:nowrap}
.et::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.et--brouillon{background:#EEF0F3;color:#6E7480}
.et--soumis{background:var(--or-100);color:var(--or-texte)}
.et--verif{background:var(--marine-100);color:var(--marine-700)}
.et--publie{background:var(--vert-100);color:var(--vert-700)}
.et--refuse{background:#FBE9E7;color:#B03A3A}
.et--vendu{background:#EEF0F3;color:#6E7480}


/* Une fois le client connecte, le panneau de connexion disparait :
   la grille passe en pleine largeur plutot que de laisser une
   colonne vide a droite. */
.fiche--seule{grid-template-columns:1fr}

/* Sur telephone les deux colonnes s empilent, et la connexion tombait
   apres les quatre cartes : deux ecrans et demi a parcourir avant
   d atteindre le formulaire. Un client qui revient veut se connecter,
   pas relire les avantages du compte. On la remonte.
   Sans effet une fois connecte : la colonne est alors masquee. */
@media(max-width:980px){
  #ficheCompte>#colonneConnexion{order:-1}
}


/* ---------- espace client, une fois connecte ----------
   Les sections du site respirent a 80 px : c est juste sur des pages
   de presentation ou les fonds alternent. Une fois connecte, il ne
   reste que quatre blocs empiles et ces marges se cumulent — 160 px
   de vide entre chacun, 230 px par endroits. On resserre, sans
   toucher au reste du site. */
body.connecte .section{padding:26px 0}
body.connecte #espaceClient{padding-top:24px}
body.connecte .fiche{padding-bottom:0}
body.connecte .infolettre{padding:34px 0}

/* Deux blocs de meme fond qui se suivent etaient separes par le
   grand ecart. Resserres, il leur faut un filet pour ne pas se
   confondre. */
body.connecte .section:not(.section--fond) + .section:not(.section--fond){
  border-top:1px solid var(--trait)}