/* ==========================================================
   Deux : Points — Location de matériel d'interprétation
   Feuille de style commune
   ========================================================== */

:root{
  --bleu:        #2B3A8F;   /* bleu Majorelle — identité Deux:Points */
  --bleu-nuit:   #16205A;   /* fond des grandes surfaces sombres     */
  --bleu-abysse: #0D1440;   /* pied de page, survols                 */
  --sable:       #F3ECDE;   /* fond clair                            */
  --sable-clair: #FAF6EE;
  --rouille:     #AD4B2A;
  --safran:      #DE9F27;
  --encre:       #12142B;
  --gris:        #6A6E86;
  --ligne:       rgba(18,20,43,.14);
  --ligne-nuit:  rgba(243,236,222,.20);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --page: 1120px;
}

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

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

body{
  margin:0;
  background:var(--sable);
  color:var(--encre);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--safran);outline-offset:2px}

.page{max-width:var(--page);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.15rem;font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:68ch}

/* ---------- En-tête ---------------------------------------- */
.bandeau{background:var(--bleu-abysse);color:var(--sable);font-size:.82rem}
.bandeau .page{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;padding-block:7px}
.bandeau a{color:var(--sable)}

.entete{background:var(--bleu-nuit);color:var(--sable);position:sticky;top:0;z-index:40}
.entete .page{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.logo{display:flex;align-items:baseline;gap:9px;font-family:var(--serif);font-size:1.3rem;color:var(--sable)}
.logo:hover{text-decoration:none}
.logo b{font-weight:600}
.logo i{font-style:normal;color:var(--safran);font-size:1.5rem;line-height:0}
.logo span{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:rgba(243,236,222,.62)}

.nav{display:flex;gap:26px;align-items:center;font-size:.94rem}
.nav a{color:var(--sable);padding-block:4px;border-bottom:2px solid transparent}
.nav a:hover{text-decoration:none;border-bottom-color:var(--safran)}
.nav a[aria-current="page"]{border-bottom-color:var(--safran)}

.burger{display:none;background:none;border:1px solid var(--ligne-nuit);color:var(--sable);
  border-radius:4px;padding:7px 11px;font:inherit;font-size:.9rem;cursor:pointer}

@media (max-width:860px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bleu-nuit);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px;display:none;
    border-top:1px solid var(--ligne-nuit)}
  .nav.ouvert{display:flex}
  .nav a{width:100%;padding:11px 0;border-bottom:1px solid var(--ligne-nuit)}
}

/* ---------- Boutons ---------------------------------------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.97rem;
  padding:13px 24px;border-radius:2px;border:2px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.btn:hover{text-decoration:none}
.btn-safran{background:var(--safran);color:var(--encre)}
.btn-safran:hover{background:#c98c1c}
.btn-clair{background:transparent;color:var(--sable);border-color:var(--ligne-nuit)}
.btn-clair:hover{background:rgba(243,236,222,.10)}
.btn-bleu{background:var(--bleu);color:#fff}
.btn-bleu:hover{background:var(--bleu-abysse)}

/* ---------- Héros ------------------------------------------ */
.heros{background:var(--bleu-nuit);color:var(--sable);position:relative;overflow:hidden}
.heros::before{
  content:"";position:absolute;inset:0;
  background:url("../img/cabine-8.webp") center 38%/cover no-repeat;
  opacity:.62;
}
.heros::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--bleu-nuit) 16%,rgba(22,32,90,.84) 50%,rgba(13,20,64,.50));
}
.heros .page{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;padding-block:74px 82px}
.heros h1{color:var(--sable);margin-bottom:.35em}
.heros p{color:rgba(243,236,222,.86);font-size:1.06rem}
.heros-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

@media (max-width:900px){
  .heros .page{grid-template-columns:1fr;gap:38px;padding-block:52px 58px}
}

/* ---------- Configurateur (élément signature) --------------- */
/* le configurateur est dans le heros : on annule l'heritage de couleur clair */
.heros .config p,.heros .config label,.heros .config li{color:var(--encre)}
.heros .config .note,.heros .config .aide{color:var(--gris)}
.config{background:var(--sable-clair);color:var(--encre);border-radius:3px;
  box-shadow:0 22px 48px rgba(6,10,40,.34)}
.config-tete{background:var(--bleu);color:var(--sable);padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.config-tete strong{font-family:var(--sans);font-weight:600;font-size:.98rem}
.config-tete em{font-style:normal;font-size:.82rem;color:rgba(243,236,222,.74)}
.config-corps{padding:22px}

.champ{margin-bottom:18px}
.champ label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px}
.champ .aide{font-weight:400;color:var(--gris);font-size:.82rem}
.champ input[type=number],.champ select,.champ input[type=text],
.champ input[type=email],.champ input[type=date],.champ textarea{
  width:100%;font:inherit;font-size:.97rem;padding:11px 13px;
  border:1px solid var(--ligne);border-radius:2px;background:#fff;color:var(--encre)}
.champ textarea{min-height:120px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--bleu);outline:2px solid rgba(43,58,143,.22);outline-offset:0}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.duo{grid-template-columns:1fr}}

/* fiche technique calculée */
.fiche{border-top:1px solid var(--ligne);margin-top:4px;padding-top:16px}
.fiche-titre{font-size:.86rem;font-weight:600;color:var(--encre);margin-bottom:10px}
.fiche ul{list-style:none;margin:0 0 16px;padding:0}
.fiche li{display:flex;align-items:baseline;gap:12px;padding:7px 0;
  border-bottom:1px dotted var(--ligne)}
.fiche li:last-child{border-bottom:none}
.fiche .qte{font-family:var(--mono);font-size:1.12rem;font-weight:600;color:var(--bleu);
  min-width:3.2em;text-align:right}
.fiche .quoi{flex:1}
.fiche .note{color:var(--gris);font-size:.82rem;display:block}

/* ---------- Sections --------------------------------------- */
.section{padding-block:74px}
.section-sable{background:var(--sable)}
.section-clair{background:var(--sable-clair)}
.section-nuit{background:var(--bleu-nuit);color:var(--sable)}
.section-nuit h2{color:var(--sable)}
.section-nuit p{color:rgba(243,236,222,.84)}
.section-tete{max-width:64ch;margin-bottom:42px}

/* ---------- Inventaire (lignes, pas cartes) ----------------- */
.inventaire{border-top:2px solid var(--encre)}
.poste{display:grid;grid-template-columns:180px 1fr 230px;gap:30px;
  padding:30px 0;border-bottom:1px solid var(--ligne);align-items:start}
.poste img{width:170px;height:132px;object-fit:cover;border-radius:2px;background:#fff}
.poste h3{margin-bottom:.35em}
.poste p{margin-bottom:.6em;font-size:.97rem}
.poste dl{margin:0;font-size:.84rem;color:var(--gris)}
.poste dl div{display:flex;justify-content:space-between;gap:10px;
  padding:5px 0;border-bottom:1px dotted var(--ligne)}
.poste dt{color:var(--gris)}
.poste dd{margin:0;color:var(--encre);text-align:right;font-family:var(--mono);font-size:.8rem}

@media (max-width:860px){
  .poste{grid-template-columns:120px 1fr;gap:20px}
  .poste img{width:120px;height:100px}
  .poste dl{grid-column:1/-1}
}

/* ---------- Galerie ---------------------------------------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.galerie figure{margin:0;position:relative;background:var(--bleu-nuit);border-radius:2px;overflow:hidden}
.galerie button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.galerie img{width:100%;height:230px;object-fit:cover}
.galerie figcaption{padding:11px 13px;font-size:.85rem;color:var(--sable);
  background:var(--bleu-nuit)}

/* visionneuse */
.visionneuse{position:fixed;inset:0;background:rgba(9,12,38,.94);z-index:80;
  display:none;align-items:center;justify-content:center;padding:24px}
.visionneuse.ouverte{display:flex}
.visionneuse img{max-width:min(1100px,92vw);max-height:84vh;object-fit:contain;border-radius:2px}
.visionneuse .legende{position:absolute;bottom:22px;left:0;right:0;text-align:center;
  color:var(--sable);font-size:.9rem;padding:0 24px}
.visionneuse .fermer{position:absolute;top:18px;right:20px;background:none;border:1px solid var(--ligne-nuit);
  color:var(--sable);font:inherit;padding:8px 14px;border-radius:2px;cursor:pointer}

/* ---------- Villes / listes -------------------------------- */
.villes{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.villes li{border:1px solid var(--ligne-nuit);border-radius:2px;padding:7px 14px;font-size:.9rem}

.points{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.points li{border-top:2px solid var(--safran);padding-top:16px}
.points h3{margin-bottom:.4em}
.points p{font-size:.95rem;margin:0}

/* ---------- Appel à l'action ------------------------------- */
.rappel{background:var(--rouille);color:#fff;padding-block:56px}
.rappel .page{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.rappel h2{color:#fff;margin:0 0 .25em}
.rappel p{color:rgba(255,255,255,.9);margin:0}

/* ---------- Pied de page ----------------------------------- */
.pied{background:var(--bleu-abysse);color:rgba(243,236,222,.78);padding-block:52px 30px;font-size:.92rem}
.pied a{color:var(--sable)}
.pied .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  padding-bottom:28px;border-bottom:1px solid var(--ligne-nuit)}
.pied h3{color:var(--sable);font-size:.9rem;margin-bottom:14px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:8px}
.pied .bas{padding-top:20px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;font-size:.85rem}
@media (max-width:760px){.pied .cols{grid-template-columns:1fr;gap:26px}}

/* ---------- Divers ----------------------------------------- */
.fil{font-size:.85rem;color:var(--gris);padding-block:18px}
.fil a{color:var(--gris)}
.entete-page{background:var(--bleu-nuit);color:var(--sable);padding-block:56px}
.entete-page h1{color:var(--sable);margin-bottom:.3em}
.entete-page p{color:rgba(243,236,222,.84);margin:0}
.note-bloc{background:var(--sable-clair);border-left:4px solid var(--safran);
  padding:18px 22px;margin:26px 0;font-size:.95rem}
.note-bloc p:last-child{margin-bottom:0}