/* Scolar Store : pages publiques.
   Reprend les codes du site : fond blanc, texte gris, accent corail. */

:root{
  --corail:#fb7258;
  --corail-fonce:#e85c42;
  --ink:#2b2a31;
  --gris:#6e6d76;
  --gris-clair:#9b9aa2;
  --line:#e6e5ea;
  --fond:#faf9fb;
  --ok:#2f8a55;
}
*{box-sizing:border-box}
body{
  margin:0;background:#fff;color:var(--gris);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;
}
a{color:var(--corail);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--ink);line-height:1.25}
img{max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
.mono{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12.5px}
.petite{font-size:11.5px;word-break:break-all}
.petit{font-size:14.5px}

/* en-tête */
.site{border-bottom:1px solid var(--line)}
.site .wrap{display:flex;align-items:center;gap:26px;height:68px}
.site .nom{font-size:17px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:10px}
.site .nom:hover{text-decoration:none;color:var(--corail)}
.marque-carre{
  width:20px;height:20px;border-radius:5px;flex:none;
  background:linear-gradient(140deg,#ff9276,var(--corail) 55%,#e0512f);
  position:relative;
}
.marque-carre::after{
  content:"";position:absolute;left:4px;right:4px;top:7px;bottom:4px;
  background:#fff;border-radius:1px;
  clip-path:polygon(0 30%,18% 0,82% 0,100% 30%,100% 100%,62% 100%,62% 60%,38% 60%,38% 100%,0 100%);
}
.wrap-etroit{max-width:720px}
.titre-page{font-size:30px;margin:0 0 8px;letter-spacing:-.4px}
.apres{margin:22px 0 0}
.site nav{display:flex;gap:20px;margin-left:auto;font-size:14.5px;flex-wrap:wrap}
.site nav a{color:var(--gris)}
.site nav a.act{color:var(--corail);font-weight:600}

/* bandeau */
.hero{padding:52px 0 44px;border-bottom:1px solid var(--line)}
.hero .flex{display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.hero h1{font-size:34px;margin:0 0 12px;letter-spacing:-.5px}
.hero .lead{font-size:17.5px;margin:0 0 22px;max-width:560px}
.hero .cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero .sous{font-size:13.5px;color:var(--gris-clair);margin-top:12px}

/* boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:5px;
  padding:11px 20px;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid transparent;font-family:inherit;
}
.btn.p{background:var(--corail);color:#fff}
.btn.p:hover{background:var(--corail-fonce);text-decoration:none}
.btn.s{background:#fff;border-color:var(--line);color:var(--ink)}
.btn.s:hover{border-color:var(--gris-clair);text-decoration:none}
.btn.sm{padding:8px 15px;font-size:14px}
.btn.plein{width:100%}
.btn.disabled{background:#e9e8ee;color:var(--gris-clair);cursor:default}

/* sections */
.section{padding:40px 0}
.section h2{font-size:22px;margin:0 0 6px}
.section .st{font-size:15px;margin:0 0 24px}
.vide{color:var(--gris-clair);padding:26px 0}

.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.f{
  border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 15px;
  font-size:14px;color:var(--gris);
}
.f:hover{border-color:var(--gris-clair);color:var(--ink);text-decoration:none}
.f.on{background:var(--ink);border-color:var(--ink);color:#fff}

.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:18px}
.appc{border:1px solid var(--line);border-radius:7px;padding:20px;background:#fff;display:flex;flex-direction:column}
.appc:hover{border-color:var(--gris-clair)}
.appc.avec-image{padding:0;overflow:hidden}
.appc.avec-image .tete,.appc.avec-image p,.appc.avec-image .meta,.appc.avec-image .bas{
  padding-left:20px;padding-right:20px;
}
.appc.avec-image .tete{padding-top:16px}
.appc.avec-image .bas{padding-bottom:20px}
.banniere{display:block;line-height:0;background:var(--fond);border-bottom:1px solid var(--line)}
.banniere img{width:100%;height:172px;object-fit:cover;display:block}
.banniere:hover img{opacity:.94}
.alaune .banniere img{height:200px}
.banniere-page{
  margin:22px 0 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--fond);line-height:0;
}
.banniere-page img{width:100%;max-height:300px;object-fit:cover;display:block}
.intro-accueil{padding-bottom:0}
.intro-accueil .texte{max-width:760px}
.appc .tete{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.appc .tete .ico{flex:none}
.appc h3{margin:0 0 3px;font-size:17px}
.appc h3 a{color:var(--ink)}
.appc h3 a:hover{color:var(--corail);text-decoration:none}
.appc .cat{font-size:12.5px;color:var(--gris-clair);text-transform:uppercase;letter-spacing:.6px}
.appc p{margin:0 0 14px;font-size:14.5px;flex:1}
.appc .meta{font-size:13px;color:var(--gris-clair);margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.appc .meta .pt{width:3px;height:3px;border-radius:50%;background:#d5d4da}
.appc .bas{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

.encart{background:var(--fond);border:1px solid var(--line);border-radius:8px;padding:26px 28px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.encart h3{margin:0 0 7px;font-size:18px}
.encart p{margin:0;font-size:14.8px;max-width:620px}
.encart .g{margin-left:auto}
.encart.bloc-cote{display:block;padding:18px 19px}
.encart.bloc-cote p{margin-bottom:14px}

/* page d'une application */
.fil{font-size:13.5px;margin:26px 0 0}
.apph{display:flex;gap:26px;align-items:flex-start;padding:26px 0 30px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.apph .ico{flex:none}
.apph h1{font-size:31px;margin:0 0 8px;letter-spacing:-.4px}
.apph .res{font-size:17px;margin:0 0 16px;max-width:560px}
.apph .tags{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--gris-clair)}
.apph .dl{flex:none;margin-left:auto;text-align:right;min-width:210px}
.apph .dl .btn{width:100%}
.apph .dl .inf{font-size:13px;color:var(--gris-clair);margin-top:9px;line-height:1.5;word-break:break-all}

.deux{display:flex;gap:46px;padding:34px 0 10px;flex-wrap:wrap}
.deux .princ{flex:1;min-width:300px}
.deux .cote{width:288px;flex:none}
.deux h2{font-size:19px;margin:0 0 12px}
.deux p{font-size:15.5px;margin:0 0 15px}

.liste{list-style:none;margin:0 0 26px;padding:0}
.liste li{padding-left:26px;position:relative;margin-bottom:9px;font-size:15.5px}
.liste li::before{
  content:"";position:absolute;left:0;top:7px;width:13px;height:9px;
  border-left:2.4px solid var(--ok);border-bottom:2.4px solid var(--ok);transform:rotate(-45deg);
}
/* texte mis en forme (descriptions) */
.texte p{font-size:15.5px;margin:0 0 15px}
.texte h3{font-size:17px;margin:24px 0 10px;color:var(--ink)}
.texte ul,.texte ol{margin:0 0 16px;padding-left:22px;font-size:15.5px}
.texte li{margin-bottom:6px}
.texte code{background:var(--fond);border:1px solid var(--line);border-radius:3px;
  padding:1px 5px;font-family:ui-monospace,Consolas,monospace;font-size:13.5px}
.texte b{color:var(--ink)}

/* galerie */
.voir{margin:14px 0 0}
.galerie{margin:0 0 30px}
.vignette{
  display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:7px;
  background:#fff;cursor:pointer;overflow:hidden;position:relative;
}
.vignette:hover{border-color:var(--corail)}
.vignette img{display:block;width:100%;height:auto}
.vignette.grande .lg{
  display:block;font-size:13.5px;color:var(--gris);padding:9px 12px;
  border-top:1px solid var(--line);text-align:left;background:#fff;
}
.miniatures{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:10px}
.miniatures .vignette img{height:74px;object-fit:cover}

/* galeries dans un article */
.gal-article{margin:26px 0 30px}
.gal-grille{display:grid;gap:12px}
.gal-grille.c2{grid-template-columns:repeat(2,1fr)}
.gal-grille.c3{grid-template-columns:repeat(3,1fr)}
.gal-grille.c4{grid-template-columns:repeat(4,1fr)}
.gal-case{
  display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:7px;
  background:#fff;cursor:pointer;overflow:hidden;text-align:left;
}
.gal-case:hover{border-color:var(--corail)}
.gal-case img{display:block;width:100%;height:150px;object-fit:cover}
.gal-case .lg{
  display:block;font-size:13px;color:var(--gris);padding:8px 10px;
  border-top:1px solid var(--line);line-height:1.45;
}
.gal-seule button{
  display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:7px;
  background:#fff;cursor:pointer;overflow:hidden;
}
.gal-seule button:hover{border-color:var(--corail)}
.gal-seule img{display:block;width:100%;height:auto}
.gal-seule .lg{
  display:block;font-size:13.5px;color:var(--gris);padding:9px 12px;
  border-top:1px solid var(--line);text-align:left;
}
@media(max-width:700px){
  .gal-grille.c3,.gal-grille.c4{grid-template-columns:repeat(2,1fr)}
}

/* visionneuse */
body.fige{overflow:hidden}
.visionneuse{
  position:fixed;inset:0;z-index:100;background:rgba(24,23,28,.94);
  display:flex;align-items:center;justify-content:center;
}
.visionneuse[hidden]{display:none}
.vs-barre{
  position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:center;
  gap:14px;padding:0 16px;color:#e8e7ec;font-size:14px;
}
.vs-titre{font-weight:600}
.vs-compteur{color:#a9a8b2;font-size:13px}
.vs-fermer{
  margin-left:auto;background:none;border:0;color:#e8e7ec;font-size:20px;cursor:pointer;
  width:38px;height:38px;border-radius:5px;line-height:1;
}
.vs-fermer:hover{background:rgba(255,255,255,.12)}
.vs-image{max-width:90vw;max-height:calc(100vh - 150px);display:flex;align-items:center;justify-content:center}
.vs-image img{max-width:100%;max-height:calc(100vh - 150px);display:block;border-radius:5px;background:#fff}
.vs-fleche{
  background:rgba(255,255,255,.1);border:0;color:#fff;font-size:30px;cursor:pointer;
  width:48px;height:76px;border-radius:5px;flex:none;line-height:1;
}
.vs-fleche:hover{background:rgba(255,255,255,.22)}
.vs-fleche.gauche{margin-right:14px}
.vs-fleche.droite{margin-left:14px}
.vs-legende{
  position:absolute;bottom:0;left:0;right:0;padding:18px 24px 26px;margin:0;
  color:#e8e7ec;font-size:14.5px;text-align:center;
}

.capture{margin:0 0 20px}
.capture img{border:1px solid var(--line);border-radius:6px;display:block}

.fiche{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:22px}
.fiche .l{display:flex;border-bottom:1px solid var(--line);font-size:14px}
.fiche .l:last-child{border-bottom:0}
.fiche .k{width:126px;flex:none;background:var(--fond);padding:9px 12px;color:var(--gris)}
.fiche .v{padding:9px 12px;color:var(--ink);min-width:0}

.hist{border-left:2px solid var(--line);padding-left:18px}
.hist .v{margin-bottom:20px}
.hist .n{font-size:14.5px;color:var(--ink);font-weight:600}
.hist .d{font-size:12.8px;color:var(--gris-clair);margin-bottom:5px}
.hist ul{margin:0;padding-left:18px;font-size:14px}
.hist li{margin-bottom:3px}

/* chiffres du bandeau */
.hero-texte{flex:1;min-width:300px}
.hero-chiffres{display:flex;gap:14px;flex-wrap:wrap}
.hero-chiffres .hc{
  border:1px solid var(--line);border-radius:8px;padding:16px 20px;background:#fff;min-width:118px;
}
.hero-chiffres .hc b{display:block;font-size:26px;color:var(--ink);letter-spacing:-.5px}
.hero-chiffres .hc span{font-size:13px;color:var(--gris-clair)}

/* trois arguments */
.arguments{padding-bottom:0}
.grille-arg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.arg h3{font-size:17px;margin:0 0 7px;position:relative;padding-top:14px}
.arg h3::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--corail);border-radius:2px}
.arg p{font-size:14.8px;margin:0}

/* comment ça marche */
.etapes-bloc{background:var(--fond);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:22px}
.etape{display:flex;gap:16px;align-items:flex-start}
.etape .num{
  width:34px;height:34px;border-radius:50%;flex:none;background:var(--corail);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
}
.etape h3{font-size:16.5px;margin:4px 0 6px}
.etape p{font-size:14.6px;margin:0}

/* articles */
.grille-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.carte-article{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.carte-article:hover{border-color:var(--gris-clair)}
.carte-article .vignette{display:block;line-height:0;background:var(--fond)}
.carte-article .vignette img{width:100%;height:158px;object-fit:cover;display:block}
.ca-corps{padding:17px 19px 19px}
.ca-meta{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--gris-clair);margin-bottom:8px}
.etiq{background:var(--fond);border:1px solid var(--line);border-radius:20px;padding:1px 9px;font-size:12px;color:var(--gris)}
.carte-article h3{font-size:17px;margin:0 0 7px;line-height:1.3}
.carte-article h3 a{color:var(--ink)}
.carte-article h3 a:hover{color:var(--corail);text-decoration:none}
.carte-article p{margin:0;font-size:14.4px}

.article{max-width:720px;margin:0 auto;padding:10px 0 20px}
.article h1{font-size:32px;line-height:1.22;letter-spacing:-.5px;margin:0 0 12px}
.a-meta{display:flex;gap:11px;align-items:center;font-size:13px;color:var(--gris-clair);margin-bottom:18px}
.a-chapeau{font-size:18px;line-height:1.55;color:var(--gris);margin:0 0 24px}
.a-image{margin:0 0 26px}
.a-image img{width:100%;border-radius:8px;display:block}

/* formulaire */
.formulaire{margin-top:22px}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formulaire .champ{margin:0 0 18px}
.formulaire label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.formulaire input[type=text],.formulaire input[type=email],.formulaire textarea{
  width:100%;border:1px solid var(--line);border-radius:6px;padding:11px 13px;
  font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
}
.formulaire input:focus,.formulaire textarea:focus{outline:2px solid #fde3dc;border-color:var(--corail)}
.formulaire textarea{resize:vertical;line-height:1.6}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mention{font-size:13.2px;color:var(--gris-clair);margin:14px 0 0;line-height:1.55}
.avis-ok{background:#eaf5ee;border:1px solid #c9e4d4;color:#1f6b41;border-radius:7px;padding:14px 16px;margin-bottom:18px;font-size:15px}
.avis-ko{background:#fdeceb;border:1px solid #e6bcb7;color:#8c2f24;border-radius:7px;padding:12px 16px;margin-bottom:12px;font-size:14.5px}

footer{border-top:1px solid var(--line);margin-top:60px;padding:34px 0 30px;font-size:14px;color:var(--gris-clair);background:var(--fond)}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
footer .f-bloc b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:9px}
footer .f-bloc p{margin:0;font-size:13.8px;line-height:1.6}
footer .f-bloc a{display:block;margin-bottom:5px;font-size:13.8px}
footer .f-bas{display:flex;gap:18px;border-top:1px solid var(--line);margin-top:26px;padding-top:16px;font-size:13px}
footer .f-bas .g{margin-left:auto}

@media (max-width:760px){
  .hero{padding:34px 0 30px}
  .hero h1{font-size:27px}
  .apph .dl{margin-left:0;width:100%;text-align:left}
  .deux{gap:26px}
  .deux .cote{width:100%}
  .site .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:12px}
  .site nav{margin-left:0;gap:14px}
}