.oh2013 { display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   Reprise de la maquette EasyHost (2013), transposee aux couleurs
   OneHeberge. Le style de l epoque — degrades, ombres portees marquees,
   perspectives — est reproduit tel quel : c est le propos de la page.
   Parti pris mono-theme assume : la maquette d origine est un monde visuel
   ferme (fond gris clair, en-tete noir). Chaque couleur est donc peinte
   explicitement pour tenir sur n importe quel fond hote.
   ───────────────────────────────────────────────────────────────────────── */
.oh2013 {
    --rouge:        #b81c28;
    --rouge-clair:  #d4232f;
    --rouge-sombre: #7d0e17;
    --noir:         #1c1c1c;
    --noir-clair:   #2e2e2e;
    --gris-fond:    #e9e9ea;
    --gris-pale:    #f4f4f5;
    --ardoise:      #1b1e23;
    --ardoise-bas:  #0e1014;
    --texte:        #4a4a4a;
    --texte-clair:  #8d8d8d;
    --blanc:        #ffffff;
}
.oh2013, .oh2013 * { margin: 0; padding: 0; box-sizing: border-box; }
.oh2013 {
    font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
    background: var(--gris-fond);
    color: var(--texte);
    font-size: 15.5px;
    line-height: 1.7;
}
/* Le corps de page retient les elements decoratifs larges ; l habillage,
   lui, doit laisser sortir ses menus deroulants. */
.oh2013:not(.oh-habillage) { overflow-x: hidden; }
.oh2013 .zone { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ── Barre de contact ──────────────────────────────────────────────────── */
.oh2013 .barre-haut {
    background: var(--rouge);
    color: #fff;
    font-size: 12px;
    padding: 9px 0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
.oh2013 .barre-haut .zone {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.oh2013 .barre-haut a { color: #fff; text-decoration: none; }
.oh2013 .barre-haut .contact { display: flex; align-items: center; gap: 7px; opacity: .95; }
.oh2013 .barre-haut .reseaux { margin-left: auto; display: flex; gap: 7px; }
.oh2013 .barre-haut .reseaux a {
    width: 23px; height: 23px; border-radius: 5px;
    background: rgba(0,0,0,.22); color: #fff;
    display: grid; place-items: center;
    transition: background .2s, transform .2s;
}
.oh2013 .barre-haut .reseaux a svg { width: 13px; height: 13px; display: block; }
.oh2013 .barre-haut .reseaux a:hover { background: rgba(0,0,0,.45); transform: translateY(-1px); }

/* ── En-tete ───────────────────────────────────────────────────────────── */
.oh2013 .entete {
    background: var(--noir);
    position: relative; z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.oh2013 .entete .zone { display: flex; align-items: stretch; gap: 30px; }
.oh2013 .logo {
    display: flex; align-items: center;
    padding: 10px 0; text-decoration: none;
}
.oh2013 .logo img { width: 138px; height: auto; display: block; }
.oh2013 .logo .sous {
    font-family: 'Open Sans', sans-serif;
    font-size: 8px; letter-spacing: .2em; color: var(--texte-clair);
    font-weight: 600;
}
.oh2013 nav {
    margin: 0 auto; display: flex; align-items: center; gap: 2px;
}
.oh2013 .actions { display: flex; align-items: center; gap: 10px; }
.oh2013 .espace {
    font-family: 'Open Sans', sans-serif; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    color: #fff; text-decoration: none; white-space: nowrap;
    background: var(--rouge); padding: 8px 14px; border-radius: 6px;
    transition: background .25s;
}
.oh2013 .espace:hover { background: var(--rouge-clair); }
.oh2013 nav .ico-nav { width: 15px; height: 15px; display: block; opacity: .75; }
.oh2013 nav .ico-nav svg { width: 100%; height: 100%; }
.oh2013 nav a:hover .ico-nav, .oh2013 nav .rubrique:hover .ico-nav { opacity: 1; }
.oh2013 nav a {
    font-family: 'Open Sans', sans-serif; font-weight: 600;
    font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase;
    color: rgba(255,255,255,.8); text-decoration: none;
    padding: 7px 11px; border-radius: 5px;
    display: flex; align-items: center; gap: 6px;
    position: relative; transition: background .3s, color .3s;
}
.oh2013 nav a:hover, .oh2013 nav a.actif {
    background: rgba(196,30,58,.10);
    color: #c41e3a;
}



/* Selecteur de langue, panier et Discord, comme sur le site officiel. */
.oh2013 .actions { flex-shrink: 0; }
.oh2013 .espace { display: inline-flex; align-items: center; gap: 6px; }
.oh2013 .espace svg { width: 14px; height: 14px; }
.oh2013 .langue { position: relative; }
.oh2013 .langue-bouton {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px; padding: 6px 9px; cursor: pointer;
    color: rgba(255,255,255,.85); font-family: 'Open Sans', sans-serif;
    font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
    transition: background .2s, color .2s;
}
.oh2013 .langue-bouton:hover, .oh2013 .langue.ouvert .langue-bouton { background: rgba(255,255,255,.14); color: #fff; }
.oh2013 .langue-bouton img { display: block; border-radius: 2px; }
.oh2013 .langue-bouton em {
    width: 5px; height: 5px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s;
}
.oh2013 .langue.ouvert .langue-bouton em { transform: rotate(225deg) translateY(-1px); }
.oh2013 .langue-liste {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    background: #17172a; border-radius: 8px; padding: 5px;
    box-shadow: 0 14px 34px rgba(0,0,0,.38); min-width: 104px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .2s, transform .2s, visibility .2s; z-index: 50;
}
.oh2013 .langue.ouvert .langue-liste { opacity: 1; visibility: visible; transform: none; }
.oh2013 .langue-liste a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 6px; text-decoration: none;
    color: #cfd2dc; font-size: 12px; font-weight: 600; letter-spacing: .4px;
}
.oh2013 .langue-liste a:hover { background: rgba(196,30,58,.16); color: #fff; }
.oh2013 .langue-liste img { border-radius: 2px; }
.oh2013 .panier, .oh2013 .discord {
    width: 34px; height: 34px; border-radius: 8px;
    display: grid; place-items: center; text-decoration: none;
    transition: background .25s, color .25s, transform .25s;
}
.oh2013 .panier { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.oh2013 .panier:hover { background: rgba(255,255,255,.16); color: #fff; }
.oh2013 .panier svg { width: 17px; height: 17px; }
.oh2013 .discord { background: #5865f2; color: #fff; }
.oh2013 .discord:hover { background: #4752c4; transform: translateY(-1px); }
.oh2013 .discord svg { width: 18px; height: 18px; display: block; }

/* Menus deroulants, sur le modele du site officiel. */
.oh2013 nav .rubrique { position: relative; }
.oh2013 nav .rubrique > a::after {
    content: ''; width: 5px; height: 5px; margin-left: 3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s;
}
.oh2013 nav .rubrique:hover > a::after { transform: rotate(225deg) translateY(-1px); }
.oh2013 .panneau {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #17172a; border-radius: 10px; padding: .5rem;
    width: 520px; box-shadow: 0 14px 34px rgba(0,0,0,.38);
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 40;
}
.oh2013 nav .rubrique:hover .panneau, .oh2013 nav .rubrique:focus-within .panneau {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* La derniere rubrique ouvrirait hors de l ecran : elle se recale a droite. */
.oh2013 nav .rubrique:nth-last-of-type(-n+2) .panneau { left: auto; right: 0; transform: translateY(6px); }
.oh2013 nav .rubrique:nth-last-of-type(-n+2):hover .panneau, .oh2013 nav .rubrique:nth-last-of-type(-n+2):focus-within .panneau { transform: translateY(0); }
.oh2013 .panneau a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 9px; border-radius: 7px;
    text-transform: none; letter-spacing: 0; font-weight: 400;
    color: #cfd2dc;
}
.oh2013 .panneau a:hover { background: rgba(196,30,58,.14); color: #fff; }
.oh2013 .panneau .ico.logo {
    background: #fff; padding: 3px; overflow: hidden;
}
.oh2013 .panneau .ico.logo img {
    width: 100%; height: 100%; object-fit: contain; border-radius: 5px;
    display: block;
}
.oh2013 .panneau .ico {
    width: 26px; height: 26px; flex-shrink: 0;
    color: var(--rouge-clair);
    display: grid; place-items: center;
}
.oh2013 .panneau .ico svg { width: 100%; height: 100%; }
.oh2013 .panneau h4 {
    font-family: 'Open Sans', sans-serif; font-size: 12.5px;
    font-weight: 600; color: #fff; margin: 0 0 2px;
}
.oh2013 .neuf {
    background: #16a34a; color: #fff; font-size: 8.5px; font-weight: 700;
    padding: 2px 5px; border-radius: 4px; margin-left: 5px;
    vertical-align: middle; letter-spacing: .04em;
}
.oh2013 .panneau p { font-size: 10.5px; color: #9aa0ae; margin: 0; line-height: 1.45; }
@media (max-width: 980px) {
.oh2013 .diapo .volet { grid-template-columns: 1fr; }
.oh2013 .volet .diapo-visuel { min-height: 240px; order: -1; }
.oh2013 nav { margin: 0; }
.oh2013 .actions { display: none; }
.oh2013 .panneau { position: static; transform: none; width: auto; grid-template-columns: 1fr;
               opacity: 1; visibility: visible; display: none; }
.oh2013 nav .rubrique:hover .panneau { display: block; }
}

/* ── Banniere et ses « ailes » ─────────────────────────────────────────── */
.oh2013 .banniere { position: relative; padding: 56px 0 72px; }
/* Les deux ailes laterales : un bloc rouge dont la base est creusee par un
   ovale de la couleur du fond. C est ce qui donne la courbe de la maquette. */
.oh2013 .ailes {
    position: absolute; top: 0; left: 0; right: 0;
    height: 265px; z-index: 0; pointer-events: none;
}
.oh2013 .ailes svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) {
.oh2013 .ailes { height: 160px; } }
.oh2013 .diapo {
    position: relative; z-index: 2;
    background: #17171a;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.oh2013 .volet {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
}
.oh2013 .volet:not(.actif) { display: none; }
.oh2013 .volet.actif { animation: volet-entre .45s ease both; }
@keyframes volet-entre {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.oh2013 .volet.actif { animation: none; } }
.oh2013 .diapo-texte { padding: 46px 44px 40px; color: #b9b9b9; }
.oh2013 .diapo-num {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
}
.oh2013 .diapo-num strong {
    font-family: 'Oswald', sans-serif; font-size: 46px; font-weight: 300;
    color: var(--rouge-clair); line-height: .9; letter-spacing: -.02em;
}
.oh2013 .diapo-num span {
    font-family: 'Oswald', sans-serif; font-size: 15px;
    color: #8a8a8a; letter-spacing: .16em; text-transform: uppercase;
}
.oh2013 .diapo-titre {
    font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600;
    color: #fff; letter-spacing: .04em; margin-bottom: 14px;
    text-wrap: balance;
}
.oh2013 .diapo-titre em { color: var(--rouge-clair); font-style: normal; }
.oh2013 .diapo-texte p { font-size: 14.5px; margin-bottom: 15px; max-width: 52ch; }
.oh2013 .diapo-pied {
    display: flex; align-items: center; gap: 14px; margin-top: 20px;
}
.oh2013 .fleches { display: flex; gap: 5px; }
.oh2013 .fleches button {
    width: 26px; height: 24px; border: 0; cursor: pointer;
    background: var(--rouge); color: #fff; font-size: 13px;
    font-family: 'Oswald', sans-serif;
    transition: background .2s;
}
.oh2013 .fleches button:hover { background: var(--rouge-clair); }
.oh2013 .diapo-pied a {
    margin-left: auto; color: var(--rouge-clair);
    font-size: 12px; text-decoration: none;
}
.oh2013 .diapo-pied a:hover { text-decoration: underline; }

/* Le visuel de droite : un ciel degrade plutot qu une photo, pour que la
   page reste autonome. */
.oh2013 .diapo-visuel {
    position: relative;
    background:
        radial-gradient(circle at 62% 34%, rgba(212,35,47,.32), transparent 55%),
        radial-gradient(circle at 22% 72%, rgba(90,110,150,.30), transparent 52%),
        linear-gradient(165deg, #2a2118 0%, #17161c 55%, #0c0c10 100%);
    display: grid; place-items: center;
    min-height: 400px; overflow: hidden;
}
.oh2013 .diapo-visuel .photo {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.oh2013 .diapo-visuel .embleme {
    width: 132px; max-width: 60%; height: auto;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
.oh2013 .diapo-visuel .legende {
    position: absolute; z-index: 2;
    text-shadow: 0 1px 6px rgba(0,0,0,.7); bottom: 58px; left: 0; right: 0; text-align: center;
    font-family: 'Oswald', sans-serif; letter-spacing: .18em;
    font-size: 12px; color: rgba(255,255,255,.9);
}
/* L ombre du bas : sans elle, le texte blanc se perd sur une photo claire. */
.oh2013 .diapo-visuel::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 130px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
    z-index: 1; pointer-events: none;
}
.oh2013 .vignettes {
    position: absolute; bottom: 18px; left: 0; right: 0; z-index: 3;
    display: flex; justify-content: center; gap: 7px; padding: 0;
    background: none;
}
.oh2013 .vignettes .vig {
    width: 22px; height: 3px; padding: 0; border: 0; border-radius: 2px;
    background: rgba(255,255,255,.38);
    cursor: pointer; transition: background .25s, width .25s;
}
.oh2013 .vignettes .vig:hover { background: rgba(255,255,255,.7); }
.oh2013 .vignettes .vig.actif { width: 34px; background: var(--rouge-clair); }

/* ── Services ──────────────────────────────────────────────────────────── */
.oh2013 .services { padding: 78px 0 82px; }
.oh2013 .services .grille {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.oh2013 .service {
    background: transparent;
    border: 0; border-left: 2px solid #dfe0e3;
    border-radius: 0;
    padding: 4px 24px 4px 22px;
    text-align: left;
    transition: border-color .25s;
}
.oh2013 .service:hover { border-left-color: var(--rouge); }
.oh2013 .service.vedette { border-left-color: var(--rouge); }
.oh2013 .service h3 {
    font-family: 'Oswald', sans-serif; font-weight: 500;
    font-size: 17px; color: #22232a; margin: 0;
    letter-spacing: .01em;
}
.oh2013 .service { display: flex; flex-direction: column; gap: 12px; }
.oh2013 .service .entete-carte { display: flex; align-items: center; gap: 13px; }
.oh2013 .service .rond {
    width: 34px; height: 34px; flex-shrink: 0; margin: 0;
    color: var(--noir);
}
.oh2013 .service .rond svg { width: 100%; height: 100%; display: block; }
.oh2013 .service.vedette .rond { color: var(--rouge); }
.oh2013 .service p { font-size: 13.5px; color: var(--texte-clair); line-height: 1.6; }

/* ── Recherche de domaine ──────────────────────────────────────────────── */
.oh2013 .domaine {
    background: var(--noir);
    padding: 44px 0;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
.oh2013 .domaine .zone {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: 28px;
}
.oh2013 .bulles { display: flex; gap: 8px; align-items: center; }
.oh2013 .bulle {
    font-family: 'Oswald', sans-serif; color: #fff; font-weight: 400;
    text-decoration: none; cursor: pointer;
    transition: border-color .2s, background .2s;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    padding: 10px 14px; text-align: center;
    line-height: 1.2; font-size: 13px; letter-spacing: .06em;
}
.oh2013 .bulle:hover { border-color: var(--rouge-clair); background: rgba(196,30,58,.14); }
.oh2013 .bulle b { display: block; font-size: 17px; font-weight: 500; }
.oh2013 .domaine-champ { text-align: center; }
.oh2013 .domaine-champ .manuscrit {
    font-family: 'Oswald', sans-serif; font-size: 19px; color: #fff;
    font-weight: 400; letter-spacing: .04em;
    display: block; margin-bottom: 14px;
}
.oh2013 .domaine-champ form { display: flex; }
.oh2013 .domaine-champ input {
    flex: 1; min-width: 0;
    padding: 12px 16px; font-size: 14px; font-family: inherit;
    border: 3px solid #cfcfcf; border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #bdbdbd; color: #3a3a3a;
}
.oh2013 .domaine-champ input::placeholder { color: #6f6f6f; }
.oh2013 .domaine-champ input:focus { outline: 2px solid var(--rouge-clair); outline-offset: 1px; background: #d5d5d5; }
.oh2013 .domaine-champ button {
    padding: 0 22px; cursor: pointer; font-size: 18px;
    border: 3px solid #cfcfcf; border-left: 0; border-radius: 0 6px 6px 0;
    background: #fff; color: #444;
}
.oh2013 .domaine-champ button:hover { background: #f2f2f2; }
.oh2013 .domaine-marque { text-align: right; font-family: 'Oswald', sans-serif; }
.oh2013 .domaine-marque .nom { font-size: 26px; font-weight: 600; color: #fff; letter-spacing: .04em; }
.oh2013 .domaine-marque .sous { font-size: 12px; letter-spacing: .28em; color: var(--rouge-clair); }

/* Resultat de la recherche : le verdict d abord, le prix ensuite, les
   alternatives seulement quand le nom est pris. */
.oh2013 .domaine-resultat { margin-top: 14px; text-align: left; }
.oh2013 .domaine-resultat:empty { display: none; }
.oh2013 .verdict {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: 8px;
    font-size: 14px; color: #fff;
    background: rgba(255,255,255,.07);
    border-left: 3px solid rgba(255,255,255,.25);
}
.oh2013 .verdict.libre { background: rgba(22,163,74,.16); border-left-color: #22c55e; }
.oh2013 .verdict.pris { background: rgba(196,30,58,.16); border-left-color: var(--rouge-clair); }
.oh2013 .verdict.souci { background: rgba(234,179,8,.14); border-left-color: #eab308; }
.oh2013 .verdict strong { font-family: 'Oswald', sans-serif; letter-spacing: .03em; font-weight: 500; }
.oh2013 .verdict .tarif { margin-left: auto; font-family: 'Oswald', sans-serif; font-size: 17px; }
.oh2013 .verdict .commander {
    background: var(--rouge); color: #fff; text-decoration: none;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .4px; padding: 8px 14px; border-radius: 6px;
    transition: background .25s;
}
.oh2013 .verdict .commander:hover { background: var(--rouge-clair); }
.oh2013 .alternatives {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.oh2013 .alternatives a {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px; padding: 9px 12px; text-decoration: none;
    color: #fff; font-size: 13px;
    transition: border-color .2s, background .2s, transform .2s;
}
.oh2013 .alternatives a:hover {
    background: rgba(196,30,58,.16); border-color: var(--rouge-clair);
    transform: translateY(-1px);
}
.oh2013 .alternatives .nom { font-weight: 600; }
.oh2013 .alternatives b {
    font-family: 'Oswald', sans-serif; color: var(--rouge-clair);
    font-weight: 500; font-size: 14px;
}
/* Le panier n apparait qu au survol : sur huit cartes alignees, huit
   pictogrammes permanents font du bruit sans rien apprendre. */
.oh2013 .alternatives .ico-panier {
    width: 15px; height: 15px; opacity: 0; margin-left: -4px;
    transition: opacity .2s, margin .2s;
}
.oh2013 .alternatives a:hover .ico-panier { opacity: .9; margin-left: 0; }
.oh2013 .verdict .ico-panier { width: 14px; height: 14px; }
.oh2013 .verdict .commander { display: inline-flex; align-items: center; gap: 7px; }
.oh2013 .verdict.libre strong, .oh2013 .verdict.pris strong { font-size: 16px; }
.oh2013 .domaine-champ.occupe button { opacity: .6; cursor: progress; }

/* ── Offres ────────────────────────────────────────────────────────────── */
.oh2013 .offres { padding: 0 0 88px; text-align: center; }
.oh2013 .onglet-offres {
    display: inline-block; margin: 0 0 46px;
    color: var(--rouge); font-family: 'Oswald', sans-serif;
    letter-spacing: .22em; font-size: 14px;
    padding: 0; border-bottom: 2px solid var(--rouge); padding-bottom: 8px;
}
.oh2013 .grille-offres {
    display: grid; grid-template-columns: repeat(3, 1fr);
    align-items: center; max-width: 780px; margin: 0 auto;
}
/* Les cartes penchees vers le centre : c est l effet de perspective de la
   maquette, obtenu par une legere inclinaison plutot qu une image. */
.oh2013 .offre {
    background: var(--blanc);
    padding: 38px 24px 42px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    border: 1px solid #e4e4e6;
    border-radius: 10px;
    position: relative;
}
.oh2013 .offre.mise-en-avant {
    background: var(--rouge);
    color: #fff; z-index: 2;
    padding: 54px 26px 58px;
    box-shadow: 0 14px 34px rgba(184,28,40,.28);
    border-radius: 12px;
    border-color: transparent;
}
.oh2013 .offre h3 {
    font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600;
    color: #2f2f2f; letter-spacing: .04em;
}
.oh2013 .offre.mise-en-avant h3 { color: #fff; }
.oh2013 .offre .cible {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--texte-clair); margin-bottom: 16px;
}
.oh2013 .offre.mise-en-avant .cible { color: rgba(255,255,255,.85); }
.oh2013 .offre .prix {
    font-family: 'Oswald', sans-serif; font-size: 44px; font-weight: 600;
    color: var(--rouge); line-height: 1; margin-bottom: 18px;
    font-variant-numeric: tabular-nums;
}
.oh2013 .offre.mise-en-avant .prix { color: #fff; }
.oh2013 .offre .prix small {
    font-size: 14px; font-weight: 400; letter-spacing: .04em;
}
.oh2013 .offre ul { list-style: none; font-size: 13.5px; margin-bottom: 26px; }
.oh2013 .offre li { padding: 7px 0; }
.oh2013 .offre.mise-en-avant li { color: rgba(255,255,255,.95); }
.oh2013 .offre .action {
    display: inline-block; text-decoration: none;
    font-family: 'Oswald', sans-serif; letter-spacing: .08em; font-size: 13px;
    padding: 9px 20px;
    background: var(--rouge);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.22);
}
.oh2013 .offre.mise-en-avant .action { background: #fff; color: var(--rouge); }
.oh2013 .offre .action:hover { filter: brightness(1.08); }


/* ── Avis clients et chiffres cles ──────────────────────────────────────
   La preuve sociale est ce qui decide un visiteur sur un site d hebergeur :
   elle a sa place juste avant les offres. */
.oh2013 .preuves { background: var(--gris-pale); padding: 72px 0 78px; overflow: hidden; }
.oh2013 .titre-section {
    font-family: 'Oswald', sans-serif; font-size: 27px; font-weight: 500;
    color: #22232a; text-align: center; letter-spacing: .01em;
    margin-bottom: 6px; text-wrap: balance;
}
.oh2013 .sous-titre { text-align: center; color: var(--texte-clair); font-size: 14px; margin-bottom: 38px; }
.oh2013 .defile-avis {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.oh2013 .piste { display: flex; width: max-content; gap: 18px; animation: defile-avis 62s linear infinite; }
.oh2013 .defile-avis:hover .piste { animation-play-state: paused; }
@keyframes defile-avis { to { transform: translateX(-50%); } }
.oh2013 .avis {
    width: 285px; flex-shrink: 0; margin: 0;
    background: #fff; border: 1px solid #e7e7ea; border-radius: 12px;
    padding: 18px 20px 16px;
    display: flex; flex-direction: column; gap: 11px;
}
.oh2013 .notes { color: #f5b301; font-size: 13px; letter-spacing: 2px; }
.oh2013 .notes .vide { color: #dcdcdf; }
.oh2013 .avis blockquote {
    margin: 0; font-size: 13.5px; color: #3f4048; line-height: 1.55; flex: 1;
}
.oh2013 .avis figcaption { display: flex; align-items: center; gap: 10px; }
.oh2013 .pastille {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--rouge); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.oh2013 .avis figcaption b { display: block; font-size: 12.5px; color: #22232a; }
.oh2013 .avis figcaption small { font-size: 11px; color: var(--texte-clair); }
.oh2013 .chiffres {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    margin: 54px 0 0; padding: 0;
}
.oh2013 .chiffres div { text-align: center; }
.oh2013 .chiffres dt {
    font-family: 'Oswald', sans-serif; font-size: 40px; font-weight: 600;
    color: #22232a; line-height: 1; font-variant-numeric: tabular-nums;
}
.oh2013 .chiffres dd {
    margin: 8px 0 0; font-size: 12.5px; color: var(--texte-clair);
    letter-spacing: .04em;
}
@media (max-width: 700px) {
.oh2013 .chiffres { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
}
@media (prefers-reduced-motion: reduce) {
.oh2013 .piste { animation: none; } }


/* ── Carrousel d offres ────────────────────────────────────────────────
   Un univers a la fois : trois offres comparables entre elles, et le
   passage d une famille a l autre se fait seul ou par les onglets. */
.oh2013 .onglets {
    display: flex; justify-content: center; gap: 7px; margin-bottom: 34px;
    flex-wrap: wrap; max-width: 900px; margin-inline: auto;
}
.oh2013 .onglet {
    font-family: 'Open Sans', sans-serif; font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--texte-clair); background: transparent;
    border: 1px solid #dfe0e3; border-radius: 999px;
    padding: 9px 20px; cursor: pointer;
    transition: color .25s, border-color .25s, background .25s;
}
.oh2013 .onglet:hover { color: var(--rouge); border-color: #c9cacd; }
.oh2013 .onglet.actif { color: #fff; background: var(--rouge); border-color: var(--rouge); }
.oh2013 .groupe { display: none; }
.oh2013 .groupe.actif { display: block; animation: apparait .4s ease both; }
@keyframes apparait {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.oh2013 .groupe.actif { animation: none; }
}


/* Au survol, la carte se souleve et son bouton s affirme : sans cela rien
   ne disait qu elle mene quelque part. La carte mise en avant monte moins,
   elle est deja detachee du lot. */
.oh2013 .offre {
    transition: transform .3s cubic-bezier(.2,.7,.3,1),
                box-shadow .3s, border-color .3s;
}
.oh2013 .offre:hover, .oh2013 .offre:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(0,0,0,.16);
    border-color: var(--rouge-clair);
}
.oh2013 .offre.mise-en-avant:hover, .oh2013 .offre.mise-en-avant:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(184,28,40,.42);
}
.oh2013 .offre .action { transition: background .25s, color .25s, transform .25s; }
.oh2013 .offre:hover .action { transform: translateY(-1px); }
.oh2013 .offre .prix { transition: transform .3s; transform-origin: left center; }
.oh2013 .offre:hover .prix { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.oh2013 .offre, .oh2013 .offre .action, .oh2013 .offre .prix { transition: none; }
.oh2013 .offre:hover, .oh2013 .offre:focus-within, .oh2013 .offre.mise-en-avant:hover { transform: none; }
.oh2013 .offre:hover .prix, .oh2013 .offre:hover .action { transform: none; }
}


/* ── Questions frequentes ──────────────────────────────────────────────
   <details> gere l ouverture sans JavaScript, et le texte reste present
   dans la page meme replie : c est ce que lit un moteur de recherche. */
.oh2013 .faq { padding: 76px 0 90px; background: var(--gris-fond); }
.oh2013 .liste-questions {
    max-width: 820px; margin: 34px auto 0;
    display: flex; flex-direction: column; gap: 12px;
}
.oh2013 .question {
    background: var(--blanc); border: 1px solid #e4e4e6; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: border-color .25s, box-shadow .25s;
}
.oh2013 .question:hover { border-color: #d2d3d6; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.oh2013 .question[open] { border-color: var(--rouge-clair); }
.oh2013 .question summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    padding: 19px 22px;
    font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 500;
    color: #22232a; letter-spacing: .02em;
}
.oh2013 .question summary::-webkit-details-marker { display: none; }
.oh2013 .question summary::after {
    content: ''; margin-left: auto; flex-shrink: 0;
    width: 8px; height: 8px;
    border-right: 2px solid var(--rouge); border-bottom: 2px solid var(--rouge);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s;
}
.oh2013 .question[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.oh2013 .question summary:focus-visible { outline: 2px solid var(--rouge-clair); outline-offset: -2px; }
.oh2013 .reponse { padding: 0 22px 20px; }
.oh2013 .reponse p { font-size: 14.5px; color: var(--texte-clair); max-width: 68ch; margin: 0; }
@media (max-width: 760px) {
.oh2013 .faq { padding: 54px 0 64px; }
.oh2013 .question summary { font-size: 15.5px; padding: 16px 18px; }
}

/* ── Partenaires ───────────────────────────────────────────────────────── */
.oh2013 .partenaires {
    background: var(--gris-pale); padding: 46px 0;
    border-top: 1px solid #dcdcdc;
    overflow: hidden;
    /* Les noms s effacent aux deux bords plutot que de se couper net. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.oh2013 .bande { display: flex; width: max-content; animation: defile 34s linear infinite; }
.oh2013 .partenaires:hover .bande { animation-play-state: paused; }
.oh2013 .bande ul {
    display: flex; align-items: center; gap: 78px;
    list-style: none; padding-right: 78px; margin: 0;
}
.oh2013 .bande li {
    font-family: 'Oswald', sans-serif; font-size: 25px; font-weight: 500;
    color: #b6b6b6; letter-spacing: .05em; white-space: nowrap;
    transition: color .3s;
}
.oh2013 .bande li:hover { color: #8c8c8c; }
/* La seconde copie occupe la place de la premiere : le retour est invisible. */
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.oh2013 .bande { animation: none; }
}

/* ── Pied de page ──────────────────────────────────────────────────────── */
.oh2013 .pied {
    background: var(--ardoise);
    color: #a7adb8; padding: 64px 0 0;
}
.oh2013 .pied .zone {
    display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 40px;
    padding-bottom: 36px;
}
.oh2013 .pied h4 {
    font-family: 'Oswald', sans-serif; font-size: 15px; letter-spacing: .14em;
    color: #fff; text-transform: uppercase; margin-bottom: 18px;
    padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.oh2013 .pied p { font-size: 13.5px; margin-bottom: 16px; }
.oh2013 .pied .logo-pied { height: 38px; width: auto; display: block; margin-bottom: 14px; }
.oh2013 .pied a { color: #a7adb8; text-decoration: none; font-size: 13.5px; }
.oh2013 .pied a:hover { color: var(--rouge-clair); }
.oh2013 .liens { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 14px; }
.oh2013 .liens a::before { content: '›'; color: var(--rouge-clair); margin-right: 6px; }
.oh2013 .suivre { display: flex; gap: 9px; margin-bottom: 26px; }
.oh2013 .suivre a {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: #cfd4dc;
    display: grid; place-items: center; text-decoration: none;
    transition: background .2s, color .2s, transform .2s;
}
.oh2013 .suivre a svg { width: 16px; height: 16px; display: block; }
.oh2013 .suivre a:hover { background: var(--rouge); color: #fff; transform: translateY(-2px); }
.oh2013 .pied form { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; }
.oh2013 .pied form.en-ligne { flex-direction: row; align-items: stretch; gap: 8px; }
.oh2013 .pied form.en-ligne input { margin-bottom: 0; }
.oh2013 .pied .envoyer { align-self: flex-start; white-space: nowrap; }
.oh2013 .pied input, .oh2013 .pied textarea {
    width: 100%; font-family: inherit; font-size: 12px;
    padding: 9px 11px; margin-bottom: 10px;
    background: rgba(0,0,0,.22); color: #e4e7ec;
    border: 1px solid rgba(255,255,255,.10); border-radius: 3px;
}
.oh2013 .pied input:focus, .oh2013 .pied textarea:focus {
    outline: 2px solid var(--rouge); outline-offset: 0; background: rgba(0,0,0,.35);
}
.oh2013 .pied label {
    display: block; font-family: 'Oswald', sans-serif; font-size: 11px;
    letter-spacing: .12em; color: #fff; text-transform: uppercase; margin-bottom: 5px;
}
.oh2013 .pied textarea { min-height: 78px; resize: vertical; }
.oh2013 .pied .envoyer {
    font-family: 'Oswald', sans-serif; letter-spacing: .1em; font-size: 12px;
    padding: 9px 20px; border: 0; cursor: pointer; border-radius: 3px;
    background: var(--rouge); color: #fff;
}
.oh2013 .copyright {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 15px 0; font-size: 11px;
}
.oh2013 .copyright .zone { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 0; }

/* ── Adaptation aux petits ecrans ──────────────────────────────────────── */
@media (max-width: 980px) {
.oh2013 .entete .zone { flex-wrap: wrap; gap: 0; }
.oh2013 nav { width: 100%; overflow-x: auto; }
.oh2013 nav a { padding: 12px 16px; }
.oh2013 .diapo { grid-template-columns: 1fr; }
.oh2013 .services .grille { grid-template-columns: repeat(2, 1fr); }
.oh2013 .domaine .zone { grid-template-columns: 1fr; text-align: center; }
.oh2013 .bulles, .oh2013 .domaine-marque { justify-content: center; text-align: center; }
.oh2013 .grille-offres { grid-template-columns: 1fr; max-width: 340px; gap: 18px; }
.oh2013 .offre, .oh2013 .offre:first-child, .oh2013 .offre:last-child { transform: none; }
.oh2013 .pied .zone { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.oh2013 .services .grille { grid-template-columns: 1fr; }
.oh2013 .banniere::before { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
.oh2013, .oh2013 * { transition: none !important; }
}

/* ── Ajustements de mise en production ─────────────────────────────────
   Le logo etait dimensionne en largeur : 138 px sur un fichier 1249x599
   donnent 66 px de haut, plus que la barre. On le dimensionne en hauteur,
   comme le site officiel, et la barre ne peut plus deborder. */
.oh2013 .entete .zone { align-items: center; min-height: 70px; }
.oh2013 .logo { padding: 9px 0; align-self: center; }
.oh2013 .logo img { width: auto; height: 52px; max-width: 170px; }

/* Quatre colonnes au lieu de trois : les liens Support et Entreprise
   rejoignent le pied de page. */
.oh2013 .pied .zone { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.oh2013 .liens.colonne { grid-template-columns: 1fr; gap: 9px; margin-top: 0; }
.oh2013 .pied .suivre { margin-bottom: 24px; }
.oh2013 .pied h4 + h4 { margin-top: 4px; }
.oh2013 .copyright .legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.oh2013 .copyright .legal a { font-size: 12.5px; }
.oh2013 .invisible {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 980px) {
    .oh2013 .pied .zone { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .oh2013 .pied .zone { grid-template-columns: 1fr; }
}

/* ── Menu mobile ───────────────────────────────────────────────────────
   Le survol n existe pas au doigt : les rubriques s ouvrent au toucher, et
   les actions rejoignent le menu au lieu d etre masquees. */
.oh2013 .burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; margin-left: auto; padding: 0;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; cursor: pointer;
    align-items: center;
}
.oh2013 .burger span {
    display: block; width: 19px; height: 2px; border-radius: 2px;
    background: #fff; transition: transform .25s, opacity .2s;
}
.oh2013 .entete.ouvert .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.oh2013 .entete.ouvert .burger span:nth-child(2) { opacity: 0; }
.oh2013 .entete.ouvert .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
    .oh2013 .entete .zone {
        flex-wrap: wrap; gap: 0; align-items: center; min-height: 62px;
        padding-top: 6px; padding-bottom: 6px;
    }
    .oh2013 .burger { display: flex; }
    .oh2013 .logo { padding: 4px 0; }
    .oh2013 .logo img { height: 42px; }

    .oh2013 nav {
        order: 3; flex-basis: 100%; width: 100%; margin: 0;
        display: none; flex-direction: column; align-items: stretch;
        overflow: visible; padding-bottom: 6px;
    }
    .oh2013 .entete.ouvert nav { display: flex; }
    .oh2013 nav > a,
    .oh2013 nav .rubrique > a {
        padding: 14px 6px; border-radius: 0; font-size: 13px;
        border-top: 1px solid rgba(255,255,255,.09);
    }
    .oh2013 nav .rubrique { display: block; position: static; }
    .oh2013 nav .rubrique > a::after { margin-left: auto; }

    .oh2013 .panneau {
        position: static; transform: none; width: auto; box-shadow: none;
        grid-template-columns: 1fr; gap: 0; padding: 2px 0 8px;
        background: rgba(255,255,255,.04); border-radius: 8px;
        opacity: 1; visibility: visible; display: none;
    }
    /* Le survol ne doit plus rien declencher : c est la classe qui commande. */
    .oh2013 nav .rubrique:hover .panneau,
    .oh2013 nav .rubrique:focus-within .panneau { display: none; }
    .oh2013 nav .rubrique.ouvert .panneau { display: block; }
    .oh2013 .panneau a { padding: 10px 12px; }

    .oh2013 .actions {
        order: 4; flex-basis: 100%; width: 100%;
        display: none; justify-content: center; flex-wrap: wrap; gap: 10px;
        padding: 12px 0 6px; border-top: 1px solid rgba(255,255,255,.09);
    }
    .oh2013 .entete.ouvert .actions { display: flex; }
    .oh2013 .langue-liste { left: 0; right: auto; }

    /* La barre de contact : deux lignes centrees plutot qu un debordement. */
    .oh2013 .barre-haut .zone { justify-content: center; gap: 12px 18px; }
    .oh2013 .barre-haut .reseaux { margin-left: 0; }
}
@media (max-width: 560px) {
    .oh2013 .barre-haut { font-size: 11px; }
    .oh2013 .barre-haut .contact { gap: 5px; }
    .oh2013 .logo img { height: 36px; }
}

/* ── Panneaux deroulants sur mobile ────────────────────────────────────
   Les regles de survol ont une specificite plus forte que les regles
   mobiles ; comme un appui au doigt declenche :focus-within, elles
   reappliquaient le centrage horizontal et le panneau sortait de l ecran.
   On les neutralise toutes les trois a specificite egale. */
@media (max-width: 980px) {
    .oh2013 nav .rubrique .panneau,
    .oh2013 nav .rubrique:hover .panneau,
    .oh2013 nav .rubrique:focus-within .panneau,
    .oh2013 nav .rubrique:nth-last-of-type(-n+2) .panneau,
    .oh2013 nav .rubrique:nth-last-of-type(-n+2):hover .panneau,
    .oh2013 nav .rubrique:nth-last-of-type(-n+2):focus-within .panneau {
        position: static; transform: none;
        left: auto; right: auto; top: auto;
        width: auto; max-width: 100%;
        grid-template-columns: 1fr; gap: 0;
        box-shadow: none; display: none;
        opacity: 1; visibility: visible;
    }
    .oh2013 nav .rubrique.ouvert .panneau { display: block; }
}