/* Gronvespado — feuille de style unique */

:root{
  --lilas:#e9e5ee;
  --lilas-clair:#f3f1f6;
  --encre:#14120f;
  --encre-douce:#3a3630;
  --gris:#6d6862;
  --lime:#9aa85f;
  --peche:#f0c8a6;
  --trait:#c9c2d2;
  --mesure:34rem;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--lilas);
  color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}

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

a{color:var(--encre);text-decoration:underline;text-underline-offset:0.22em;text-decoration-thickness:1px;}
a:hover{color:var(--encre-douce);text-decoration-thickness:2px;}

a:focus-visible,
:focus-visible{
  outline:3px solid var(--encre);
  outline-offset:3px;
}

.enveloppe{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 6vw;
}

/* ---------- Étiquettes catalogue ---------- */

.etiquette{
  font-size:0.7rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gris);
  margin:0;
}

.numero-section{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:clamp(3.4rem,9vw,7rem);
  line-height:0.8;
  color:var(--trait);
  margin:0 0 0.4em 0;
  display:block;
}

/* ---------- Navigation ---------- */

.entete{
  padding-top:2.2rem;
  padding-bottom:1.4rem;
}

.entete-interieur{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:1.2rem 2.4rem;
  justify-content:space-between;
}

.marque{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:1.1rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  text-decoration:none;
}

.navigation ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 1.6rem;
  margin:0;
  padding:0;
}

.navigation a{
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:0.2rem 0;
  border-bottom:1px solid transparent;
}

.navigation a:hover,
.navigation a[aria-current="page"]{
  border-bottom-color:var(--encre);
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  padding:5rem 0 6rem;
}

.hero-grille{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
  align-items:start;
}

.hero-etiquette{
  grid-column:11 / span 2;
  grid-row:1;
  text-align:right;
}

.hero-titre{
  grid-column:1 / span 8;
  grid-row:2;
  margin:2.6rem 0 0 0;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:400;
  font-size:clamp(2.1rem,5.6vw,4.15rem);
  line-height:1.04;
  letter-spacing:-0.015em;
}

.hero-intro{
  grid-column:1 / span 5;
  grid-row:3;
  margin:2.2rem 0 0 0;
  color:var(--encre-douce);
}

.hero-champ{
  grid-column:2 / span 4;
  grid-row:4;
  align-self:start;
  height:14rem;
  margin-top:3rem;
  background:var(--peche);
}

.hero-visuel{
  grid-column:8 / span 5;
  grid-row:3 / span 2;
  margin-top:1rem;
}

.cadre-portrait{
  background:var(--lilas-clair);
  padding:1.1rem;
}

.cadre-portrait svg,
.cadre-paysage svg{display:block;width:100%;height:auto;}

.mention-visuel{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem 1.4rem;
  justify-content:space-between;
  margin-top:0.9rem;
  font-size:0.74rem;
  letter-spacing:0.08em;
  color:var(--gris);
}

.mention-visuel span{display:block;}

/* ---------- Sections ---------- */

.section{padding:4.6rem 0;}

.section h2{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.12;
  margin:0 0 1.2rem 0;
}

.section h3{
  font-size:1rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin:2.4rem 0 0.7rem 0;
}

.section p{margin:0 0 1.15rem 0;}

.zone-centre{
  max-width:var(--mesure);
  margin:0 auto;
  text-align:left;
}

.zone-gauche{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
}
.zone-gauche .colonne{grid-column:1 / span 7;}
.zone-gauche .marge{grid-column:9 / span 4;}

.zone-droite{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
}
.zone-droite .colonne{grid-column:6 / span 7;}

.zone-large{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
}
.zone-large .colonne{grid-column:3 / span 8;}

.liste{
  list-style:none;
  margin:1.2rem 0 0 0;
  padding:0;
}

.liste li{
  padding:0.75rem 0;
  border-top:1px solid var(--trait);
}

.liste li:last-child{border-bottom:1px solid var(--trait);}

.liste li strong{
  display:block;
  font-weight:600;
}

.liste-simple{
  margin:1.1rem 0 0 1.1rem;
  padding:0;
}
.liste-simple li{margin-bottom:0.5rem;}

.note-marge{
  font-size:0.86rem;
  color:var(--gris);
  border-left:2px solid var(--lime);
  padding-left:1rem;
  margin-top:0.6rem;
}

/* ---------- Visuel de détail ---------- */

.detail{
  padding:5.5rem 0 6.5rem;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
}

.detail .cadre-paysage{
  grid-column:2 / span 7;
  background:var(--lilas-clair);
  padding:1.1rem;
}

.detail figcaption{
  grid-column:10 / span 3;
  align-self:end;
  font-size:0.78rem;
  line-height:1.5;
  color:var(--gris);
}

/* ---------- Contrôle final ---------- */

.controle{
  background:var(--lilas-clair);
  padding:4.6rem 0 5rem;
}

.controle-grille{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
}
.controle-grille .titre{grid-column:1 / span 4;}
.controle-grille .corps{grid-column:6 / span 7;}

.controle ol{
  counter-reset:etape;
  list-style:none;
  margin:0;
  padding:0;
}

.controle ol li{
  counter-increment:etape;
  position:relative;
  padding:0.85rem 0 0.85rem 3.2rem;
  border-top:1px solid var(--trait);
}

.controle ol li:last-child{border-bottom:1px solid var(--trait);}

.controle ol li::before{
  content:counter(etape,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0.95rem;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:0.95rem;
  color:var(--lime);
  letter-spacing:0.06em;
}

/* ---------- Pages intérieures ---------- */

.page-tete{
  padding:4.6rem 0 1rem;
}

.page-tete h1{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:400;
  font-size:clamp(2.3rem,7.6vw,5.4rem);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:1.6rem 0 0 0;
  max-width:15ch;
}

.page-corps{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
  padding:2.4rem 0 5rem;
}

.page-corps .colonne{grid-column:4 / span 7;}

.page-corps h2{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:400;
  font-size:clamp(1.4rem,3vw,2.05rem);
  line-height:1.15;
  margin:3rem 0 1rem 0;
}

.page-corps h2:first-child{margin-top:0;}

.page-corps p{margin:0 0 1.15rem 0;}

.objet-courriel{
  margin:3rem 0 0 0;
  padding:1.6rem 0;
  border-top:2px solid var(--encre);
  border-bottom:1px solid var(--trait);
}

.objet-courriel .etiquette{margin-bottom:0.5rem;}

.objet-courriel a{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:clamp(1.05rem,2.6vw,1.6rem);
  letter-spacing:0.01em;
  word-break:break-word;
}

/* ---------- Pied de page ---------- */

.pied{
  background:var(--encre);
  color:var(--lilas);
  padding:5.5rem 0 2.6rem;
  margin-top:2rem;
}

.pied a{color:var(--lilas);}
.pied a:focus-visible{outline-color:var(--peche);}

.pied-grille{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2.4rem;
  align-items:start;
}

.pied-courriel{grid-column:1 / span 4;}
.pied-legal{grid-column:8 / span 5;}

.pied .etiquette{color:#a49caf;}

.pied-legal ul{
  list-style:none;
  margin:0.7rem 0 0 0;
  padding:0;
  display:grid;
  gap:0.45rem;
}

.pied-legal a{
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-decoration:none;
  border-bottom:1px solid rgba(233,229,238,0.35);
}
.pied-legal a:hover{border-bottom-color:var(--lilas);}

.pied-signature{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:clamp(2.6rem,15vw,11rem);
  line-height:0.86;
  letter-spacing:0.01em;
  margin:5rem 0 1.6rem 0;
  color:var(--lilas);
}

.pied-mention{
  font-size:0.74rem;
  letter-spacing:0.08em;
  color:#a49caf;
  margin:0;
}

/* ---------- Responsive ---------- */

@media (max-width:1000px){
  .hero-titre{grid-column:1 / span 11;}
  .hero-intro{grid-column:1 / span 8;}
  .hero-etiquette{grid-row:auto;}
  .hero-titre{grid-row:auto;}
  .hero-intro{grid-row:auto;}
  .hero-visuel{grid-column:5 / span 8;grid-row:auto;}
  .hero-champ{grid-column:1 / span 4;grid-row:auto;height:9rem;margin-top:0;}
  .zone-gauche .colonne{grid-column:1 / span 9;}
  .zone-gauche .marge{grid-column:1 / span 8;}
  .zone-droite .colonne{grid-column:3 / span 10;}
  .zone-large .colonne{grid-column:1 / span 11;}
  .detail .cadre-paysage{grid-column:1 / span 9;}
  .detail figcaption{grid-column:2 / span 7;align-self:auto;margin-top:1rem;}
  .controle-grille .titre{grid-column:1 / span 12;}
  .controle-grille .corps{grid-column:1 / span 12;}
  .page-corps .colonne{grid-column:2 / span 10;}
  .pied-courriel{grid-column:1 / span 6;}
  .pied-legal{grid-column:7 / span 6;}
}

@media (max-width:680px){
  body{font-size:16px;}
  .enveloppe{padding:0 7vw;}
  .hero{padding:3rem 0 3.5rem;}
  .hero-grille{gap:1.4rem;}
  .hero-etiquette{grid-column:1 / span 12;text-align:left;}
  .hero-titre{grid-column:1 / span 12;margin-top:1.4rem;}
  .hero-intro{grid-column:1 / span 12;}
  .hero-visuel{grid-column:1 / span 12;}
  .hero-champ{grid-column:1 / span 12;height:6.5rem;margin-top:1.6rem;}
  .section{padding:3.2rem 0;}
  .zone-gauche .colonne,
  .zone-gauche .marge,
  .zone-droite .colonne,
  .zone-large .colonne,
  .page-corps .colonne{grid-column:1 / span 12;}
  .detail{padding:3rem 0 3.6rem;}
  .detail .cadre-paysage{grid-column:1 / span 12;}
  .detail figcaption{grid-column:1 / span 12;}
  .pied{padding:3.4rem 0 2rem;}
  .pied-courriel,
  .pied-legal{grid-column:1 / span 12;}
  .pied-signature{margin-top:3rem;}
  .page-tete{padding:3rem 0 0.5rem;}
}