/* ========================================================================
   AVYQA — feuille de style unique
   Charte : encre #0B0F14 · vermillon #F94027 · blanc
   Règle absolue : le vermillon ne porte JAMAIS de texte (contraste 3,6:1
   sur blanc, sous le seuil de lisibilité). Il sert d'aplat, de filet et
   d'accent graphique. Les boutons sont en encre.
   Aucune ressource externe : polices système uniquement.
   ======================================================================== */

:root {
  --encre: #0B0F14;
  --encre-doux: #3A424D;
  --vermillon: #F94027;
  --blanc: #FFFFFF;
  --gris-fond: #F5F6F7;
  --gris-trait: #E2E5E8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --largeur: 1120px;
  --etroit: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--encre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--vermillon); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 750; }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; }

.contenu { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.etroit  { max-width: var(--etroit); }
.section { padding: 88px 0; }
.section--gris { background: var(--gris-fond); }
.section--encre { background: var(--encre); color: var(--blanc); }
.section--encre h1, .section--encre h2, .section--encre h3 { color: var(--blanc); }
.section--encre a { color: var(--blanc); }

/* ---- filet vermillon : la signature graphique de la marque ---- */
.filet { width: 64px; height: 7px; background: var(--vermillon); margin: 0 0 28px; }
.filet--centre { margin-left: auto; margin-right: auto; }

/* ---- en-tête ---- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--gris-trait);
}
.entete__inner { display: flex; align-items: center; justify-content: space-between;
                 gap: 24px; padding: 14px 24px; max-width: var(--largeur); margin: 0 auto; }
.entete__logo img { width: 148px; }
.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav a { font-size: .95rem; font-weight: 600; text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--vermillon);
               text-decoration-thickness: 2px; }

/* En dessous de 900px l'en-tête passe en colonne : le logo au-dessus, la
   navigation en dessous. Sans cette règle, le logo se retrouve encadré par
   des liens qui s'enroulent de part et d'autre. Le sticky est également
   désactivé, car il mangerait un tiers de l'écran sur un téléphone. */
@media (max-width: 900px) {
  .entete { position: static; }
  .entete__inner { flex-direction: column; align-items: flex-start;
                   gap: 12px; padding: 16px 24px 14px; }
  .entete__logo img { width: 126px; }
  .nav { gap: 14px 20px; }
  .nav a { font-size: .92rem; }
}

/* ---- boutons ---- */
.bouton {
  display: inline-block; padding: 15px 28px;
  background: var(--encre); color: var(--blanc);
  font-weight: 650; font-size: 1rem; text-decoration: none;
  border: 2px solid var(--encre); transition: background .15s, color .15s;
}
.bouton:hover { background: var(--blanc); color: var(--encre); }
.bouton--ligne { background: transparent; color: var(--encre); }
.bouton--ligne:hover { background: var(--encre); color: var(--blanc); }
.section--encre .bouton { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.section--encre .bouton:hover { background: transparent; color: var(--blanc); }

/* ---- accroche ---- */
.hero { padding: 96px 0 72px; }
.hero p.chapeau { font-size: 1.22rem; color: var(--encre-doux); max-width: 46ch; }
.descripteur { font-size: .82rem; font-weight: 700; letter-spacing: .16em;
               text-transform: uppercase; color: var(--encre-doux); margin-bottom: 20px; }

/* ---- grilles ---- */
.grille { display: grid; gap: 28px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero { padding: 60px 0 48px; }
}

/* ---- les deux portes de la page d'accueil ---- */
.porte {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 2px solid var(--encre);
  padding: 38px 34px; text-decoration: none; color: inherit;
  transition: transform .15s;
}
.porte:hover { transform: translateY(-4px); }
.porte__pour { font-size: .8rem; font-weight: 700; letter-spacing: .14em;
               text-transform: uppercase; color: var(--encre-doux); margin-bottom: 14px; }
.porte h3 { font-size: 1.5rem; margin-bottom: 12px; }
.porte p { color: var(--encre-doux); font-size: 1rem; }
.porte ul { margin: 4px 0 22px; padding-left: 20px; color: var(--encre-doux); font-size: 1rem; }
.porte li { margin-bottom: 6px; }
.porte__prix { margin-top: auto; padding-top: 20px; border-top: 3px solid var(--vermillon);
               font-weight: 700; font-size: 1.05rem; }
.porte__prix span { display: block; font-weight: 400; font-size: .92rem;
                    color: var(--encre-doux); margin-top: 4px; }

/* ---- cartes génériques ---- */
.carte { background: var(--blanc); border: 1px solid var(--gris-trait); padding: 30px 28px; }
.carte h3 { margin-bottom: 10px; }
.carte p { color: var(--encre-doux); font-size: 1rem; margin-bottom: 0; }
.section--gris .carte { background: var(--blanc); }
.section--encre .carte { background: transparent; border-color: rgba(255,255,255,.22); }
.section--encre .carte p { color: rgba(255,255,255,.8); }

/* ---- réalisations ---- */
.realisation { border-top: 1px solid var(--gris-trait); padding: 42px 0; }
.realisation:first-of-type { border-top: none; }
.realisation__nom { font-family: var(--sans); font-weight: 800; font-size: 1.5rem;
                    letter-spacing: -0.02em; margin-bottom: 6px; }
.realisation__url { font-size: .9rem; color: var(--encre-doux); margin-bottom: 16px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.etiquettes li { font-size: .82rem; font-weight: 600; padding: 5px 12px;
                 background: var(--gris-fond); border: 1px solid var(--gris-trait); }

/* ---- paliers tarifaires ---- */
.palier { border: 1px solid var(--gris-trait); padding: 30px 28px; display: flex; flex-direction: column; }
.palier__num { font-size: .8rem; font-weight: 700; letter-spacing: .14em;
               text-transform: uppercase; color: var(--encre-doux); }
.palier h3 { margin: 8px 0 12px; }
.palier p { font-size: .98rem; color: var(--encre-doux); }
.palier__prix { margin-top: auto; padding-top: 18px; border-top: 3px solid var(--vermillon);
                font-weight: 700; }
.palier__prix span { display: block; font-weight: 400; font-size: .9rem; color: var(--encre-doux); }

/* ---- citation / mise en exergue ---- */
.exergue { border-left: 6px solid var(--vermillon); padding: 6px 0 6px 26px;
           font-size: 1.15rem; margin: 34px 0; }

/* ---- liste à puces vermillon ---- */
.liste-marquee { list-style: none; padding: 0; margin: 0; }
.liste-marquee li { position: relative; padding-left: 30px; margin-bottom: 14px; }
.liste-marquee li::before { content: ""; position: absolute; left: 0; top: .62em;
                            width: 16px; height: 5px; background: var(--vermillon); }

/* ---- pied de page ---- */
.pied { background: var(--encre); color: rgba(255,255,255,.72); padding: 60px 0 34px; font-size: .93rem; }
.pied a { color: rgba(255,255,255,.9); }
.pied img { width: 132px; margin-bottom: 20px; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
@media (max-width: 760px) { .pied__grille { grid-template-columns: 1fr; } }
.pied__titre { color: var(--blanc); font-size: .82rem; letter-spacing: .14em;
               text-transform: uppercase; margin: 0 0 14px; font-weight: 700; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied__bas { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16);
             display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .86rem; }

/* ---- pages de contenu long ---- */
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.7em; }
.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--gris-trait);
                       vertical-align: top; }
.prose th { font-weight: 700; width: 34%; }

/* ---- lien d'évitement (accessibilité clavier) ---- */
.evitement { position: absolute; left: -9999px; top: 0; background: var(--encre);
             color: var(--blanc); padding: 12px 20px; z-index: 100; }
.evitement:focus { left: 0; }

/* ---- cartes cliquables ---- */
.carte--lien { text-decoration: none; color: inherit; display: flex; flex-direction: column;
               transition: transform .15s, border-color .15s; }
.carte--lien:hover { transform: translateY(-3px); border-color: var(--encre); }
.carte__lire { margin-top: auto; padding-top: 18px; font-size: .9rem; font-weight: 650;
               display: inline-flex; align-items: center; gap: 9px; }
.carte__lire::before { content: ""; width: 18px; height: 5px; background: var(--vermillon); }

/* ---- intro de section, notes ---- */
.intro { max-width: 62ch; color: var(--encre-doux); }
.section--encre .intro { color: rgba(255,255,255,.8); }
.note { margin-top: 28px; color: var(--encre-doux); font-size: .98rem; }

/* ---- fiches techniques ---- */
.fiche { width: 100%; border-collapse: collapse; margin: 34px 0; font-size: .96rem; }
.fiche caption { text-align: left; font-weight: 700; font-size: .82rem; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--encre-doux); padding-bottom: 12px; }
.fiche th, .fiche td { text-align: left; padding: 13px 14px; vertical-align: top;
                       border-bottom: 1px solid var(--gris-trait); }
.fiche th { font-weight: 700; width: 34%; }
@media (max-width: 560px) {
  .fiche th, .fiche td { display: block; width: auto; }
  .fiche th { border-bottom: none; padding-bottom: 2px; }
}

.fiche-url { font-size: .95rem; color: var(--encre-doux); margin-bottom: 34px;
             padding-bottom: 20px; border-bottom: 1px solid var(--gris-trait); }
.fiche-url__liens { display: block; font-weight: 650; color: var(--encre); margin-bottom: 5px; }
.fiche-url__liens a { text-decoration-thickness: 2px; text-decoration-color: var(--vermillon); }
.fiche-url__mention { display: block; }
.courriel { font-size: 1.3rem; font-weight: 700; }

/* ---- bandeau des CGV en cours de validation ---- */
.brouillon { background: var(--vermillon); color: #fff; padding: 20px 0; }
.brouillon p { margin: 0; font-weight: 700; font-size: 1.05rem; }
.brouillon span { display: block; font-weight: 400; font-size: .95rem; margin-top: 6px; }
.apreciser { background: var(--gris-fond); border-left: 4px solid var(--encre-doux);
             padding: 14px 18px; font-size: .95rem; color: var(--encre-doux); }

/* ---- images ---- */
.visuel { margin: 34px 0; }
.visuel img { width: 100%; height: auto; display: block; }
.visuel figcaption { margin-top: 10px; font-size: .89rem; color: var(--encre-doux);
                     padding-left: 26px; position: relative; }
.visuel figcaption::before { content: ""; position: absolute; left: 0; top: .58em;
                             width: 16px; height: 4px; background: var(--vermillon); }

/* portrait : flottant à droite du texte sur grand écran, pleine largeur ensuite */
.visuel--portrait { float: right; width: 260px; margin: 6px 0 26px 36px; }
.visuel--portrait img { border: 1px solid var(--gris-trait); }
@media (max-width: 680px) {
  .visuel--portrait { float: none; width: 200px; margin: 0 0 26px; }
}

/* captures d'écran : encadrées pour ne pas se confondre avec la page */
.captures { margin: 40px 0; }
.visuel--capture img { border: 1px solid var(--gris-trait); background: var(--gris-fond); }
.visuel--capture { margin: 0 0 32px; }

/* ---- formulaire de contact ---- */
.formulaire { margin: 30px 0 40px; max-width: 34rem; }
.champ { display: block; margin-bottom: 22px; }
.champ label { display: block; font-weight: 650; font-size: .95rem; margin-bottom: 7px; }
.champ label span[aria-hidden] { color: var(--vermillon); }
.facultatif { font-weight: 400; font-size: .82rem; color: var(--encre-doux);
              text-transform: none; letter-spacing: 0; }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre);
  padding: 12px 14px; border: 2px solid var(--gris-trait); background: var(--blanc);
  border-radius: 0; -webkit-appearance: none;
}
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--encre);
}
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.formulaire .bouton { border: 2px solid var(--encre); cursor: pointer; font: inherit;
                      font-weight: 650; padding: 15px 28px; }
.note-form { font-size: .9rem; color: var(--encre-doux); margin-top: 14px; }

/* champ leurre : hors écran plutôt que display:none, que certains robots détectent */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px;
               overflow: hidden; }

.saut { display: block; height: 1px; }

/* ── Encadré « L'essentiel » en tête des études de cas ──────────────────
   Le lecteur pressé doit obtenir la substance en vingt secondes ; la
   démonstration détaillée reste intacte en dessous pour qui veut creuser. */
.essentiel { background: var(--gris-fond); border-left: 3px solid var(--vermillon);
             padding: 24px 28px 26px; margin: 0 0 38px; border-radius: 0 4px 4px 0; }
.essentiel__titre { font-family: var(--sans); font-size: .72rem; font-weight: 700;
                    letter-spacing: .13em; text-transform: uppercase;
                    color: var(--vermillon); margin: 0 0 14px; }
.essentiel__points { list-style: none; margin: 0; padding: 0; }
.essentiel__points li { position: relative; padding-left: 20px; margin-bottom: 12px;
                        font-size: .97rem; line-height: 1.6; color: var(--encre-doux); }
.essentiel__points li:last-child { margin-bottom: 0; }
.essentiel__points li::before { content: ""; position: absolute; left: 0; top: .62em;
                                width: 7px; height: 7px; border-radius: 50%;
                                background: var(--vermillon); opacity: .55; }
.essentiel__points strong { color: var(--encre); font-weight: 650; }
@media (max-width: 620px) { .essentiel { padding: 20px 20px 22px; } }

/* ── Bandeau d'illustration en ouverture de page ────────────────────────
   Les illustrations ne figurent que sur les pages sans capture d'écran.
   Elles réchauffent l'entrée en matière ; elles ne prouvent rien, et ne
   doivent jamais passer devant une capture réelle. */
.section--illustration { padding-top: 0; padding-bottom: 64px; }
.visuel--illustration { margin: 0 auto; max-width: 820px; }
.visuel--illustration img { display: block; width: 100%; height: auto;
                            border-radius: 6px; }
@media (max-width: 760px) { .visuel--illustration { border-radius: 0; } }

/* listes déroulantes du formulaire : mêmes bords que les champs texte.
   La flèche est dessinée en SVG intégré — aucune ressource externe, donc
   la promesse « site sans traceur » tient et la CSP reste stricte. */
.champ select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre);
  padding: 12px 40px 12px 14px; border: 2px solid var(--gris-trait);
  background: var(--blanc); border-radius: 0; -webkit-appearance: none;
  appearance: none; cursor: pointer; line-height: 1.3;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233A424D' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.champ select:focus { outline: none; border-color: var(--encre); }
/* deux listes par ligne sur grand écran, empilées sur téléphone */
.champs-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .champs-paire { grid-template-columns: 1fr; } }