/* Plaidator — Alain Zerrad
   Aucune ressource tierce : polices système uniquement. */

:root{
  --navy:#0E2233;
  --navy-2:#16324A;
  --gold:#C29B3C;
  --gold-dark:#A6802A;
  --ivory:#F6F3EC;
  --paper:#FBFAF7;
  --ink:#22303C;
  --muted:#5A6875;
  --line:#DFD8C8;
  --pale:#B9C6D2;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 68rem;
  --measure: 40rem;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--navy-2)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--navy);color:#fff;padding:.75rem 1rem;z-index:100;
}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.measure{max-width:var(--measure)}

/* ── En-tête ─────────────────────────────── */
header.site{
  background:var(--navy);
  border-bottom:2px solid var(--gold);
}
.head{
  max-width:var(--wrap);margin:0 auto;padding:.9rem 1.5rem;
  display:flex;align-items:center;gap:1.5rem;
}
.brand{
  display:flex;align-items:center;gap:.65rem;
  color:#fff;text-decoration:none;font-family:var(--serif);
  font-size:1.15rem;letter-spacing:.02em;flex:0 0 auto;
}
.brand img{width:34px;height:34px}
.nav{margin-left:auto;display:flex;gap:1.4rem;flex-wrap:wrap}
.nav a{
  color:#D7E0E8;text-decoration:none;font-size:.95rem;
  padding-bottom:.2rem;border-bottom:2px solid transparent;
}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}

.burger{display:none}

/* ── Boutons ─────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--sans);font-size:1rem;
  font-weight:600;text-decoration:none;padding:.8rem 1.5rem;
  border:2px solid var(--gold);background:var(--gold);color:var(--navy);
}
.btn:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.on-dark{border-color:var(--gold)}
.btn.on-dark.ghost{background:transparent;color:#fff;border-color:#5C7A93}
.btn.on-dark.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0 0}

/* ── Héros ───────────────────────────────── */
.hero{background:var(--navy);color:#fff;padding:4.5rem 0 4rem}
.hero .kicker{
  font-family:var(--serif);font-style:italic;color:var(--gold);
  margin:0 0 1rem;font-size:1.05rem;
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.14;
  margin:0;letter-spacing:-.01em;
}
.hero p.lead{
  color:#CBD7E1;font-size:1.12rem;margin:1.5rem 0 0;max-width:36rem;
}
.rule{width:64px;height:3px;background:var(--gold);margin:1.6rem 0}

/* ── Sections ────────────────────────────── */
main{display:block}
.band{padding:3.6rem 0;border-top:1px solid var(--line)}
.band.first{border-top:0}
.band.ivory{background:var(--ivory)}
.band.dark{background:var(--navy);color:#fff;border-top:0}
.band.dark h2,.band.dark h3{color:#fff}
.band.dark p{color:#C6D3DE}

h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.2;
  margin:0 0 1.1rem;color:var(--navy);letter-spacing:-.01em;
}
h3{
  font-family:var(--sans);font-size:1.06rem;font-weight:700;
  margin:2rem 0 .5rem;color:var(--navy);
}
p{margin:0 0 1.05rem;max-width:var(--measure)}
.band.dark p{max-width:44rem}

/* ── Les deux portes ─────────────────────── */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:1rem}
.door{padding:2rem 2.2rem 2.2rem;border-top:3px solid var(--gold)}
.door + .door{border-left:1px solid var(--line)}
.door h2{font-size:1.4rem;margin-bottom:.6rem}
.door p{font-size:1rem;color:var(--muted);max-width:none}
.door .go{
  display:inline-block;margin-top:.6rem;font-weight:600;
  color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:2px;
}
.door .go:hover{background:var(--gold);}

/* ── Listes de définition ────────────────── */
.deflist{margin:0;padding:0}
.deflist div{
  padding:.85rem 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:13rem 1fr;gap:1.2rem;
}
.deflist div:last-child{border-bottom:1px solid var(--line)}
.deflist dt{font-weight:700;color:var(--navy)}
.deflist dd{margin:0;color:var(--muted)}

/* ── Le trajet du fichier ────────────────── */
.trajet{
  display:flex;align-items:stretch;gap:0;margin:1.4rem 0 0;
  border:1px solid var(--line);background:#fff;
}
.trajet .step{padding:1.1rem 1.3rem;flex:1}
.trajet .step + .step{border-left:1px solid var(--line)}
.trajet .n{
  font-family:var(--serif);font-size:1.5rem;color:var(--gold);
  line-height:1;margin:0 0 .35rem;
}
.trajet .step p{margin:0;font-size:.96rem;color:var(--muted);max-width:none}
.trajet .step strong{display:block;color:var(--navy);font-size:1rem}

/* ── Tarifs ──────────────────────────────── */
.price{
  background:var(--navy);color:#fff;padding:2rem 2.2rem;margin-top:1rem;
  border-left:4px solid var(--gold);
}
.price .amount{
  font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.2rem);
  margin:0 0 .4rem;color:#fff;max-width:none;
}
.price p{color:#C6D3DE;max-width:42rem}
.price .fine{font-size:.95rem;color:#93A6B6;margin-bottom:0}

.grid-tarifs{width:100%;border-collapse:collapse;margin:.5rem 0 1.5rem}
.grid-tarifs th,.grid-tarifs td{
  text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--line);
  font-size:1rem;
}
.grid-tarifs td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--navy)}
.grid-tarifs th{font-weight:700;color:var(--navy);border-bottom:2px solid var(--navy)}

/* ── FAQ ─────────────────────────────────── */
.faq{border-top:1px solid var(--line);max-width:48rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:1.05rem 2rem 1.05rem 0;font-weight:700;
  color:var(--navy);list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.2rem;top:.9rem;
  font-size:1.4rem;color:var(--gold);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 0 1.2rem}
.faq .answer p{margin-bottom:.7rem;max-width:44rem}

/* ── Publications ────────────────────────── */
.books{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
.book{background:#fff;border:1px solid var(--line);padding:1.6rem 1.7rem}
.book h2{font-size:1.3rem;margin-bottom:.3rem}
.book .sub{color:var(--gold);font-style:italic;font-family:var(--serif);margin:0 0 .9rem}
.book p{font-size:.98rem;color:var(--muted)}
.book .isbn{font-size:.88rem;color:#8B97A2}

/* ── Contact ─────────────────────────────── */
.tel-big{
  font-family:var(--serif);font-size:clamp(1.7rem,5vw,2.4rem);
  color:#fff;text-decoration:none;display:inline-block;
  border-bottom:3px solid var(--gold);
}
.tel-big:hover{color:var(--gold)}

/* ── Mentions légales ────────────────────── */
.legal h2{font-size:1.25rem;margin-top:2.4rem}
.legal p,.legal li{max-width:44rem;font-size:1rem}
.legal ul{padding-left:1.2rem}

/* ── Pied de page ────────────────────────── */
footer.site{background:var(--navy);color:#9FB0BF;padding:3rem 0 6.5rem;font-size:.95rem}
footer.site .wrap > *{max-width:46rem}
footer.site p{color:#9FB0BF;max-width:46rem}
footer.site strong{color:#fff}
footer.site a{color:#D7E0E8}
.annuaires{display:flex;flex-wrap:wrap;gap:.8rem;margin:.9rem 0 2rem}
.annuaires a{
  border:1px solid #38536B;color:#D7E0E8;text-decoration:none;
  padding:.5rem 1rem;font-size:.92rem;
}
.annuaires a:hover{border-color:var(--gold);color:#fff}
.identite{font-size:.88rem;color:#7C8C9B;border-top:1px solid #24455F;padding-top:1.4rem}

/* ── Portrait ────────────────────────────── */
.portrait{
  width:112px;height:112px;border-radius:50%;
  object-fit:cover;border:3px solid var(--gold);
  margin:0 0 1.5rem;
}
@media (min-width:900px){
  .portrait{width:142px;height:142px}
}
.contact-id{
  display:flex;align-items:center;gap:1.4rem;
  margin:0 0 1.6rem;flex-wrap:wrap;
}
.contact-id .portrait{margin:0}
.contact-id p{margin:0;color:#CBD7E1}
.contact-id strong{color:#fff;display:block;font-size:1.1rem}

/* ── Barre d'action mobile ───────────────── */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:var(--gold);border-top:2px solid var(--gold-dark);
}
.sticky a{
  display:block;text-align:center;padding:.95rem;font-weight:700;
  color:var(--navy);text-decoration:none;
}

/* ── Adaptations ─────────────────────────── */
@media (max-width:820px){
  .doors{grid-template-columns:1fr}
  .door + .door{border-left:0;border-top:1px solid var(--line)}
  .books{grid-template-columns:1fr}
  .trajet{flex-direction:column}
  .trajet .step + .step{border-left:0;border-top:1px solid var(--line)}
  .deflist div{grid-template-columns:1fr;gap:.2rem}
}

@media (max-width:680px){
  body{font-size:1rem}
  .head{flex-wrap:wrap;gap:.8rem}
  .nav{width:100%;margin-left:0;gap:1rem;display:none}
  .nav.open{display:flex}
  .burger{
    display:block;margin-left:auto;background:transparent;
    border:1px solid #3A566E;color:#fff;font-size:.92rem;
    padding:.45rem .8rem;cursor:pointer;
  }
  .hero{padding:3rem 0 2.6rem}
  .band{padding:2.6rem 0}
  .sticky{display:block}
  footer.site{padding-bottom:5.5rem}
}

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

@media print{
  header.site,.sticky,.annuaires{display:none}
  body{background:#fff;color:#000}
}