/* Sites 2Cafes - page complete, systeme de la direction P (La pile).
   Une seule idee visuelle par ecran. Pas de grille de cartes pour raconter l'offre. */

:root{
  --bg:#E9EAE4;
  --paper:#FFFFFF;
  --ink:#14150F;
  --soft:#3B3D35;
  --mute:#65675E;
  --rule:#CFD1C9;
  --hair:#DEDFD8;
  --mark:#E1394F;
  /* La colonne suit la largeur de l'ecran au lieu de rester bloquee a 1180 px :
     sur un 2560, la page se reduisait a un ilot perdu entre 690 px de vide de chaque cote. */
  --wrap:min(92vw, 84rem);
  --pad:clamp(1.1rem, 3vw, 2.8rem);
}

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

/* Tout est en rem : faire grandir la racine fait grandir la page entiere.
   16 px jusqu'a 1280, 20 px a partir de 2560. */
html{font-size:clamp(16px, 12px + 0.3125vw, 20px)}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-width:320px;
}

.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums}

a{color:inherit}
img{max-width:100%}
button, input, textarea{font:inherit; color:inherit}

:where(a, button, input, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--mark); outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--ink); color:var(--bg); padding:.8rem 1.1rem; font-weight:600;
}
.skip-link:focus{left:0}

/* --- barre de titre --- */
.topbar{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(1rem,2.2vw,1.6rem) var(--pad) 0;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  font-family:'IBM Plex Mono', monospace; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
/* La pastille : le 2 d'Archivo vectorise, et un vrai point rond a la couleur de marque.
   Voir design/logo/. Le dessin est en SVG dans la page, il ne coute aucune requete. */
.topbar .brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none}
.pastille{width:1.55rem; height:1.55rem; flex:none}
.topbar b{color:var(--ink); font-weight:500}
.places{white-space:nowrap}

/* --- premier ecran --- */
.hero{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(1.2rem,3vw,2.4rem) var(--pad) clamp(2rem,5vw,3.6rem);
  display:grid; grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  gap:clamp(1.4rem,4vw,3.4rem); align-items:center;
  /* Plafonnee : sinon un 1440 de haut etirait le premier ecran a 1360 px
     pour 700 px de contenu, et la page paraissait vide. */
  min-height:min(calc(100vh - 5rem), 40rem);
}
h1{
  font-weight:800; font-size:clamp(1.85rem,4.2vw,3.6rem); line-height:1.04;
  letter-spacing:-.035em; max-width:13ch; text-wrap:balance;
}
h1 em{font-style:normal; color:var(--mark)}
.hero-say{
  margin-top:clamp(.7rem,1.4vw,1.05rem); font-size:clamp(.94rem,1.1vw,1.02rem);
  color:var(--soft); max-width:38ch;
}

.conditions{margin-top:clamp(1rem,2vw,1.5rem); border-top:1px solid var(--ink)}
.condition{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.42rem 0; border-bottom:1px solid var(--rule); font-size:.9rem;
}
.condition dd{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-weight:500; font-size:1rem; letter-spacing:-.03em; white-space:nowrap;
}
.condition.free dd, .condition.none dd{color:var(--mark)}

.cta{
  display:inline-flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:clamp(.9rem,1.8vw,1.3rem); background:var(--ink); color:var(--bg);
  text-decoration:none; font-weight:700; font-size:.97rem; padding:1rem 1.4rem;
  border:1px solid var(--ink); cursor:pointer;
}
.cta:hover{background:#000}
.cta svg{width:15px; height:15px; flex:none}

/* --- la pile --- */
.stack{position:relative; aspect-ratio:4/3; width:100%; margin-inline:auto}
.card{
  position:absolute; inset:0; margin:auto; width:88%; aspect-ratio:4/3;
  border:0; padding:0; background:var(--paper); border-radius:.35rem; overflow:hidden;
  cursor:pointer;
  box-shadow:0 .1rem .2rem rgba(20,21,15,.1), 0 1.2rem 2.6rem rgba(20,21,15,.18);
  transition:transform .38s cubic-bezier(.22,.7,.3,1), opacity .3s, box-shadow .3s;
}
.card img{display:block; width:100%; height:100%; object-fit:cover; object-position:left top}
.card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.5rem .7rem; background:rgba(255,255,255,.94); border-top:1px solid var(--rule);
  font-size:.76rem; font-weight:600; text-align:left;
}
.card figcaption span{
  font-family:'IBM Plex Mono', monospace; font-weight:400; color:var(--mute);
  font-size:.68rem; letter-spacing:.06em; white-space:nowrap;
}
.card:first-child:hover{box-shadow:0 .1rem .2rem rgba(20,21,15,.12), 0 1.8rem 3.4rem rgba(20,21,15,.24)}
.stack-hint{
  margin-top:.7rem; text-align:center; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}

/* --- bandes de contenu --- */
.band{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(2.4rem,6vw,4.6rem) var(--pad);
  border-top:1px solid var(--rule);
}
.eyebrow{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mark);
  margin-bottom:.9rem;
}
h2{
  font-weight:800; font-size:clamp(1.5rem,2.9vw,2.35rem); line-height:1.1;
  letter-spacing:-.03em; max-width:20ch; text-wrap:balance;
}
h3{font-weight:700; font-size:1.02rem; letter-spacing:-.01em}
.lead{margin-top:.9rem; font-size:clamp(.97rem,1.1vw,1.05rem); color:var(--soft); max-width:56ch}

/* A partir du grand format, le titre et son chapeau se repartissent sur deux colonnes.
   Sinon le texte reste tasse a gauche et la moitie droite de l'ecran reste vide. */
@media (min-width:1100px){
  .band:not(.demande){
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,5rem); align-items:start;
  }
  .band:not(.demande) > *{grid-column:1 / -1}
  .band:not(.demande) > .eyebrow{grid-column:1; grid-row:1}
  .band:not(.demande) > h2{grid-column:1; grid-row:2}
  .band:not(.demande) > .lead{grid-column:2; grid-row:2; margin-top:.35rem; max-width:46ch}
}

/* --- trois etapes --- */
.step-list{list-style:none; margin-top:clamp(1.4rem,3vw,2.2rem); border-top:1px solid var(--ink)}
.step-list li{
  display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:1rem;
  padding:clamp(.9rem,1.8vw,1.3rem) 0; border-bottom:1px solid var(--rule); align-items:start;
}
.step-list span{font-size:.8rem; color:var(--mark); padding-top:.15rem}
.step-list p{margin-top:.3rem; color:var(--soft); max-width:60ch; font-size:.95rem}

/* --- six exemples : c'est une galerie, pas une grille qui raconte l'offre --- */
.exemples-list{
  list-style:none; margin-top:clamp(1.4rem,3vw,2.2rem);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1.1rem,2.4vw,1.8rem);
}
.exemples-list a{display:block; text-decoration:none; color:inherit}
.exemples-list .vue{display:block; position:relative}
/* Marque posee sur l'image : le chapeau ne suffit pas, on regarde les vignettes. */
.exemples-list .tag{
  position:absolute; z-index:2; top:.55rem; left:.55rem;
  background:var(--ink); color:var(--bg); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:.28rem .5rem;
}
.exemples-list img{
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  object-position:left top; background:var(--paper); border:1px solid var(--rule);
  border-radius:.35rem; transition:transform .25s ease, box-shadow .25s ease;
}
.exemples-list a:hover img, .exemples-list a:focus-visible img{
  transform:translateY(-3px); box-shadow:0 1rem 2rem rgba(20,21,15,.16);
}
.exemples-list .nom{display:block; margin-top:.6rem; font-weight:700; font-size:.95rem; letter-spacing:-.012em}
.exemples-list .nom i{
  font-style:normal; font-weight:400; font-family:'IBM Plex Mono', monospace;
  font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--mute);
  margin-left:.45rem; white-space:nowrap;
}
.exemples-list .parti{display:block; margin-top:.15rem; font-size:.85rem; color:var(--soft)}

/* --- preuves : une image par ecran, en grand --- */
.proof{margin-top:clamp(1.4rem,3vw,2.4rem)}
.proof img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  object-position:left top; background:var(--paper); border:1px solid var(--rule);
  border-radius:.35rem;
}
.proof figcaption{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .8rem;
  margin-top:.6rem; font-size:.88rem; font-weight:700;
}
.proof figcaption span{
  font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:.74rem;
  letter-spacing:.07em; color:var(--mute); text-transform:uppercase;
}

/* --- lignes descriptives (60 euros) --- */
.rows{margin-top:clamp(1.4rem,3vw,2.2rem); border-top:1px solid var(--ink)}
.row{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:.4rem 2rem;
  padding:clamp(.75rem,1.5vw,1.05rem) 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.row dt{font-weight:700; font-size:1rem; letter-spacing:-.012em}
.row dd{color:var(--soft); font-size:.95rem}

/* --- propriete et sortie : la seule bande sombre --- */
.exit{
  background:var(--ink); color:var(--bg); max-width:none; border-top:0;
  padding-inline:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
}
.exit .eyebrow{color:#F0A7B1}
.exit .lead{color:#C9CBC2}

/* --- perimetre --- */
.scope-cols{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.4rem,3.5vw,3rem);
}
.scope-label{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
  padding-bottom:.5rem; border-bottom:1px solid var(--ink);
}
.scope-cols ul{list-style:none}
.scope-cols li{
  padding:.5rem 0 .5rem 1.4rem; border-bottom:1px solid var(--rule);
  font-size:.94rem; position:relative;
}
.scope-cols li::before{position:absolute; left:0; top:.5rem; font-family:'IBM Plex Mono',monospace}
.in li::before{content:"+"; color:var(--mark)}
.out li::before{content:"—"; color:var(--mute)}

/* --- FAQ --- */
.faq-list{margin-top:clamp(1.4rem,3vw,2.2rem); border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{
  cursor:pointer; list-style:none; padding:clamp(.8rem,1.6vw,1.05rem) 2.2rem clamp(.8rem,1.6vw,1.05rem) 0;
  font-weight:700; font-size:1rem; letter-spacing:-.012em; position:relative;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:'IBM Plex Mono', monospace; font-size:1.15rem; color:var(--mark);
}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{padding:0 0 1.1rem; color:var(--soft); max-width:62ch; font-size:.95rem}

/* --- formulaire --- */
.demande{
  display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
.signature{margin-top:1rem; font-size:.88rem; color:var(--mute)}
.form{display:flex; flex-direction:column; gap:.85rem}
.pair{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.85rem}
.form label{display:flex; flex-direction:column; gap:.35rem}
.form label > span{font-size:.78rem; letter-spacing:.05em; color:var(--mute); font-weight:600}
.form input, .form textarea{
  background:var(--paper); border:1px solid var(--rule); border-radius:0;
  padding:.8rem .9rem; width:100%;
  /* Jamais sous 16 px : en dessous, Safari iOS zoome au focus et sort la page du cadre.
     max() preserve la taille voulue sur grand ecran, ou la racine monte a 20 px. */
  font-size:max(16px, .97rem);
}
.form input:focus, .form textarea:focus{border-color:var(--ink); outline-offset:1px}
.form textarea{resize:vertical; min-height:7rem}
.form .invalid{border-color:var(--mark)}
.submit{margin-top:.4rem; justify-content:center}
.form-note{font-size:.82rem; color:var(--mute)}
.form-status{font-size:.9rem; font-weight:600}
.form-status.err{color:var(--mark)}
.rgpd{
  margin-top:.4rem; padding-top:.9rem; border-top:1px solid var(--rule);
  font-size:.78rem; line-height:1.55; color:var(--mute);
}
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Ecran de confirmation, en remplacement du formulaire. */
.sent{
  background:var(--paper); border:1px solid var(--ink); padding:clamp(1.2rem,2.6vw,2rem);
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-start;
}
.sent .eyebrow{margin-bottom:0}
.sent h3{font-size:clamp(1.1rem,1.8vw,1.4rem); letter-spacing:-.02em; max-width:26ch}
.sent p{color:var(--soft); font-size:.95rem; max-width:46ch}
.again{
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  padding:.7rem 1.1rem; font-weight:600; font-size:.9rem; cursor:pointer; margin-top:.3rem;
}

/* --- pied --- */
.footer{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(1.8rem,4vw,3rem) var(--pad) clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--ink);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 2rem;
}
.footer .brand{display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; letter-spacing:-.02em}
.footer .pastille{width:1.7rem; height:1.7rem}
.footer .slogan{color:var(--mute); font-size:.9rem; flex:1 1 18rem}
.footer nav{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.85rem}
.footer nav a{
  color:var(--soft);
  /* 44 px, seuil des recommandations Apple : les liens ne faisaient que 20 px. */
  display:inline-flex; align-items:center; min-height:44px;
}

/* --- telephone --- */

/* --- renvois vers les pages de contenu ---
   Une landing d'une page n'a pas de menu, et n'en veut pas. Les pages de fond se
   rejoignent donc depuis la section a laquelle elles se rattachent. */
.aussi{
  margin-top:clamp(1.2rem,2.5vw,1.8rem);
  display:flex; flex-wrap:wrap; gap:.2rem 1.4rem;
  font-size:.88rem;
}
.aussi a{
  color:var(--soft); text-underline-offset:.22em; text-decoration-thickness:1px;
  display:inline-flex; align-items:center; min-height:44px;
}
.aussi a:hover{color:var(--ink)}
.exit .aussi a{color:#C9CBC2}
.exit .aussi a:hover{color:var(--bg)}

@media (max-width:900px){
  .hero{
    grid-template-columns:1fr; gap:.85rem; align-items:start;
    min-height:0; padding-top:.7rem;
  }
  /* La signature de la barre de titre repliait celle-ci sur deux lignes en 390,
     cinq en 320, pour une information deja donnee par le pied. */
  .topbar .baseline{display:none}
  .topbar{padding-top:.8rem}
  /* Les six derniers pixels : Safari iOS n'affiche que 659 px sur un iPhone 13,
     pas 844, et la derniere condition tombait juste en dessous. */
  .conditions{margin-top:.75rem}
  .condition{padding:.36rem 0}
  .hero-stack{order:-1}
  h1{font-size:1.85rem; max-width:none}
  /* Le chapeau porte desormais le prix et l'engagement : il ne peut plus etre masque. */
  .hero-say{font-size:.93rem; margin-top:.55rem}
  .card{width:94%}
  .row{grid-template-columns:1fr; gap:.2rem}
  .exemples-list{grid-template-columns:1fr; gap:1.3rem}
  .scope-cols{grid-template-columns:1fr; gap:1.6rem}
  .demande{grid-template-columns:1fr; gap:1.4rem}
  .pair{grid-template-columns:1fr}
  .footer{gap:.5rem 1.2rem}
}