/* Terrena Pro — Chemillé-en-Anjou
   Reproduction pédagogique du site espaceterrena.fr.

   Les valeurs de ce fichier ne sont pas un choix de goût : elles ont été
   MESURÉES sur le site réel, dans le navigateur, à 1440 px de large, avec
   copie.mjs (voir controle/controle.md). C'est ce qui distingue une copie
   d'une approximation — et c'est aussi ce que l'élève peut vérifier lui-même.

   Mesures du 2026-11-12 sur https://www.espaceterrena.fr/ :
     accent des titres et des boutons  rgb(94,175,50)   → --vert
     fond de page                      rgb(247,248,250) → --fond
     couleur du texte                  rgb(28,28,25)    → --encre
     H1 : 40 px, graisse 600           → h1
     arrondi des boutons               6 px             → --rayon
     police du corps                   "Open Sans", sans-serif
     police des titres                 rooney_sans (propriétaire, non servie)

   Deux réserves, assumées et à signaler à l'élève :
   1. rooney_sans est une police payante que le site charge lui-même ; nous ne
      la redistribuons pas, le rendu s'en rapproche sans l'atteindre.
   2. La page réelle mesure 16 269 px de haut, notre copie 6 000 px environ :
      nous reproduisons la STRUCTURE et le STYLE de la page d'accueil, pas ses
      40 blocs de contenu. Les données commerciales sont fictives. */

:root{
  /* -- jetons mesurés sur le site réel -- */
  --vert:       #5eaf32;   /* accent réel : titres, boutons */
  --vert-fonce: #457f26;   /* survol : même teinte, plus appuyée */
  --vert-pale:  #eef6e7;   /* fond de zone claire, dérivé de l'accent */
  --fond:       #f7f8fa;   /* fond de page réel */
  --encre:      #1c1c19;   /* couleur de texte réelle */
  --gris:       #5c615e;
  --trait:      #e2e6e2;
  --bois:       #a8763e;   /* non mesuré : notre marque-page pédagogique */
  --aubergine:  #552c31;   /* fond réel du pied : rgb(85,44,49) */
  --vert-clair: #9ccc6a;   /* vert d'accent éclairci, pour les liens sur fond sombre */
  --rayon:      6px;       /* arrondi réel des boutons */
  --largeur:    1180px;    /* le site réel travaille sur une pleine largeur */

  /* -- polices : Open Sans est celle du site, servie en secours système -- */
  --texte: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --titres: rooney_sans, "Open Sans", "Segoe UI", system-ui, Arial, sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

/* Tailles exprimées en pixels MESURÉS, et non en rem : un rem dépend de la
   taille de la racine, donc changer l'une ferait dériver tout le reste et l'on
   ne saurait plus quelle valeur a été relevée sur le site. Les valeurs ci-dessous
   sont celles relevées dans le navigateur sur espaceterrena.fr à 1440 px. */
body{
  margin:0;
  font-family:var(--texte);
  color:var(--encre);
  background:var(--fond);
  line-height:1.5;
  font-size:20px;
}

.boite{max-width:var(--largeur);margin:0 auto;padding:0 22px}

/* Le site réel compose ses titres en 40 px / graisse 600, en vert d'accent.
   Une copie qui mettrait ses titres en noir et en 28 px ne serait pas la même
   enseigne. */
/* Carte des titres, relevée sur le site réel : les titres d'univers sont des
   H1 de 40 px, les sous-titres de section des H2 de 22 px, les titres de carte
   des H3 de 24 px, les intitulés de colonnes du pied des H2 de 18 px. Le site
   réel n'imbrique pas ces niveaux — c'est le propre d'une page Elementor. */
h1{font-family:var(--titres);font-size:40px;line-height:1.16;font-weight:600;
   margin:.35em 0 .5em;letter-spacing:-.02em;color:var(--vert)}
h2{font-family:var(--titres);font-size:22px;font-weight:600;margin:0 0 1.1em;
   color:var(--vert);letter-spacing:-.01em}
h3{font-family:var(--titres);font-size:22px;font-weight:600;margin:0 0 .5em;color:var(--encre)}
h4{font-family:var(--titres);font-size:17px;font-weight:600;margin:0 0 .4em;color:var(--encre)}

a{color:var(--vert-fonce)}

/* ---------------------------------------------------------------- logo */
/* Le logo réel est une image ; nous l'utilisons telle quelle plutôt que de
   réinventer une typographie que l'élève reconnaîtrait comme fausse. */
.logo img{display:block;height:52px;width:auto}

/* -------------------------------------------------------------- bandeau */
.bandeau{
  background:#fff;border-bottom:3px solid var(--vert);
  position:sticky;top:0;z-index:20;
  box-shadow:0 1px 10px rgba(0,0,0,.06);
}
.bandeau .enveloppe{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}

.menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.menu > a,.menu summary{
  display:block;padding:.52em .78em;border-radius:var(--rayon);
  text-decoration:none;color:var(--encre);font-size:18px;font-weight:400;
  cursor:pointer;list-style:none;
}
.menu > a:hover,.menu summary:hover{background:var(--vert-pale);color:var(--vert-fonce)}
.menu .sous{position:relative}
.menu .sous div{
  position:absolute;left:0;top:100%;min-width:210px;background:#fff;
  border:1px solid var(--trait);border-radius:var(--rayon);
  box-shadow:0 8px 22px rgba(0,0,0,.12);padding:6px;display:none;
}
.menu .sous[open] div{display:block}
.menu .sous a{display:block;padding:.42em .7em;border-radius:var(--rayon);
  text-decoration:none;color:var(--encre);font-size:16px}
.menu .sous a:hover{background:var(--vert-pale);color:var(--vert-fonce)}

/* Bouton : le site réel peint ses appels à l'action en rgb(94,175,50) avec un
   arrondi de 6 px et un texte presque blanc. Reproduit à l'identique. */
.bouton,.menu-connexion{
  display:inline-block;background:var(--vert);color:#f7f8fa;
  border:0;border-radius:var(--rayon);padding:.62em 1.15em;
  font-weight:600;text-decoration:none;cursor:pointer;font-size:20px;
}
.bouton:hover,.menu-connexion:hover{background:var(--vert-fonce);color:#fff}
.menu-connexion{margin-left:6px}

/* ---------------------------------------------------------------- hero */
.hero{background:#fff;padding:48px 0 40px;border-bottom:1px solid var(--trait)}
.hero .boite{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center}
.sur-titre{margin:0;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.chapeau{font-size:20px;max-width:52ch}
.hero .photo{width:100%;height:auto;border-radius:var(--rayon);display:block}
.avertissement-pedago{
  margin-top:22px;background:var(--vert-pale);
  border-left:4px solid var(--vert);padding:.6em 1em;font-size:16px;
  border-radius:0 var(--rayon) var(--rayon) 0;
}

/* -------------------------------------------------------------- sections */
section{padding:56px 0}
.clair{background:#fff;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}

.de-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.note{font-size:15px;color:var(--gris)}
.lie{font-size:16px;color:var(--bois);font-style:italic}

/* actualites : le site réel présente trois cartes avec la photo de l'article.
   Nos vignettes sont donc de vraies images, plus des aplats de couleur. */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cartes article{background:#fff;border:1px solid var(--trait);border-radius:var(--rayon);
  padding:14px;display:flex;flex-direction:column}
.cartes img{width:100%;height:170px;object-fit:cover;border-radius:var(--rayon);margin-bottom:12px}
/* Le site réel compose ses titres de carte en 24 px / graisse 400, quand ses
   autres H3 sont en 22 px / 600 : deux emplois différents du même niveau. */
.cartes h3{font-size:24px;font-weight:400;line-height:1.25;margin:0 0 .5em}
.date{font-size:15px;color:var(--gris);margin:0}

/* univers : le site réel ouvre chaque univers sur son pictogramme et une
   bande d'illustration. Nous reprenons ces deux éléments, récupérés du site. */
.univers{border-left:4px solid var(--vert);padding:2px 0 2px 20px;margin-bottom:30px}
.uni-tete{display:flex;align-items:center;gap:12px}
.uni-tete img{width:44px;height:44px;flex:none;object-fit:contain}
.univers p{margin:.4em 0 0;max-width:88ch}
.univers .bande{display:block;width:100%;height:120px;object-fit:cover;
  object-position:center 62%;border-radius:var(--rayon);margin-top:12px}

/* fidelite */
.bareme{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 30px}
.bareme div{background:var(--vert-pale);border:1px solid #d6e8ca;border-radius:var(--rayon);
  padding:16px;font-size:18px;text-align:center}
.gros{display:block;font-size:34px;font-weight:800;color:var(--vert-fonce);line-height:1.1}

ul{padding-left:1.2em}
li{margin-bottom:.4em}

/* magasin */
.fiche-magasin{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
address{font-style:normal;line-height:1.9}
.horaires{border-collapse:collapse;font-size:17px}
.horaires td{padding:.2em .8em .2em 0;border-bottom:1px solid var(--trait)}
.etoile{color:var(--bois);font-size:15px}

/* ------------------------------------------------------------ pied de page */
/* Le pied réel n'est pas vert ni noir : son fond est un brun aubergine,
   rgb(85,44,49), et ses titres de colonne sont blancs en 18 px / graisse 500.
   Une copie en vert sombre passerait pour une autre enseigne. */
footer{background:var(--aubergine);color:#fff;padding:52px 0 0;font-size:16px}
.pied{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;align-items:start}
.pied h2{font-size:18px;font-weight:500;color:#fff;margin:0 0 .9em;letter-spacing:0}
footer p{margin:0 0 .9em}
footer a{color:#fff;text-decoration:underline}
footer a:hover{color:var(--vert-clair)}
footer address{font-style:normal;line-height:1.7}
.pied .enseigne{color:var(--vert-clair)}
.pied .bouton{color:#f7f8fa;text-decoration:none;padding:.55em 1.1em;font-size:17px}
.reseaux{display:flex;gap:10px}
.reseaux a{display:inline-grid;place-items:center;width:38px;height:34px;
  background:rgba(255,255,255,.16);border-radius:var(--rayon);
  font-size:13px;text-decoration:none;overflow:hidden;
  text-indent:-999px;white-space:nowrap}
.reseaux a::before{text-indent:0;font-weight:700}
.reseaux a.fb::before{content:"f";font-size:19px}
.reseaux a.ig::before{content:"◎";font-size:17px}
.pedago{border-top:1px solid rgba(255,255,255,.18);margin-top:34px;padding-top:22px}
.pedago p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin:0}
.pied-legal{border-top:1px solid rgba(255,255,255,.18);margin-top:26px;padding:16px 0 20px;
  font-size:15px}
.enveloppe-legale{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.copyright{margin:0}
.liens-legaux{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.liens-legaux span{opacity:.5}

/* responsive */
@media (max-width:900px){
  h1{font-size:31px}
  .hero .boite,.de-colonnes,.cartes,.fiche-magasin,.bareme{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr 1fr}
  .cartes,.bareme{gap:14px}
  section{padding:38px 0}
  .univers .bande{height:84px}
}