/* ============================================================
   ATELIER ROUVIÈRE — feuille de style unique
   Démonstration de la formule MULTIPAGE (590 €)
   ------------------------------------------------------------
   LE PARTI PRIS : une revue de décoration.
   Dans ce métier, c'est la photographie qui vend. Alors ici
   les images occupent toute la largeur de l'écran, les textes
   sont courts et posés dans de grandes marges blanches, et il
   y a peu d'éléments à l'écran : moins de choses, mais plus
   grandes et mieux espacées.

   TROIS EFFETS, PAS UN DE PLUS
   1. Les blocs apparaissent en montant légèrement (JavaScript).
   2. Les grandes images glissent un peu au défilement (CSS seul,
      calculé par la carte graphique : aucun ralentissement).
   3. L'image d'une réalisation grossit doucement au survol.
   Tous ces effets ne touchent que « transform » et « opacity » :
   ce sont les deux seules propriétés qu'un navigateur sait
   animer sans refaire ses calculs de mise en page.

   Une seule feuille pour les quatre pages du site et les deux
   pages légales. Aucune police téléchargée, aucune
   bibliothèque, aucune dépendance extérieure.
   Pour changer l'identité d'un client : le bloc
   « LES COULEURS » suffit dans la plupart des cas.
   ============================================================ */


/* ---------- 1. LES COULEURS ET LES POLICES ------------------ */
:root {
  --papier:      #fbf9f6;   /* fond général, teinte papier      */
  --papier-2:    #f1ece3;   /* fond des sujets alternés         */
  --blanc:       #ffffff;
  --encre:       #16150f;   /* texte courant, presque noir      */
  --encre-douce: #6b6459;   /* texte secondaire                 */
  --nuit:        #1a1915;   /* fond des sujets sombres          */
  --terre:       #99562f;   /* accent chaud (contraste 7:1)     */
  --terre-pale:  #e6b895;   /* le même accent, sur fond sombre  */
  --trait:       #e4ddd1;   /* filets et bordures               */

  --largeur:  1320px;       /* largeur maximale du contenu      */
  --lecture:  640px;        /* largeur d'un bloc de texte       */

  /* Polices présentes sur toutes les machines : rien à charger. */
  --titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* Une seule courbe d'accélération pour tout le site :
     lente au départ, longue à l'arrivée. C'est elle qui donne
     le caractère « posé » de la maquette. */
  --pose: cubic-bezier(.22, .68, .24, 1);
}


/* ---------- 2. RÉGLAGES DE BASE ----------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.72;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* aucune barre horizontale, jamais */
}

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

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 400;
  color: var(--encre);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 7.4vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 5vw, 4rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.01em; }

p { margin: 0 0 1.2em; }
a { color: var(--terre); }

:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 4px;
  border-radius: 2px;
}

/* La largeur de lecture. Tout le texte passe par là ;
   les images, elles, s'en échappent pour prendre l'écran entier. */
.conteneur { width: min(100% - 2.4rem, var(--largeur)); margin-inline: auto; }
.texte     { max-width: var(--lecture); }
.centre    { margin-inline: auto; text-align: center; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Le lien d'évitement : premier arrêt de la touche Tab. */
.evite {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--encre); color: #fff;
  padding: .9rem 1.4rem; text-decoration: none;
}
.evite:focus { left: 1rem; top: 1rem; }


/* ---------- 3. LES PETITS ÉLÉMENTS DE TEXTE ----------------- */

/* Étiquette en capitales : le fil conducteur de tout le site. */
.surtitre {
  display: flex; align-items: center; gap: .8rem;
  text-transform: uppercase; letter-spacing: .24em;
  font-size: .68rem; font-weight: 600;
  color: var(--terre);
  margin: 0 0 1.6rem;
}
.surtitre::before {
  content: ""; width: 38px; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}
.surtitre--clair  { color: #f2d3b6; }
.surtitre--centre { justify-content: center; }

/* Le paragraphe d'accroche, juste sous un grand titre. */
.chapo {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--encre-douce);
  max-width: 34em;
}
.chapo--clair { color: rgba(255,255,255,.8); }

/* Une phrase mise en avant, en serif : le « chapeau » de revue. */
.exergue {
  font-family: var(--titre);
  font-size: clamp(1.55rem, 3.4vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--encre);
  margin: 0;
  text-wrap: balance;
}
.exergue em { font-style: italic; color: var(--terre); }
.exergue--clair { color: #fff; }
.exergue--clair em { color: var(--terre-pale); }

.intro { color: var(--encre-douce); }
.intro--clair { color: rgba(255,255,255,.76); }


/* ---------- 4. LES BOUTONS ET LES LIENS FLÉCHÉS ------------- */
.bouton {
  display: inline-block;
  padding: 1.05rem 2.1rem;
  font-size: .95rem; font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  background: var(--encre); color: #fff;
  border: 1px solid var(--encre);
  transition: transform .45s var(--pose), opacity .3s linear;
}
.bouton:hover, .bouton:focus-visible { transform: translateY(-3px); }
.bouton:active { transform: translateY(0); }

.bouton--terre { background: var(--terre); border-color: var(--terre); }
.bouton--clair { background: #fff; color: var(--encre); border-color: #fff; }
.bouton--vide  { background: transparent; color: var(--encre); border-color: var(--trait); }
.bouton--petit { padding: .72rem 1.35rem; font-size: .85rem; }

/* Le lien discret avec sa flèche. La flèche avance au survol. */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .7rem;
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  color: var(--encre);
  border-bottom: 1px solid var(--trait);
  padding-bottom: .35rem;
}
.lien-fleche svg { width: 24px; flex: none; transition: transform .45s var(--pose); }
.lien-fleche:hover svg, .lien-fleche:focus-visible svg { transform: translateX(7px); }
.lien-fleche--clair { color: #fff; border-bottom-color: rgba(255,255,255,.3); }


/* ---------- 5. LE BANDEAU DE DÉMONSTRATION ------------------ */
/* À supprimer pour un vrai client, avec la balise « noindex ». */
.demo-bandeau {
  margin: 0; padding: .5rem 1rem;
  background: var(--encre); color: #fff;
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; text-align: center;
}


/* ---------- 6. L'EN-TÊTE ET LE MENU ------------------------- */
/* Le menu reste collé en haut : sur un site de plusieurs pages,
   on doit pouvoir changer de page à tout moment. */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
}
.entete__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.marque {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--encre);
}
.marque__signe { width: 34px; height: 34px; flex: none; color: var(--encre); }
.marque__txt b {
  display: block;
  font-family: var(--titre); font-size: 1.22rem; font-weight: 400;
  letter-spacing: -.01em; line-height: 1.1;
}
.marque__txt small {
  display: block;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--encre-douce);
}

.menu { display: flex; gap: 2.2rem; }
.menu a {
  position: relative;
  text-decoration: none;
  color: var(--encre-douce);
  font-size: .95rem; font-weight: 500;
  padding: .35rem 0;
}
/* Le trait sous le lien : il grandit au survol. */
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--terre);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--pose);
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }

/* LA PAGE EN COURS — c'est tout l'intérêt d'un site à plusieurs
   pages : on doit voir d'un coup d'œil où l'on se trouve. */
.menu a[aria-current="page"] { color: var(--encre); font-weight: 700; }
.menu a[aria-current="page"]::after { transform: scaleX(1); }


/* ---------- 7. LES GRANDES IMAGES ---------------------------- */
/* Le cœur de la maquette. Une image « pleine » occupe toute la
   largeur de l'écran : elle est posée directement dans <main>,
   sans conteneur, donc elle n'a aucun calcul à faire. */
.pleine {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--papier-2);
}
.pleine > img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Les hauteurs, réglées à l'écran plutôt qu'en pixels. */
.pleine--ouverture { height: min(92vh, 820px); }
.pleine--haute     { height: min(84vh, 760px); }
.pleine--moyenne   { height: min(66vh, 620px); }
.pleine--basse     { height: min(48vh, 460px); }

/* Le texte posé sur une image : il lui faut un fond dégradé,
   sinon les lettres claires se perdent dans les zones claires
   de la photographie.

   Il y a DEUX dégradés, et c'est voulu :
   · le premier assombrit légèrement toute l'image ;
   · le second est porté par le bloc de texte lui-même, donc il
     s'adapte tout seul à sa hauteur. Que le titre tienne sur
     une ligne ou sur quatre, le texte est toujours posé sur un
     fond assez sombre pour rester lisible. */
.pleine__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(10,9,6,.38) 0%, rgba(10,9,6,.12) 50%,
              rgba(10,9,6,0) 85%);
}
.pleine__texte {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-top: clamp(3.5rem, 11vh, 7rem);
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  color: #fff;
  background: linear-gradient(to top,
              rgba(10,9,6,.80) 0%, rgba(10,9,6,.80) 62%,
              rgba(10,9,6,.52) 84%, rgba(10,9,6,0) 100%);
  /* Une ombre très large et très douce sous les lettres. Elle
     ne se voit pas, mais elle achève de garantir la lisibilité. */
  text-shadow: 0 1px 26px rgba(0,0,0,.5);
}
/* Variante : le texte au milieu de l'image (l'appel à l'action).
   Là, l'image est déjà assombrie en entier, pas de dégradé. */
.pleine__texte--milieu {
  top: 0;
  display: flex; align-items: center;
  background: none;
}
.pleine__texte h1, .pleine__texte h2 { color: #fff; }

/* La légende d'une image, en petit et décalée à droite : c'est
   le geste typographique des revues d'architecture. */
.legende {
  margin: 0 0 0 auto;
  max-width: 42em;
  font-size: .92rem; color: var(--encre-douce);
  padding-left: 1.6rem;
  border-left: 1px solid var(--trait);
}
@media (min-width: 900px) { .legende { width: 52%; } }


/* ---------- 8. LE RYTHME DES SUJETS ------------------------- */
/* Beaucoup d'air : c'est ce qui donne l'impression de calme. */
.sujet { padding: clamp(5rem, 12vh, 9.5rem) 0; }
.sujet--serre  { padding: clamp(3rem, 7vh, 5.5rem) 0; }
.sujet--papier { background: var(--papier-2); }
.sujet--sombre { background: var(--nuit); color: rgba(255,255,255,.8); }
.sujet--sombre h2, .sujet--sombre h3 { color: #fff; }

/* L'en-tête d'un sujet : surtitre, grand titre, une phrase.
   La largeur est donnée en rem et non en « ch » : sinon le
   grand titre en serif casse au bout de deux mots. */
.sujet__tete { max-width: 38rem; margin-bottom: clamp(3rem, 7vh, 5rem); }
.sujet__tete .chapo { margin-top: 1.6rem; }
.sujet__tete--centre { max-width: 34rem; margin-inline: auto; text-align: center; }
.sujet__tete--centre .surtitre { justify-content: center; }
.sujet__tete--centre .chapo { max-width: 40ch; margin-inline: auto; }


/* ---------- 9. LES DEUX COLONNES DE TEXTE ------------------- */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: 1.05fr 1fr; }
}


/* ---------- 10. LES RÉALISATIONS ----------------------------- */
/* Un projet = une immense image, puis son texte en dessous,
   décalé sur la droite comme dans une revue. */
.projet { display: block; text-decoration: none; color: inherit; }

.projet__cadre {
  position: relative; overflow: hidden;
  background: var(--papier-2);
  height: min(82vh, 740px);
}
.projet__cadre img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* EFFET 3 : l'image grossit très doucement au survol. */
  transition: transform 1s var(--pose);
}
.projet:hover .projet__cadre img,
.projet:focus-visible .projet__cadre img { transform: scale(1.035); }

.projet__pied {
  display: grid; gap: .6rem 3rem;
  padding: 1.8rem 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .projet__pied { grid-template-columns: 1fr 1.5fr; align-items: baseline; }
}
.projet__num {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--terre); font-weight: 600;
}
.projet__titre {
  margin: .3rem 0 0;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}
.projet__lieu {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-douce); margin: .7rem 0 0;
}
.projet__mot { margin: 0; color: var(--encre-douce); max-width: 46em; }

/* L'espace entre deux projets : très large, pour qu'on respire. */
.projets > * + * { margin-top: clamp(5rem, 11vh, 9rem); }


/* ---------- 11. LA BANDE DE DÉTAILS -------------------------- */
/* Trois photographies côte à côte, décalées d'un cran. */
.details {
  display: grid; gap: clamp(1rem, 2vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .details { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .details > :nth-child(2) { margin-top: clamp(3rem, 8vw, 6rem); }
  .details > :nth-child(3) { margin-top: clamp(1.5rem, 4vw, 3rem); }
}
.details figure { margin: 0; }
.details img { width: 100%; height: auto; }
.details figcaption {
  margin-top: .9rem;
  font-size: .84rem; color: var(--encre-douce);
}


/* ---------- 12. LA MÉTHODE, EN QUATRE TEMPS ------------------ */
/* Pas de cartes ni de cadres : quatre lignes, séparées par un
   simple filet. C'est plus calme et ça se lit mieux. */
.temps { list-style: none; margin: 0; padding: 0; }
.temps li {
  display: grid; gap: .5rem 3rem;
  grid-template-columns: 1fr;
  padding: clamp(1.8rem, 4vh, 2.8rem) 0;
  border-top: 1px solid var(--trait);
}
.temps li:last-child { border-bottom: 1px solid var(--trait); }
@media (min-width: 860px) {
  .temps li { grid-template-columns: 5rem 1fr 1.3fr; align-items: baseline; }
}
.temps__num {
  font-family: var(--titre);
  font-size: 1.5rem; color: var(--terre);
}
.temps h3 { margin: 0; }
.temps p { margin: 0; color: var(--encre-douce); }
.temps__duree {
  display: block; margin-top: .8rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-douce);
}


/* ---------- 13. LES PRESTATIONS ------------------------------ */
/* Une prestation = une grande image et un texte, alternés
   gauche / droite d'une prestation à l'autre. */
.offre {
  display: grid; gap: clamp(1.8rem, 4vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  /* L'image est nettement plus large que le texte : dans ce
     métier, c'est elle qui doit attirer l'œil en premier. */
  .offre { grid-template-columns: 1.45fr 1fr; }
  /* Une prestation sur deux est inversée : l'image passe à
     droite. Il faut alors inverser AUSSI la largeur des deux
     colonnes, sinon la grande image se retrouve dans la petite
     colonne et rapetisse. */
  .offre--inverse { grid-template-columns: 1fr 1.45fr; }
  .offre--inverse .offre__image { order: 2; }
}
.offre__image {
  margin: 0; overflow: hidden;
  background: var(--papier-2);
  aspect-ratio: 5 / 4;      /* les trois images font la même taille */
}
.offre__image img { width: 100%; height: 100%; object-fit: cover; }
.offre__prix {
  display: block; margin: 1.8rem 0 0;
  font-family: var(--titre); font-size: 2rem; color: var(--encre);
}
.offre__prix small {
  display: block; margin-top: .3rem;
  font-family: var(--texte); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-douce);
}
.offre__liste { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.offre__liste li {
  position: relative; padding-left: 1.6rem; margin-bottom: .6rem;
  color: var(--encre-douce); font-size: .96rem;
}
.offre__liste li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: var(--terre);
}
.offres > * + * { margin-top: clamp(4.5rem, 10vh, 8rem); }


/* ---------- 14. LE FORMULAIRE -------------------------------- */
.formulaire { display: grid; gap: 1.5rem; }
@media (min-width: 700px) {
  .formulaire { grid-template-columns: 1fr 1fr; }
  .formulaire .large { grid-column: 1 / -1; }
}
.champ { display: block; }
.champ span {
  display: block; margin-bottom: .55rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-douce); font-weight: 600;
}
.champ input, .champ textarea, .champ select {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--trait);
  padding: .95rem 1.1rem;
  border-radius: 0;
}
.champ textarea { min-height: 170px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 2px solid var(--terre); outline-offset: 1px;
}

.case { display: flex; gap: .8rem; align-items: flex-start; font-size: .9rem; }
.case input { width: 1.15rem; height: 1.15rem; margin-top: .28rem; flex: none; }
.case span { color: var(--encre-douce); }

.formulaire__reponse {
  display: none;
  padding: 1.1rem 1.3rem;
  background: var(--papier-2);
  border-left: 3px solid var(--terre);
  font-size: .95rem;
}
.formulaire__reponse--visible { display: block; }

/* Les coordonnées, à côté du formulaire. */
.coordonnees { list-style: none; margin: 0; padding: 0; }
.coordonnees li { padding: 1.3rem 0; border-top: 1px solid var(--trait); }
.coordonnees li:last-child { border-bottom: 1px solid var(--trait); }
.coordonnees b {
  display: block; margin-bottom: .3rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--encre-douce); font-weight: 600;
}
.coordonnees a { color: var(--encre); text-decoration-color: var(--trait); }


/* ---------- 15. LES PAGES LÉGALES ---------------------------- */
.legal { max-width: 720px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 2rem; }
/* Le petit encadré d'avertissement en tête de page. */
.encadre {
  padding: 1.4rem 1.6rem;
  background: var(--papier-2);
  border-left: 3px solid var(--terre);
  margin: 0 0 3rem;
}
.encadre p:last-child { margin-bottom: 0; }
.retour { display: inline-flex; margin-bottom: 2.5rem; }
.retour svg { width: 24px; }
.retour:hover svg, .retour:focus-visible svg { transform: translateX(-7px); }
.legal h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 3rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { padding-left: 1.2rem; color: var(--encre-douce); }
.legal li { margin-bottom: .5rem; }


/* ---------- 16. LE PIED DE PAGE ------------------------------ */
.pied {
  background: var(--nuit); color: rgba(255,255,255,.72);
  padding: clamp(4rem, 9vh, 6.5rem) 0 2.5rem;
  font-size: .95rem;
}
.pied__in {
  display: grid; gap: 2.8rem;
  grid-template-columns: 1fr;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
@media (min-width: 800px) { .pied__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied__nom {
  font-family: var(--titre); font-size: 1.6rem; color: #fff;
  margin: 0 0 .7rem;
}
.pied__titre {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terre-pale); margin: 0 0 1.1rem; font-weight: 600;
}
.pied__liens { display: flex; flex-direction: column; gap: .7rem; }
.pied__liens a { color: rgba(255,255,255,.78); text-decoration: none; }
.pied__liens a:hover, .pied__liens a:focus-visible {
  color: #fff; text-decoration: underline;
}
.pied__bas {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  justify-content: space-between;
  padding-top: 2.2rem;
  font-size: .82rem; color: rgba(255,255,255,.5);
}
.pied__bas p { margin: 0; }


/* ============================================================
   LES TROIS EFFETS
   ============================================================ */

/* ---- EFFET 1 : l'apparition au défilement -------------------
   IMPORTANT : l'état masqué n'existe QUE si la classe « js » a
   été posée sur la page par le script. Sans JavaScript, ou si le
   fichier ne se charge pas, rien n'est jamais caché et le site
   reste entièrement lisible. */
.js .venir {
  opacity: 0;
  transform: translateY(26px);
}
.js .venir--vu {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--pose), transform .9s var(--pose);
}
/* Dans une liste, chaque enfant part un cran après le précédent. */
.js .cascade > * { opacity: 0; transform: translateY(26px); }
.js .cascade.venir--vu > * {
  opacity: 1; transform: none;
  transition: opacity .9s var(--pose), transform .9s var(--pose);
  transition-delay: calc(var(--i, 0) * 110ms);
}
/* Un bloc déjà visible au chargement de la page s'affiche
   immédiatement, sans le moindre fondu. Voir le commentaire
   correspondant dans site.js. */
.js .venir--net, .js .venir--net > * { transition: none !important; }


/* ---- EFFET 2 : le glissement des grandes images -------------
   Fait entièrement en CSS, avec la « timeline de défilement ».
   Le navigateur le calcule sur la carte graphique, en dehors du
   fil principal : c'est pour cela que ça ne saccade jamais.
   Les navigateurs qui ne savent pas faire affichent simplement
   l'image fixe — et c'est très bien ainsi. */
@keyframes glisse {
  from { transform: translateY(-3.5%); }
  to   { transform: translateY(3.5%); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
    /* L'image est rendue un peu plus haute que son cadre et
       débordée en haut et en bas : elle a ainsi de la marge
       pour glisser sans jamais laisser de vide.
       Attention : le décalage est donné en « top » et non en
       « margin-top ». Un pourcentage de marge se calcule sur la
       LARGEUR du parent, ce qui décalerait beaucoup trop. */
    .glissant > img {
      position: absolute;
      left: 0; right: 0; top: -7%;
      width: 100%; height: 114%;
      animation: glisse linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}


/* ---- EFFET 3 : le zoom au survol d'une réalisation ----------
   Il est écrit plus haut, dans le bloc « .projet ». */


/* ---------- LA TRANSITION D'UNE PAGE À L'AUTRE ---------------
   Un simple fondu, en opacité seulement, très court. C'est ce
   qui donne l'impression d'un site d'un seul tenant alors qu'il
   y a bien quatre pages distinctes. Les navigateurs qui ne
   connaissent pas l'ignorent sans rien casser. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: linear;
}


/* ---------- « MOINS D'ANIMATIONS » --------------------------
   Si le visiteur a coché ce réglage sur son appareil, tout
   s'arrête net. Le site reste complet, simplement immobile. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  @view-transition { navigation: none; }
}


/* ---------- LES PETITS ÉCRANS ------------------------------- */
@media (max-width: 780px) {
  body { font-size: 16px; }

  /* ---------- LE MENU SUR TÉLÉPHONE -------------------------
     C'est le menu le plus important des trois démonstrations :
     ce site a quatre pages, on en change tout le temps.

     Il passe sous le nom, sur toute la largeur, et reste visible
     en permanence : pas de bouton à ouvrir, pas de JavaScript, et
     on voit toujours la page en cours.

     🔴 MESURÉ à 390 px : les quatre liens tenaient bien sur la
     ligne, mais ils n'occupaient que la largeur de leur texte,
     avec du vide entre eux. Le doigt tombait souvent à côté.
     Maintenant chaque lien s'étire pour occuper un quart de la
     ligne : les quatre zones se touchent, il n'y a plus de trou,
     et le trait de la page en cours court sous tout le quart.
     Vérifié jusqu'à 320 px de large : aucun débordement. */
  .entete__in {
    flex-direction: column; align-items: stretch;
    gap: 0; padding: .9rem 0 0;
  }
  .marque { justify-content: center; min-height: 44px; }
  .menu {
    gap: 0;
    margin-top: .9rem;
    border-top: 1px solid var(--trait);
    padding-top: 0;
  }
  .menu a {
    flex: 1 1 auto;
    text-align: center;
    font-size: .84rem;
    padding: .95rem .25rem;
    min-height: 50px;
    display: flex; align-items: center; justify-content: center;
  }
  .entete .bouton { display: none; }

  /* 🔴 MESURÉ à 360 px : le grand titre, calibré pour un écran
     large, retombait à 45 px et prenait quatre lignes. */
  h1 { font-size: clamp(2.5rem, 10.4vw, 4rem); }

  /* ---------- LES ZONES QUE L'ON TOUCHE DU DOIGT -------------
     🔴 MESURÉ : les liens fléchés « Le détail des prestations »
     et « Les six réalisations » — les deux appels à l'action de
     l'accueil — ne faisaient que 33 px de haut. Les liens du pied
     de page 26 px, le téléphone et l'e-mail de la page Contact
     18 px, et la case à cocher du formulaire 18 px de côté.
     Il en faut 44 pour un doigt. */
  .lien-fleche { min-height: 44px; padding-bottom: .6rem; }

  .pied__liens { gap: 0; }
  .pied__liens a { display: flex; align-items: center; min-height: 44px; }

  .coordonnees a { display: inline-flex; align-items: center; min-height: 44px; }
  .retour { min-height: 44px; align-items: center; }

  /* La case à cocher du consentement : plus grande, et tout le
     texte qui la suit sert aussi de zone à toucher (le <input>
     est à l'intérieur du <label>). */
  .case { padding: .45rem 0; }
  .case input { width: 1.5rem; height: 1.5rem; margin-top: .2rem; }

  .pleine--ouverture { height: min(78vh, 620px); }
  .pleine--haute     { height: 62vh; }
  .pleine--moyenne   { height: 46vh; }
  .pleine--basse     { height: 34vh; }
  .projet__cadre     { height: 62vh; }
}