/*
Theme Name: Plan Libre
Theme URI: https://architecte-ile-maurice.com
Description: Thème code-pur d'architecte-ile-maurice.com. Écrit pour ce site seul. Aucun page-builder, aucune dépendance externe.
Version: 1.0
Author: Plan Libre
Text Domain: archi-mu
Requires PHP: 8.1
*/

/* Palette — contrastes WCAG AA vérifiés. Béton, encre, ocre.
   Aucune valeur commune avec Atelier Lagon ni Varangue. */
:root{
  --fond:#F7F7F5;
  --beton:#E4E4E0;
  --ligne:#CBCBC4;
  --encre:#17181A;      /* sur --fond : 15.8:1 */
  --encre-2:#54565B;    /* sur --fond : 7.0:1 */
  --ocre:#8A5A12;       /* sur --fond : 5.6:1 */
  --ocre-vif:#A96E18;
  --blanc:#FFFFFF;
  --lg:74rem;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);
  font:400 clamp(.98rem,.95rem + .18vw,1.06rem)/1.68 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0 0 .5em;line-height:1.15;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.1rem);font-weight:300}
h2{font-size:clamp(1.3rem,1.08rem + 1vw,1.7rem);margin-top:2.4em;
   padding-top:.7em;border-top:1px solid var(--ligne)}
h3{font-size:clamp(1.02rem,.98rem + .32vw,1.16rem);margin-top:1.9em;text-transform:uppercase;
   letter-spacing:.07em;font-size:.9rem;color:var(--ocre)}
p,ul,ol,table{margin:0 0 1.15em}
img{max-width:100%;height:auto;display:block}
a{color:var(--ocre);text-underline-offset:3px}
a:hover{color:var(--encre)}
:focus-visible{outline:2px solid var(--ocre-vif);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;background:var(--encre);color:var(--blanc);padding:.7rem 1rem;z-index:60}
.cadre{width:min(100% - 2.4rem,var(--lg));margin-inline:auto}

/* En-tête : bandeau fin, marque à gauche, nav en RANG INFÉRIEUR pleine largeur.
   Structure distincte des deux autres sites du lot (gate anti-jumeaux). */
.bandeau-tete{background:var(--blanc);border-bottom:1px solid var(--ligne)}
.bandeau-tete .cadre{display:flex;align-items:baseline;gap:1.5rem;padding:1.1rem 0 .9rem}
.sigle{text-decoration:none;color:var(--encre);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.sigle span{color:var(--ocre);font-weight:400}
.accroche-tete{margin:0;font-size:.84rem;color:var(--encre-2)}
.rang-nav{background:var(--beton);border-bottom:1px solid var(--ligne)}
.rang-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.6rem}
.rang-nav a{display:block;padding:.62rem 0;text-decoration:none;color:var(--encre-2);
  font-size:.83rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.rang-nav a:hover{color:var(--ocre)}
@media(max-width:44rem){.accroche-tete{display:none}.rang-nav ul{gap:1rem}}

.corps-page{padding:2.8rem 0 1rem}
.lecture{max-width:45rem}
.intro{font-size:1.14rem;font-weight:300;color:var(--encre-2);margin-bottom:2.2rem;line-height:1.55}
.lecture>ul,.lecture>ol{padding-left:1.2rem}

/* Étapes numérotées — propre à ce site */
ol.etapes{list-style:none;padding:0;counter-reset:e}
ol.etapes li{counter-increment:e;position:relative;padding:0 0 1.3rem 3.1rem;margin-bottom:1.3rem;
  border-bottom:1px solid var(--ligne)}
ol.etapes li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:0;
  font-size:1.5rem;font-weight:300;color:var(--ocre);line-height:1}
ol.etapes strong{display:block;margin-bottom:.25rem}

table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--ligne);vertical-align:top}
th{background:var(--beton);font-size:.79rem;text-transform:uppercase;letter-spacing:.06em}

.note{background:var(--blanc);border:1px solid var(--ligne);border-left:3px solid var(--ocre);
  padding:1.2rem 1.4rem;margin:2.2rem 0}
.note h2{margin-top:0;border-top:0;padding-top:0;font-size:1.1rem}
.bouton-plan{display:inline-block;background:var(--encre);color:var(--blanc);padding:.72rem 1.5rem;
  text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.03em}
.bouton-plan:hover{background:var(--ocre);color:var(--blanc)}

.ariane{font-size:.8rem;color:var(--encre-2);padding-top:1rem;letter-spacing:.02em}
.ariane a{color:var(--encre-2)}

.bas-page{background:var(--encre);color:#C6C8CC;margin-top:4rem;padding:2.4rem 0 1.5rem;font-size:.88rem}
.bas-page a{color:#E8B87A}                    /* sur --encre : 9.4:1 */
.bas-page h2{color:var(--blanc);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  margin:0 0 .6rem;border-top:0;padding-top:0}
.bas-page ul{list-style:none;margin:0;padding:0}
.bas-page li{margin-bottom:.32rem}
.grille-bas{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.bas-page small{display:block;border-top:1px solid #2E3033;margin-top:1.8rem;padding-top:1rem;color:#A6A9AE}

label{display:block;font-weight:600;margin-bottom:.3rem;font-size:.9rem}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;padding:.62rem .78rem;
  border:1px solid var(--ligne);font:inherit;background:var(--blanc);color:var(--encre)}
button[type=submit]{background:var(--encre);color:var(--blanc);border:0;cursor:pointer;
  padding:.72rem 1.5rem;font:inherit;font-weight:600}
button[type=submit]:hover{background:var(--ocre);color:var(--blanc)}

/* ═══ HOME — refonte du 20/08 ═══════════════════════════════════════════════
   Hero « plan » : trame technique dessinée en CSS, typographie fine et large,
   trois repères de projet. Aucun aplat inutile : c'est un site d'architecture.
   ═══════════════════════════════════════════════════════════════════════════ */
.calque{
  position:relative;background:var(--blanc);
  border-bottom:1px solid var(--ligne);
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(2.4rem,5vw,3.6rem);
}
.calque::before{ /* la trame millimétrée, purement CSS */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--ligne) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ligne) 1px,transparent 1px);
  background-size:44px 44px;opacity:.42;
  -webkit-mask:linear-gradient(180deg,#000 0%,transparent 88%);
  mask:linear-gradient(180deg,#000 0%,transparent 88%);
}
.calque .cadre{position:relative}
.calque h1{font-size:clamp(2.15rem,1.3rem + 3.6vw,4rem);font-weight:200;line-height:1.03;
  letter-spacing:-.035em;margin:0 0 1.1rem;max-width:18ch}
.calque h1 strong{font-weight:600;color:var(--ocre);display:block}
.calque .sous{font-size:clamp(1.02rem,.98rem + .44vw,1.24rem);color:var(--encre-2);max-width:50ch;margin:0 0 2rem}
.calque .actes{display:flex;gap:.8rem;flex-wrap:wrap}
.bouton-fin{display:inline-block;border:1px solid var(--encre);color:var(--encre);background:transparent;
  padding:.72rem 1.5rem;text-decoration:none;font-size:.9rem;font-weight:600}
.bouton-fin:hover{background:var(--encre);color:var(--blanc)}

.jalons{background:var(--beton);border-bottom:1px solid var(--ligne)}
.jalons .cadre{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0}
.jalons div{padding:1.3rem 1.4rem;border-left:1px solid var(--ligne)}
.jalons div:first-child{border-left:0}
.jalons b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ocre);margin-bottom:.3rem}
.jalons span{font-size:.95rem;color:var(--encre)}

.home .corps-page{padding-top:2.4rem}
.home .lecture{max-width:46rem}

/* illustration de contenu — image nue, légende décalée */
.ill-02322{margin:2.4rem 0}
.ill-02322 img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ill-02322 figcaption{font-size:.75rem;opacity:.6;padding:.4rem 0 0 2.2rem;position:relative}
.ill-02322 figcaption::before{content:'';position:absolute;left:0;top:.7em;width:1.5rem;height:1px;background:currentColor;opacity:.5}


/* ── FAQ dépliante (P-292) ────────────────────────────────────────────── */
.archi-faq{margin:1.4rem 0 2rem;border-top:1px solid rgba(0,0,0,.14)}
.archi-faq details{border-bottom:1px solid rgba(0,0,0,.14)}
.archi-faq summary{cursor:pointer;padding:.85rem 1.8rem .85rem 0;font-weight:600;
  list-style:none;position:relative}
.archi-faq summary::-webkit-details-marker{display:none}
.archi-faq summary::after{content:"+";position:absolute;right:.2rem;top:.75rem;
  font-size:1.3rem;line-height:1;opacity:.55}
.archi-faq details[open] summary::after{content:"–"}
.archi-faq__r{padding:0 0 1rem}
.archi-faq__r p{margin:0 0 .7em}
.archi-faq__r p:last-child{margin-bottom:0}