/* ============================================================================
   persorama.css — dev.persorama.com
   Cree le 07/08/2026.

   PROPORTIONS : toutes les dimensions et tous les espacements sortent de la
   suite de Fibonacci (3 5 8 13 21 34 55 89 144 233 377 610) et le decoupage
   principal suit le nombre d'or (61,8 / 38,2). Aucune valeur arbitraire :
   quand deux elements doivent differer, ils different d'un cran de la suite,
   ce qui produit un rythme regulier sans avoir a en decider a chaque fois.

   COULEURS : elles ne sont pas choisies pour plaire mais pour ce qu'elles font.
   - Bleu nuit dominant : c'est la couleur de la competence technique et de la
     fiabilite, celle qu'emploient tous les fabricants industriels du secteur.
     Un acheteur B2B cherche un fournisseur serieux, pas une marque amusante.
   - Ambre en accent UNIQUE : complementaire du bleu, donc contraste maximal.
     Reserve aux appels a l'action. Un seul accent par ecran = une seule action
     evidente ; deux accents se neutralisent et le visiteur hesite.
   - Fond ivoire tres legerement chaud plutot que blanc pur ou gris neutre :
     reduit la fatigue de lecture et rechauffe une page tres technique.
   ========================================================================== */

:root {
    /* Suite de Fibonacci, en pixels */
    --e1: 3px;   --e2: 5px;   --e3: 8px;   --e4: 13px;  --e5: 21px;
    --e6: 34px;  --e7: 55px;  --e8: 89px;  --e9: 144px; --e10: 233px;
    --e11: 377px; --e12: 610px;

    --bleu-nuit:   #10243a;
    --bleu-profond:#1b3a5c;
    --bleu-clair:  #2f6390;
    --ambre:       #e08a1e;
    --ambre-vif:   #f5a53a;
    --ivoire:      #fbf8f3;
    --ivoire-ombre:#f2ece2;
    --encre:       #16202b;
    --encre-douce: #4a5866;
    --bord:        #ded5c8;
    --succes:      #2f7d55;

    --rayon:  var(--e3);
    --ombre:  0 var(--e1) var(--e4) rgba(16, 36, 58, .09);
    --ombre-f:0 var(--e2) var(--e6) rgba(16, 36, 58, .16);

    /* 1,618 : le meme rapport que la grille, applique a l'interligne */
    --interligne: 1.618;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--e4);
    line-height: var(--interligne);
    color: var(--encre);
    background: var(--ivoire);
    -webkit-font-smoothing: antialiased;
}

/* Echelle typographique : chaque niveau est un cran de Fibonacci */
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--e5); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--e7); }
h2 { font-size: var(--e6); }
h3 { font-size: var(--e5); }
p  { margin: 0 0 var(--e5); }
a  { color: var(--bleu-clair); }

.contenu { max-width: 1220px; margin: 0 auto; padding: 0 var(--e5); }

.surtitre {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--ambre);
    margin-bottom: var(--e4);
}
.section { padding: var(--e8) 0; }
.section--sombre { background: var(--bleu-nuit); color: var(--ivoire); }
.section--sombre h2 { color: #fff; }
.section--creme { background: var(--ivoire-ombre); }
.intro { max-width: 680px; color: var(--encre-douce); font-size: var(--e5); }
.section--sombre .intro { color: rgba(251, 248, 243, .78); }

/* ---------------------------------------------------------------- en-tete */
.entete {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 248, 243, .96);
    backdrop-filter: blur(var(--e3));
    border-bottom: 1px solid var(--bord);
}
.entete__in { display: flex; align-items: center; gap: var(--e5); height: var(--e7); }
.logo { display: flex; align-items: center; gap: var(--e3); font-weight: 800; font-size: var(--e5); color: var(--bleu-nuit); text-decoration: none; letter-spacing: -.02em; }
.logo__marque { width: var(--e6); height: var(--e6); }
.logo__dev { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--ambre); padding: 2px var(--e2); border-radius: var(--e1); }
.nav { display: flex; gap: var(--e5); margin-left: auto; align-items: center; }
.nav a { color: var(--encre-douce); text-decoration: none; font-weight: 600; font-size: var(--e4); }
.nav a:hover { color: var(--bleu-nuit); }
.select-langue { border: 1px solid var(--bord); background: #fff; border-radius: var(--rayon); padding: var(--e2) var(--e3); font: inherit; font-size: var(--e4); color: var(--encre); }

/* ---------------------------------------------------------------- boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e3);
    padding: var(--e4) var(--e6);
    border: 0; border-radius: var(--rayon);
    font: inherit; font-size: var(--e4); font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* L'ambre est reserve a l'action principale. S'il apparaissait ailleurs, il
   cesserait d'etre un signal. */
.btn--action { background: var(--ambre); color: #fff; box-shadow: var(--ombre); }
.btn--action:hover { background: var(--ambre-vif); transform: translateY(-1px); box-shadow: var(--ombre-f); }
.btn--fantome { background: transparent; color: var(--ivoire); border: 1px solid rgba(251,248,243,.35); }
.btn--fantome:hover { background: rgba(251,248,243,.1); }
.btn--neutre { background: #fff; color: var(--bleu-nuit); border: 1px solid var(--bord); }
.btn--neutre:hover { border-color: var(--bleu-clair); }
.btn--large { width: 100%; padding: var(--e5); font-size: var(--e5); }

/* ------------------------------------------------------------------- hero
   Decoupage 61,8 / 38,2 : le discours a gauche, le formulaire a droite.
   Le formulaire occupe la portion mineure mais reste visible sans defiler —
   c'est ce que font les sept references du secteur, et pour une raison :
   l'acheteur qui sait deja ce qu'il veut ne doit pas avoir a chercher. */
.hero { background: linear-gradient(160deg, var(--bleu-nuit) 0%, var(--bleu-profond) 100%); color: var(--ivoire); padding: var(--e8) 0 var(--e9); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: calc(var(--e9) * -1); top: calc(var(--e7) * -1); width: var(--e12); height: var(--e12); border-radius: 50%; background: radial-gradient(circle, rgba(224,138,30,.16) 0%, transparent 68%); }
.hero__grille { display: grid; grid-template-columns: 61.8fr 38.2fr; gap: var(--e7); align-items: start; position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 13em; }
.hero__texte { font-size: var(--e5); color: rgba(251,248,243,.82); max-width: 34em; }
.hero__actions { display: flex; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e6); }

/* ------------------------------------------------------- bandeau de preuve */
.preuves { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); margin-top: var(--e8); padding-top: var(--e6); border-top: 1px solid rgba(251,248,243,.15); position: relative; z-index: 1; }
.preuve__titre { font-weight: 700; font-size: var(--e5); color: #fff; margin-bottom: var(--e2); }
.preuve__texte { font-size: var(--e4); color: rgba(251,248,243,.66); }

/* ------------------------------------------------------------ technologies */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--e10), 1fr)); gap: var(--e5); margin-top: var(--e7); }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--e4); padding: var(--e6); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.carte:hover { transform: translateY(calc(var(--e1) * -1)); box-shadow: var(--ombre-f); border-color: var(--bleu-clair); }
.carte__icone { width: var(--e7); height: var(--e7); border-radius: var(--rayon); background: var(--ivoire-ombre); display: flex; align-items: center; justify-content: center; margin-bottom: var(--e5); color: var(--bleu-profond); }
.carte h3 { margin-bottom: var(--e3); }
.carte p { color: var(--encre-douce); font-size: var(--e4); margin-bottom: var(--e5); }
.carte__faits { display: flex; flex-wrap: wrap; gap: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--ivoire-ombre); font-size: 12px; color: var(--encre-douce); }
.carte__fait b { display: block; color: var(--bleu-nuit); font-size: var(--e4); }

/* ------------------------------------------------------------------ etapes */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--e10), 1fr)); gap: var(--e6); margin-top: var(--e7); counter-reset: etape; }
.etape { counter-increment: etape; position: relative; padding-top: var(--e6); }
.etape::before { content: counter(etape); position: absolute; top: 0; left: 0; font-size: var(--e6); font-weight: 800; color: var(--ambre); line-height: 1; opacity: .55; }
.etape h3 { font-size: var(--e5); margin-bottom: var(--e3); }
.etape p { color: var(--encre-douce); font-size: var(--e4); margin: 0; }

/* ------------------------------------------------------------- formulaire */
.devis { background: #fff; border: 1px solid var(--bord); border-radius: var(--e4); padding: var(--e6); box-shadow: var(--ombre-f); }
.hero .devis { padding: var(--e6); }
.devis__entete { margin-bottom: var(--e5); padding-bottom: var(--e5); border-bottom: 1px solid var(--ivoire-ombre); }
.devis__titre { font-size: var(--e5); font-weight: 700; color: var(--bleu-nuit); margin: 0 0 var(--e2); }
.devis__pas { font-size: 12px; color: var(--encre-douce); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* La barre de progression rassure : elle dit qu'il reste peu a faire.
   Un formulaire long sans reperes se fait abandonner. */
.jauge { height: var(--e1); background: var(--ivoire-ombre); border-radius: var(--e1); overflow: hidden; margin-top: var(--e4); }
.jauge__barre { height: 100%; background: var(--ambre); border-radius: var(--e1); transition: width .28s ease; }

.champ { margin-bottom: var(--e5); }
.champ__label { display: block; font-weight: 600; font-size: var(--e4); margin-bottom: var(--e3); color: var(--bleu-nuit); }
.champ__aide { font-size: 12px; color: var(--encre-douce); margin-top: var(--e2); }
.champ__erreur { font-size: 12px; color: #b23a2e; margin-top: var(--e2); display: none; }
.champ.est-en-erreur .champ__erreur { display: block; }
.champ.est-en-erreur input, .champ.est-en-erreur select, .champ.est-en-erreur textarea { border-color: #b23a2e; }

input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
    width: 100%; padding: var(--e4); font: inherit; font-size: var(--e4);
    border: 1px solid var(--bord); border-radius: var(--rayon);
    background: #fff; color: var(--encre);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-clair); outline-offset: 1px; border-color: var(--bleu-clair); }
textarea { min-height: var(--e8); resize: vertical; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }

/* Choix en pastilles plutot qu'en menu deroulant : on voit toutes les options
   d'un coup, et un clic suffit. Un menu deroulant cache les possibilites. */
.pastilles { display: flex; flex-wrap: wrap; gap: var(--e3); }
.pastille { position: relative; }
.pastille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastille span { display: inline-block; padding: var(--e3) var(--e5); border: 1px solid var(--bord); border-radius: var(--e7); font-size: var(--e4); font-weight: 600; cursor: pointer; background: #fff; transition: all .12s ease; }
.pastille input:checked + span { background: var(--bleu-nuit); color: #fff; border-color: var(--bleu-nuit); }
.pastille input:focus-visible + span { outline: 2px solid var(--bleu-clair); outline-offset: 2px; }
.pastille span:hover { border-color: var(--bleu-clair); }

.depot { border: 2px dashed var(--bord); border-radius: var(--e4); padding: var(--e6); text-align: center; cursor: pointer; transition: all .14s ease; background: var(--ivoire); }
.depot:hover, .depot.est-survole { border-color: var(--ambre); background: #fff; }
.depot__nom { font-weight: 600; color: var(--succes); margin-top: var(--e3); }

.case { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--e4); color: var(--encre-douce); }
.case input { margin-top: var(--e1); flex-shrink: 0; }

.pas { display: none; }
.pas.est-actif { display: block; }
.devis__pieds { display: flex; gap: var(--e4); margin-top: var(--e6); }

.recap { background: var(--ivoire); border-radius: var(--rayon); padding: var(--e5); font-size: var(--e4); margin-bottom: var(--e5); }
.recap__ligne { display: flex; justify-content: space-between; gap: var(--e4); padding: var(--e2) 0; }
.recap__ligne b { color: var(--bleu-nuit); text-align: right; }
.recap__tva { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--bord); font-size: 12px; color: var(--encre-douce); }

/* ---------------------------------------------------------------------- FAQ */
.faq { max-width: 780px; margin-top: var(--e7); }
.faq details { border-bottom: 1px solid var(--bord); padding: var(--e5) 0; }
.faq summary { font-weight: 700; font-size: var(--e5); cursor: pointer; color: var(--bleu-nuit); list-style: none; display: flex; justify-content: space-between; gap: var(--e4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--e6); line-height: 1; color: var(--ambre); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--encre-douce); margin: var(--e4) 0 0; }

/* --------------------------------------------------------------------- pied */
.pied { background: var(--bleu-nuit); color: rgba(251,248,243,.62); padding: var(--e7) 0 var(--e6); font-size: var(--e4); }
.pied__grille { display: flex; justify-content: space-between; gap: var(--e6); flex-wrap: wrap; align-items: center; }
.pied a { color: rgba(251,248,243,.82); }
.ruban-dev { background: var(--ambre); color: #fff; text-align: center; padding: var(--e2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------- responsive
   Un seul point de rupture, place la ou la grille en nombre d'or cesse d'etre
   lisible : en dessous, la colonne mineure (38,2 %) devient trop etroite pour
   un formulaire. */
@media (max-width: 900px) {
    .hero__grille { grid-template-columns: 1fr; gap: var(--e6); }
    .preuves { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: var(--e6); }
    h2 { font-size: var(--e5); }
    .nav a:not(.btn) { display: none; }
    .section { padding: var(--e7) 0; }
}
@media (max-width: 560px) {
    .preuves { grid-template-columns: 1fr; }
    .duo { grid-template-columns: 1fr; }
    .devis__pieds { flex-direction: column; }
}