/* ==========================================================
   SENTIER — feuille de style complète (style.css + complements.css)
   Couleurs : brun foncé #3F2204 · brun moyen #8F6236 · beige #F5EEE6 · blanc

   Sommaire :
     1. Réglages généraux
     2. En-tête et menu
     3. Bannière
     4. Titre de la page
     5. Corps de page et blocs de fond
     6. Titres et textes
     7. Boutons et liens
     8. Cartes et prestations (+ offre phare)
     9. Listes et étapes
    10. Volets dépliants (tableau de bord)
    11. Photos
    12. Formulaire
    13. Pied de page
    14. Téléphones
   ========================================================== */

/* Police Open Sans (doit rester tout en haut du fichier) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');


/* ==========================================================
   1. RÉGLAGES GÉNÉRAUX : modifiez ici
   ========================================================== */

:root {
  --brun-fonce: #3F2204;
  --brun-moyen: #8F6236;
  --beige: #F5EEE6;                 /* fond de l'offre phare */
  --texte: #2A1A0A;                 /* presque noir, légèrement brun */
  --filet: rgba(63, 34, 4, 0.15);   /* traits fins de séparation */

  --largeur-texte: 36em;
  --largeur-citation: 45em;
  --largeur-corps: calc(var(--largeur-texte) + 20em); /* largeur max de #corps */

  /* MARGE DU MENU ET DE LA BANNIÈRE
     Leur fond prend toute la largeur de l'écran, mais leur texte doit
     commencer au même endroit que le texte du corps.
     Cette marge (utilisée à gauche et à droite) est égale à :
       la moitié de l'écran (50 %)
       moins la moitié du corps (56em ÷ 2 = 28)
       plus la marge intérieure du corps (2em)   → 50 % − 26
     max(2rem, …) : jamais moins de 2rem, comme le corps sur téléphone.
     On écrit « rem » et pas « em » : 1rem vaut toujours 16 px, alors que 1em
     change selon la taille du texte (la bannière a un texte 2,5 fois plus grand).
     ⚠ Si vous changez --largeur-texte, remplacez 26 par :
       (largeur-texte + 20) ÷ 2 − 2     ex. pour 40em : (40 + 20) ÷ 2 − 2 = 28 */
  --marge-cote: max(2rem, calc(50% - 26rem));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
  color: var(--texte);
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;               /* texte fin, plus léger */
  line-height: 1.7;
  overflow-x: clip;               /* évite le défilement horizontal dû aux blocs en 100vw */
}

b, strong { font-weight: 600; }


/* ==========================================================
   2. EN-TÊTE ET MENU
   Fond brun foncé comme le pied de page, menu en petites capitales espacées,
   reste visible en haut de l'écran quand on fait défiler.
   ========================================================== */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--brun-fonce);   /* même couleur que le pied de page */
  display: flex;
  justify-content: center;            /* menu placé à gauche (center = au milieu) */
  /* 1.1em au-dessus et en dessous du menu ;
     à gauche et à droite, marge réglée en partie 1 : le menu s'aligne sur le texte du corps */
  padding: 1.1em var(--marge-cote);
}

nav ul {
  list-style-type: none;
  white-space: nowrap;            /* le menu reste sur une ligne */
}

nav ul li {
  display: inline;
  padding: 0 1.2em;
}

/* Le 1er lien du menu (« Accueil ») n'a pas d'espace à gauche,
   sinon il serait décalé par rapport au texte du corps */
nav ul li:first-child { padding-left: 0; }

nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: min(0.75em, 2.5vw);   /* 0.75em au maximum, plus petit si l'écran se rétrécit */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;

}

/* Lien survolé et page en cours : blanc, souligné */
nav a:hover, nav a.actif {
  color: white;
  border-bottom-color: white;
}


/* ==========================================================
   3. BANNIÈRE
   Nom du site en grandes capitales fines, en bas à gauche
   de la photo img/couverture.jpg.
   ========================================================== */

.couverture {
  /* Taille */
  height: 38vh;
  min-height: 12em;

  /* Placement du texte */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;              /* texte en bas de la bannière (center = au milieu) */
  align-items: flex-start;                /* texte à gauche (center = au milieu) */
  text-align: left;                       /* lignes alignées à gauche si le titre passe sur 2 lignes */
  /* haut : 0 · gauche et droite : marge réglée en partie 1 (alignée sur le corps)
     · bas : 1.5em entre le texte et le bas de la photo */
  padding: 0 var(--marge-cote) 1.5em;

  /* Photo de fond, légèrement assombrie pour que le texte blanc reste lisible */
  background-color: var(--brun-moyen);   /* couleur de secours si l'image ne charge pas */
  background-image: linear-gradient(rgba(42, 26, 10, 0.35), rgba(42, 26, 10, 0.35)), url('img/couverture.jpg');
  background-size: cover;
  background-position: center;

  /* Texte */
  color: white;
  font-size: 2.5em;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  line-height: 1;
}

/* Sous-titre sous « SENTIER » */
.sous-couverture { font-size: 0.4em; letter-spacing: 0.1em; margin-top: 1.2em; line-height: 1.2;}


/* ==========================================================
   4. TITRE DE LA PAGE
   Aligné à gauche sur le texte, grand et fin.
   La police est 2,5 fois plus grande que le texte :
   les mesures en em sont donc divisées par 2,5.
   ========================================================== */

#titrepage {
  font-size: 2.5em;
  font-weight: 300;
  text-align: left;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--brun-fonce);
  max-width: calc(var(--largeur-corps) / 2.5);
  margin: 1.6em auto 1em auto;    /* au-dessus : = 4em du texte normal */
  padding: 0 0.8em;               /* = 2em du texte normal, comme #corps */
}

/* Étiquette sous le titre de la page : modifier margin-top pour la monter ou la descendre */
.sous-titre { margin-top: -1.5em; }


/* ==========================================================
   5. CORPS DE PAGE ET BLOCS DE FOND
   ========================================================== */

#corps {
  background-color: white;
  padding: 0 2em 4em 2em;
  max-width: var(--largeur-corps);
  margin: 0 auto;
}

.fondblanc {
  background-color: white;
  padding-top: 1em;
  padding-bottom: 1em;
}

.demi{
  max-width: 24em;
}

/* Bloc de couleur pleine largeur, texte aligné sur le reste */
.fondcouleur {
  background-color: var(--brun-moyen);
  color: white;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-top: 3em;
  padding-bottom: 4em;
  padding-right: max(2em, calc(50vw - var(--largeur-corps) / 2 + 2em));
  padding-left: max(2em, calc(50vw - var(--largeur-corps) / 2 + 2em));
  margin-bottom: 1em;
}

.fondcouleur h2 { color: white; }

.fondcouleur h2:first-child { margin-top: 0; }   /* pas d'espace au-dessus du premier titre du bloc */

.fondcouleur a {
  color: white;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.fondcouleur a:hover {
  text-decoration-color: white;
}

.center  { text-align: center; }
.justify { text-align: justify; padding-bottom: 2em; }


/* ==========================================================
   6. TITRES ET TEXTES
   ========================================================== */

/* ----- Titres ----- */
h1 {
  font-size: 2em;
  font-weight: 300;
  margin-bottom: 1em;
  color: var(--brun-fonce);
}

/* Titres de section : petites capitales espacées */
h2 {
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brun-fonce);
  margin-top: 2.5em;
  margin-bottom: 1.5em;
}

h2:empty {                        /* les <h2></h2> vides ne laissent ni trait ni espace */
  display: none;
}

h3 {
  font-size: 1em;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.2em;
}

.titredessous {
  color: var(--brun-moyen);
  margin-top: 4em;
}

/* ----- Textes ----- */

.intro { font-size: 1.15em; }

.citation {                       /* témoignage client */
  font-size: 1.1em;
  font-style: italic;
  color: var(--brun-moyen);
  max-width: 34em;
  padding-top: 1em;
  margin: 0 auto;
}
.citation span { display: block; font-size: 0.8em; font-style: normal; margin-top: 1em; }

.signature { font-style: italic; font-size: 1.3em; color: var(--brun-moyen); }

.etiquette {                      /* petit texte au-dessus d'un titre */
  display: block;                 /* nécessaire pour pouvoir l'espacer du texte en dessous */
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brun-moyen);
  margin-bottom: 1.5em;
  margin-top: -1.5em;
}

.b {font-weight: 200;}

/* ==========================================================
   7. BOUTONS ET LIENS
   ========================================================== */

/* Liens dans le texte : soulignés d'un trait fin */
a {
  color: var(--brun-fonce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: rgba(63, 34, 4, 0.35);
  transition: text-decoration-color 0.3s, color 0.3s;
}

a:hover {
  color: var(--brun-moyen);
  text-decoration-color: var(--brun-moyen);
}

/* Les 3 styles partagent la même taille de texte et le même espace au-dessus */
.bouton, .lien, .souligne {
  display: inline-block;
  margin-top: 1.8em;
  font-family: inherit;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
}

/* Bouton à bordure fine : actions principales (prendre rendez-vous, envoyer…) */
.bouton {
  padding: 0.6em 1.4em;
  border: 1px solid var(--brun-moyen);
  background: none;
  color: var(--brun-moyen);
  font-weight:normal
}
.bouton:hover { background-color: var(--brun-moyen); color: white; }

/* Lien avec flèche : aller vers une autre page (« En savoir plus → ») */
.lien { color: var(--brun-moyen); font-weight:normal; }
.lien:hover { color: var(--brun-fonce); }

/* Texte souligné d'un trait fin : choix secondaires */
.souligne { color: var(--brun-fonce); padding-bottom: 0.4em; border-bottom: 1px solid var(--brun-moyen); }
.souligne:hover { color: var(--brun-moyen); border-bottom-width: 2px; }

/* Deux boutons côte à côte : un peu d'espace entre eux */
.bouton + .bouton, .bouton + .lien { margin-left: 1.5em; }


/* ==========================================================
   8. CARTES ET PRESTATIONS
   ========================================================== */

/* Blocs côte à côte, qui passent les uns sous les autres sur téléphone */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  gap: 2.5em 3em;
  margin: 1.5em 0;
}
/* Variante à 2 blocs (Discutons de votre projet) : blocs plus étroits et bien espacés */
.cartes.deux { grid-template-columns: repeat(auto-fit, minmax(13em, 18em)); }
/* Variante à 4 blocs (Prestations) : 2 cartes par ligne, bien espacées */
.cartes.quatre { grid-template-columns: 1fr 1fr; column-gap: 6em; }
/* Filet pâle sous une carte (à mettre sur les 2 cartes de la 1re ligne) */
.carte.filet { border-bottom: 1px solid var(--filet); padding-bottom: 1.3em; }

.carte { display: flex; flex-direction: column; }
.carte h3 { margin-top: 0.3em; color: var(--brun-fonce); }
.carte p { margin-bottom: 1.2em; }
.carte a { margin-top: auto; align-self: flex-start; } /* bouton ou lien aligné en bas de la carte */

/* Les prestations : trait fin au-dessus, plus épais pour celle mise en avant */
.prestation { border-top: 1px solid var(--brun-moyen); padding-top: 1.2em; }
.prestation.vedette { border-top: 1px solid var(--brun-moyen); }

/* Jauge d'implication : 5 petits rectangles, les « plein » sont colorés */
.jauge { font-size: 0.8em; color: var(--brun-moyen); margin-bottom: 1em; }
.jauge span { display: inline-block; width: 1.1em; height: 0.35em; margin-left: 0.2em; background-color: var(--filet); }
.jauge span.plein { background-color: var(--brun-moyen); }

/* ----- Offre phare (encart « Accompagnement personnalisé ») ----- */
.offre {
  position: relative;
  z-index: 0;            /* nécessaire pour que le fond reste derrière le texte */
  margin: 4em 0;         /* espace au-dessus et en dessous */
  padding: 3em 0;        /* espace entre le bord du fond et le texte */
}

/* Fond beige sur toute la largeur de l'écran (couleur : --beige, partie 1) */
.offre::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;     /* toute la hauteur de l'encart */
  left: 50%; width: 100vw; margin-left: -50vw;   /* toute la largeur de l'écran */
  z-index: -1;           /* derrière le texte */
  background-color: var(--beige);
}

.offre .etiquette, .offre h2 { margin-top: 0; }

/* 2 colonnes : texte à gauche, étapes à droite séparées par un filet */
.offre-colonnes { display: grid; grid-template-columns: 3fr 2fr; gap: 4em; }
.offre ol { border-left: 1px solid var(--filet); padding-left: 4em; }

/* Filet sous chaque étape, sauf la dernière */
.offre .etapes li { padding-bottom: 0.8em; margin-bottom: 0.8em; border-bottom: 1px solid var(--filet); }
.offre .etapes li:last-child { border-bottom: none; }

/* ==========================================================
   9. LISTES ET ÉTAPES
   ========================================================== */

/* Réglage de base de toutes les listes */
li {
  padding-left: 1em;
  position: relative;
  list-style-position: inside;
}

/* Liste avec un tiret brun */
ul.tirets li { list-style: none; padding-left: 1.6em; margin: 0.4em 0; }
ul.tirets li::before { content: "—"; position: absolute; left: 0; color: var(--brun-moyen); }

/* Étapes numérotées 01, 02, 03 (parcours, déroulé) */
ol.etapes { counter-reset: etape; }
ol.etapes li { list-style: none; counter-increment: etape; padding: 0 0 1.6em 3.5em; }
ol.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: 1.4em;
  line-height: 1.2;
  color: var(--brun-moyen);
}
ol.etapes strong { display: block; color: var(--brun-fonce); }

/* Étape en option (Suivi de chantier) : la numérotation continue (06),
   mais un trait pointillé et un numéro plus pâle la distinguent */
ol.etapes li.option {
  border-top: 1px dashed var(--brun-moyen);
  padding-top: 1.2em;
  color: rgba(0, 0, 0, 0.6);   /* texte noir à 60 % : seuls ces mots sont plus pâles */
}
ol.etapes li.option strong { color: inherit; } /* le titre reprend la couleur pâle du texte */
ol.etapes li.option::before { top: 1.1em; } /* aligne le numéro avec le texte */


/* ==========================================================
   10. VOLETS DÉPLIANTS (tableau de bord, « à la carte », questions)
   Un « + » qui devient « − » quand le volet est ouvert.
   ========================================================== */

details {
  border-bottom: 1px solid var(--filet);
}

summary {
  list-style: none;               /* supprime le petit triangle */
  cursor: pointer;
  font-weight: 400;
  color: black;
  margin-top: 0.6em;
  padding: 0.7em 1em 0.7em 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: filter 0.3s;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "+";
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1;
  margin-left: 1em;
}

details[open] summary::after { content: "−"; }

summary:hover { filter: brightness(0.95); }

.insummary {
  margin: 1em 0 1.5em 0;
  padding-left: 1.2em;
}

/* Volets sans couleur de fond (dans un bloc .fondblanc) : texte aligné à gauche */
.fondblanc summary { padding-left: 0; }
.fondblanc .insummary { padding-left: 0; }

/* Couleurs d'état des volets */
.c0 { background-color: #cccccc99; }
.c1 { background-color: #FFEB99; }
.c2 { background-color: #f8ac0099; }
.c3 { background-color: #b5710099; }
.c4 { background-color: #3659DB; }
.c5 { background-color: #5566cc; color: black; }

/* Texte d'état sous chaque volet */
.d0, .d1, .d2, .d3, .d4, .d5 {
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: right;
  margin-top: 0.4em;
}

.d0 { color: #cccccc; }
.d1, .d2 { color: #ccaa55; }
.d3 { color: #b5710099; }
.d4 { color: #5a6eff99; }
.d5 { color: #5566cc; }


/* ==========================================================
   11. PHOTOS
   ========================================================== */

/* Bloc contenant une image */
.divimg {
  display: block;
  padding-top: 1.5em;
  padding-bottom: 1em;
}

/* Texte à gauche, photo à droite, de même hauteur */
.duo { display: grid; grid-template-columns: 3fr 2fr; gap: 5em; align-items: stretch; }

/* Emplacement gris en attendant la vraie photo (remplacer le div par une balise img) */
.photo {
  aspect-ratio: 4 / 5;
  background-color: var(--filet);
  color: var(--brun-moyen);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  font-size: 0.85em;
}

/* Vraie photo : même hauteur que le texte à côté, recadrée sans déformation */
img.photo { width: 100%; height: 0; min-height: 100%; aspect-ratio: auto; object-fit: cover; padding: 0; }


/* ==========================================================
   12. FORMULAIRE
   ========================================================== */

form { display: grid; gap: 1.2em; max-width: var(--largeur-texte); }
label { display: block; font-weight: 600; color: var(--brun-fonce); }
input, textarea {
  display: block;
  width: 100%;
  margin-top: 0.4em;
  padding: 0.6em;
  border: 1px solid var(--filet);
  font-family: inherit;
  font-size: 1em;
  font-weight: 300;
}
textarea { min-height: 8em; }


/* ==========================================================
   13. PIED DE PAGE
   ========================================================== */

#pied-de-page {
  background-color: var(--brun-fonce);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: min(0.75em, 2.5vw);
  letter-spacing: 0.08em;
  line-height: 2;
  padding: 3em 12% 2.5em 12%;
  white-space: nowrap;   /* pas de retour à la ligne automatique */
}

#pied-de-page b {
  display: inline-block;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom: 0.6em;
}

#pied-de-page a { color: white; }   /* liens en blanc */


/* ==========================================================
   14. TÉLÉPHONES ET PETITS ÉCRANS (moins de 50em = 800 px)
   ========================================================== */

@media (max-width: 50em) {
  /* Menu */
  nav ul li { padding: 0 0.6em; }
  nav a { letter-spacing: 0.1em; }

  /* Bannière */
  .couverture { font-size: 1.8em; letter-spacing: 0.1em; height: 28vh; }
  .sous-couverture { font-size: 0.5em; letter-spacing: 0.2em; line-height:1.4;}

  /* Titre de la page */
  #titrepage { font-size: 2em; max-width: none; padding: 0 1em; margin-top: 1.5em; }

  /*quand photos passent sous le txte d'intro*/
  .duo { grid-template-columns: 1fr; }
  /* Photo sous le texte : elle retrouve sa propre hauteur (format paysage) */
  img.photo { height: auto;}

  /* Cartes à 4 blocs : une seule colonne, sans filet */
  .cartes.quatre { grid-template-columns: 1fr; }
  .carte.filet { border-bottom: none; padding-bottom: 0; }

  /* Offre phare : les étapes passent sous le résumé */
  .offre-colonnes { grid-template-columns: 1fr;}
  .offre ol { border-left: none; padding-left: 0; }
}