/* =========================================================================
   Marie Bovard — feuille de style
   Écrite en mobile first : les règles de base valent pour le téléphone,
   les @media (min-width) enrichissent progressivement vers les grands écrans.
   Points de rupture : 600px (petite tablette), 768px (tablette), 1024px (desktop)
   ========================================================================= */

:root{
  --slate:#535366;
  --charcoal:#242229;
  --canvas:#F1EEE7;
  --white:#FFFFFF;
  --line: rgba(36,34,41,0.12);
  /* Même filet, précisé — état de survol des boutons */
  --line-strong: rgba(36,34,41,0.45);
  --maxw: 1180px;
  /* Taille commune à tous les titres de section du site */
  --title-size: clamp(1.6rem, 3.4vw, 2.5rem);
  /* Palier intermédiaire entre le corps courant et les titres : les trois
     besoins de l'accueil et le chapeau de la page À propos */
  --lead-size: clamp(1.15rem, 2.4vw, 1.7rem);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  /* Colonne d'au moins une hauteur d'écran : combinée au margin-top:auto du
     pied de page, elle le pousse en bas quand le contenu est court, sans jamais
     l'étirer. dvh plutôt que svh pour qu'aucun blanc n'apparaisse sous lui
     lorsque la barre d'adresse du mobile se rétracte. */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;}
img, svg{ max-width:100%; }
::selection{background:var(--slate); color:var(--white);}

/* Marge latérale minimale de 1.25rem : en dessous de ~360px, 7vw devient trop étroit */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 max(1.25rem, 7vw); }
/* Mesure de texte commune à tout le site, plus courte que la largeur du
   conteneur. Seuls la barre de navigation et le pied de page gardent la pleine
   largeur : ce sont des bandeaux, pas du texte. */
.page-header .wrap,
.hero .wrap,
section .wrap{ max-width:1040px; }
/* Services et À propos portent de longs paragraphes : mesure plus courte pour
   la lecture. Le titre de page suit, sans quoi il démarrerait à gauche de son
   propre contenu. */
body.prose .page-header .wrap,
body.prose section .wrap{ max-width:900px; }
/* Respiration resserrée de 35% sur téléphone, valeurs pleines dès 600px */
section{ padding:min(7.15vh, 71.5px) 0; }
@media (min-width:600px){ section{ padding:min(11vh, 110px) 0; } }

h1,h2,h3{ font-weight:300; letter-spacing:-0.01em; }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  transition:transform 0.3s ease;
}
/* Escamotée vers le bas, ramenée vers le haut — téléphone uniquement */
.site-nav.is-hidden{ transform:translateY(-100%); }
/* Sur téléphone, logo et bouton burger sur une ligne, le menu se déplie en dessous. */
.site-nav .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:0.5rem; padding-top:0.9rem; padding-bottom:0.9rem;
}
.logo{
  font-size:0.95rem; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; text-decoration:none;
}

/* Bouton burger : 44px de côté, la cible tactile minimale recommandée */
.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; margin-right:-10px;
  background:none; border:0; cursor:pointer; color:inherit;
}
.nav-toggle span{
  display:block; width:100%; height:1px; background:var(--charcoal);
  transition:transform 0.25s ease, opacity 0.2s ease;
}
.site-nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.site-nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Liens ferrés à droite, chacun à la largeur de son texte, sous le bouton burger.
   Hors flux : le menu recouvre la page au lieu de la pousser vers le bas.
   .site-nav étant en position:sticky, il sert de référence à ce positionnement.
   Fond opaque et flou repris de la barre, pour que le texte ne transparaisse
   pas au travers. */
.nav-links{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  flex-direction:column; align-items:flex-end; text-align:right;
  list-style:none;
  padding:0.4rem max(1.25rem, 7vw) 1.1rem;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-nav.is-open .nav-links{ display:flex; }
.nav-links a{
  display:block; width:fit-content; padding:0.7rem 0;
  font-size:0.8rem; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; text-decoration:none;
}
/* Page courante et survol signalés par la graisse, sans soulignement */
.nav-links a:hover,
.nav-links a.active{ font-weight:700; }
/* Dès 600px : barre horizontale classique, plus de burger */
@media (min-width:600px){
  /* Garde-fou : la barre reste visible si la classe subsiste après un redimensionnement */
  .site-nav.is-hidden{ transform:none; }
  .site-nav .wrap{ flex-wrap:nowrap; gap:1rem; padding-top:1.4rem; padding-bottom:1.4rem; }
  .nav-toggle{ display:none; }
  /* Retour dans le flux : simple rangée horizontale, sans fond ni filet */
  .nav-links{
    display:flex; position:static; flex-direction:row; gap:1.2rem;
    align-items:center; text-align:left;
    padding:0; background:none; backdrop-filter:none; border-bottom:none;
  }
  .nav-links a{ display:inline-block; width:auto; font-size:0.68rem; padding:0 0 0.3rem; }
}
@media (min-width:768px){
  .nav-links{ gap:2.2rem; }
  .nav-links a{ font-size:0.78rem; }
}

/* ---------- Page header (hors accueil) ---------- */
/* Ni surtitre ni filet : même dépouillement que le hero de l'accueil */
.page-header{ padding-top:min(10vh,100px); padding-bottom:min(6vh,60px); }
/* Même intensité que « Recevez des plans. » sur l'accueil : la hiérarchie
   avec les titres de service se joue sur la taille, pas sur la graisse. */
.page-header h1{
  font-size:clamp(2.4rem, 6vw, 4rem); font-weight:600; text-transform:uppercase; letter-spacing:-0.01em;
}

/* ---------- Hero (accueil) ---------- */
.hero{
  min-height:78svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:6vh; padding-bottom:6vh;
}
@media (min-width:768px){ .hero{ min-height:86svh; } }
.hero-inner{ text-align:center; }
.hero h1{
  font-size:clamp(1.5rem, 5.4vw, 4rem); font-weight:200; line-height:1.05;
  letter-spacing:-0.01em; text-transform:uppercase;
}
/* Une phrase par ligne : la structure « Confiez… / Recevez… » se répond.
   Partagé avec l'accroche de la page Contact. */
.hero h1 span,
.contact-hero h1 span{ display:block; }
.hero h1 span + span,
.contact-hero h1 span + span{ margin-top:0.45em; }
/* La seconde ligne porte le bénéfice client : le contraste passe par la graisse seule */
.hero h1 span:last-child,
.contact-hero h1 span:last-child{ font-weight:600; }

/* ---------- Boutons ---------- */
/* Filet identique à celui de la barre de navigation et du pied de page */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  margin-top:2.6rem; padding:0.9rem 1.7rem;
  font-size:0.8rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; color:var(--charcoal); background:transparent;
  border:1px solid var(--line);
  transition:border-color 0.25s ease;
}
/* Au survol le filet se précise, sans remplissage : le bouton se dessine
   plus nettement au lieu de s'inverser. */
.btn:hover, .btn:focus-visible{ border-color:var(--line-strong); }
/* Bouton carré : l'icône fait exactement la hauteur de ligne du libellé des
   autres boutons, donc à rembourrage égal le bouton devient carré de lui-même. */
.btn-icon{ padding:0.9rem; }
.btn-icon svg{ display:block; width:1.28rem; height:1.28rem; }

/* ---------- Accueil ---------- */
/* Respiration plus large entre les groupes de texte, sur l'accueil uniquement */
body.home section{ padding:min(10.4vh, 104px) 0; }
@media (min-width:600px){ body.home section{ padding:min(16vh, 160px) 0; } }

/* ---------- Accueil : séquences « Vous avez besoin : » et « Vous êtes : » ---------- */
/* Séquence « titre : suites » — titre ferré à gauche, suites décalées d'un cran,
   chacune précédée d'une flèche. Motif commun à tout le site ; l'accueil le pousse
   à une tout autre échelle via les variables ci-dessous. */
.sequence{
  --indent:clamp(1.25rem, 5vw, 3rem);
  --seq-title-size:1.25rem;
  --seq-size:1.02rem;
  --seq-gap:clamp(1.6rem, 3vh, 2.4rem);
  --seq-gap-x:2rem;
}
/* Sur l'accueil, les deux séquences passent au palier intermédiaire : les
   besoins comme les libellés « Un bureau d'architecture… ». Les précisions
   sous ces libellés gardent le corps courant, qu'elles déclarent elles-mêmes. */
body.home .sequence{
  --seq-title-size:var(--title-size);
  --seq-size:var(--lead-size);
  --seq-gap:clamp(4rem, 8vh, 6.4rem);
  --seq-gap-x:3cm;
}
@media (min-width:768px){
  body.home .sequence{ --seq-gap:clamp(8rem, 16vh, 12.8rem); }
}
/* Les trois besoins portent l'entrée en matière de la page : seule séquence
   composée au-dessus du corps courant. */
.sequence-lead .seq-item{ line-height:1.35; }
/* La flèche fait 0.65em : il lui faut 1.35 / 0.65 de hauteur de ligne pour que
   son œil reste centré sur la première ligne du texte. */
.sequence-lead .seq-item::before{ line-height:2.08; }
.seq-title{
  font-size:var(--seq-title-size); font-weight:600; line-height:1.2;
  margin-bottom:clamp(1.5rem, 3vh, 2.5rem);
}
.seq-item{
  position:relative; margin-left:var(--indent); padding-left:1.8em;
  font-size:var(--seq-size); font-weight:400; line-height:1.2;
}
/* Flèche décorative : le « / "" » la retire de la lecture d'écran.
   line-height:1.85 centre son œil sur la première ligne du texte. */
.seq-item::before{
  content:"→" / ""; position:absolute; left:0; top:0;
  font-size:0.65em; line-height:1.85;
}
.seq-item + .seq-item{ margin-top:var(--seq-gap); }
.seq-item h3{ font-size:1em; font-weight:600; letter-spacing:inherit; margin:0; }
/* Précision sous le libellé, au corps du texte courant */
.seq-item .detail{
  margin-top:0.7em; font-size:1.02rem; line-height:1.5; font-weight:400;
}
/* Dès 768px, les suites démarrent exactement où le titre se termine : la première
   colonne est dimensionnée par le titre (auto), la seconde reçoit les suites.
   C'est le seul moyen en CSS d'obtenir la largeur réelle du titre.
   align-items:baseline pose la première suite sur la ligne de base du titre, pour
   que la phrase se lise d'un trait. */
@media (min-width:768px){
  .sequence{
    display:grid; grid-template-columns:auto 1fr; column-gap:var(--seq-gap-x);
    align-items:baseline;
  }
  .seq-title{ grid-column:1; grid-row:1; margin-bottom:0; }
  .seq-item{ grid-column:2; margin-left:0; }
}
/* Apparition plus lente que le reste du site, sans contredire « mouvement réduit » */
@media (prefers-reduced-motion: no-preference){
  .sequence .reveal{ transition-duration:2s; }
}

/* ---------- Accueil : blocs d'affirmation ---------- */
/* Aucune largeur maximale : titre et texte occupent toute la mesure du
   conteneur, comme les paragraphes de la page Services, et partagent donc le
   même bord gauche et le même bord droit que les séquences de la page. */
/* Sans text-wrap:balance : cette propriété raccourcit les lignes pour les
   équilibrer, ce qui empêchait le titre d'atteindre le bord droit que le
   paragraphe remplit. */
.statement h2{
  font-size:var(--title-size); font-weight:700; line-height:1.2;
  text-align:left;
}
.statement p{
  margin-top:1.4rem;
  font-size:1.02rem; font-weight:400; text-align:left;
}

/* ---------- Accueil : rangée de boutons ---------- */
/* Empilés sur téléphone, en ligne dès qu'il y a la place — centrés dans les deux cas */
.btn-row{
  display:flex; flex-direction:column; align-items:center; gap:0.8rem;
  margin-top:clamp(3rem, 6vh, 4.5rem);
}
.btn-row .btn{ margin-top:0; }
/* Accueil : écart doublé sous la dernière section seulement, celle qui clôt le
   parcours. La rangée de milieu de page garde l'écart courant. */
body.home section:last-of-type .btn-row{ margin-top:clamp(6rem, 12vh, 9rem); }
@media (min-width:600px){
  .btn-row{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:1rem; }
}

/* ---------- Page Services ---------- */
/* Pas de filet entre les prestations : seule la respiration les sépare, comme sur l'accueil */
/* Titre de bloc, commun à Services et À propos */
.service-block h2,
.about-text h1{ font-size:var(--title-size); font-weight:700; margin-bottom:1.6rem; }
/* Corps de texte commun aux trois pages intérieures */
.service-block p,
.about-text p{ font-size:1.02rem; margin-bottom:1.2rem; }
/* Titre sur deux lignes, comme l'accroche de l'accueil */
.about-text h1{ line-height:1.2; }
.about-text h1 span{ display:block; }
/* Chapeau : palier intermédiaire à interligne ouvert */
.about-text .lead{ font-size:var(--lead-size); line-height:1.75; }
/* Écarts doublés entre chacun des blocs de texte de la page. Déclarés après les
   règles partagées avec Services, qu'ils doivent emporter. */
.about-text h1,
.about-text .lead{ margin-bottom:6.4rem; }
.about-text p{ margin-bottom:2.4rem; }
.about-text + .btn-row{ margin-top:clamp(6rem, 12vh, 9rem); }

/* ---------- Page À propos ---------- */

/* ---------- Page Contact ---------- */
/* Toute la page Contact est composée sur un axe central */
.contact-hero{ text-align:center; }
/* Graisse fine : le contraste avec la seconde ligne, en 600, fait l'accroche */
.contact-hero h1{ font-weight:200; line-height:1.05; }
/* Coordonnées puis boutons, l'un à la suite de l'autre */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem, 5vh, 4rem);
  text-align:center;
}
/* Les deux boutons côte à côte ; l'écart vertical vient de la gouttière de la
   grille, pas d'une marge propre. */
.contact-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0.8rem;
}
.contact-actions .btn{ margin-top:0; }
/* Ni cadre, ni fond, ni libellés : les coordonnées sont posées à même la page.
   Corps intermédiaire entre le texte courant et le titre. Le plafond de 1.6rem
   est dicté par l'adresse email, la plus longue des deux, qui doit tenir dans sa
   colonne ; break-word la protège d'un débordement sur les très grands écrans,
   où la marge en vw resserre le conteneur. */
.contact-card .value{
  font-size:clamp(1.2rem, 2.6vw, 1.6rem); font-weight:600;
  margin-bottom:1.2em; overflow-wrap:break-word;
}
.contact-card .value:last-child{ margin-bottom:0; }
/* Sans soulignement au repos ; il n'apparaît qu'au survol, sinon rien n'indique
   qu'il s'agit d'un lien. */
.contact-card .value a{ text-decoration:none; border-bottom:1px solid transparent; }
.contact-card .value a:hover{ border-color:var(--line-strong); }

/* ---------- Pied de page ---------- */
/* Rembourrage repris de .site-nav .wrap, pour que les deux barres aient la même
   hauteur. margin-top:auto absorbe l'espace restant : le pied reste collé en bas
   des pages courtes et garde sa hauteur propre, sans s'étirer. */
footer{ margin-top:auto; padding:0.9rem 0; border-top:1px solid var(--line); }
@media (min-width:600px){ footer{ padding:1.4rem 0; } }
/* Téléphone : « Suisse romande » et l'email partagent la première ligne, chacun
   à son extrémité ; le copyright occupe seul la seconde. order remonte les deux
   sans toucher à l'ordre du balisage, où le copyright reste en tête. */
footer .wrap{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:0.6rem 1rem;
}
footer .wrap p:nth-child(2),
footer .wrap p:nth-child(3){ order:-1; }
footer .wrap p:nth-child(3){ text-align:right; }
footer .wrap p:first-child{ flex-basis:100%; }
/* Dès 768px : les trois mentions reprennent leur ordre sur une seule ligne.
   Seuil aligné sur celui des autres mises en colonnes du site. */
@media (min-width:768px){
  footer .wrap{ flex-wrap:nowrap; gap:0.8rem; }
  footer .wrap p:nth-child(2),
  footer .wrap p:nth-child(3){ order:0; }
  footer .wrap p:nth-child(3){ text-align:left; }
  footer .wrap p:first-child{ flex-basis:auto; }
}
/* Charbon à 50% : le pied de page passe au second plan */
footer p{ font-size:0.75rem; letter-spacing:0.08em; color:rgba(36,34,41,0.5); }
/* L'email est la seule information utile du pied de page */
footer p:last-child{ font-weight:600; }

/* ---------- Justification ---------- */
/* Tout ce qui n'est pas un titre est justifié, sans césure. Règle placée en fin
   de feuille pour l'emporter sur les text-align déclarés plus haut. */
.statement p,
.seq-item,
.service-block p,
.about-text p{
  text-align:justify; hyphens:none;
}
/* Les libellés des séquences restent des titres */
.seq-item h3{ text-align:left; }
/* Les trois besoins de l'accueil restent au fer à gauche : à leur corps et sur
   une colonne étroite, la justification y creuserait de larges blancs. */
.sequence-lead .seq-item{ text-align:left; }

/* ---------- Apparition au défilement ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .nav-toggle span{ transition:none; }
  .site-nav{ transition:none; }
}